Integrating Google Tag Manager with Google Analytics in Webflow

You are what you measure. Marketing doesn’t mean much without careful analytics and tracking. Here’s how to make the most of your marketing with Webflow.

Cameron Roe
February 13, 2020
Tutorials

Installing analytics on a website is a common practice. All website admins should be tracking their analytics closely to better optimize for site visitors and increase conversions.

You can get far with a simple Google Analytics tracking code and a Facebook pixel, but when you want to start split-testing, retargeting, and embedding multiple widgets that help optimize your site traffic, it’s time to consider Google Tag Manager.

What is Google Tag Manager?

Google Tag Manager (or GTM) is a simple, reliable service from Google you can use to consolidate all your script tags, analytics codes, and/or pixels into a single tag. This makes it incredibly easy to manage your website integrations without editing code.

A few of the benefits for installing GTM is the ability to:

  1. Quickly deploy 3rd-party tags with zero code on your actual website
  2. Simplify collaboration between marketing and IT
  3. Easily check errors, security, and get the benefits of async tag loading
  4. Scale up tags without the headaches. Add dozens of pixels and track your performance thoroughly.

Webflow, a fantastic tool for building modern websites, allows you to easily integrate your GTM tracking code and start tracking performance seamlessly.

webflow new home page

Let’s look at how to set up GTM inside Webflow to start consolidating tags and improving your site metrics!

📈 👉 😁

Set up Google Tag Manager

Prefer to watch?

We got you.

Alright, for those who like to read, let's dive right in.

First, just sign up for an account.

If you already have a Google account (and who doesn’t?!), this is super simple. Start by adding your company name.

adding account name to google tag manager

Next, set up a new Container. A container consists of a set of macros, rules, and tags. You can also choose your container’s platform  —  in this case, on the web.

adding container name to google tag manager

After you agree to the terms of service, you’ll be prompted to “install” Google Tag Manager — i.e., add a new tracking code for your container to your Webflow site.

installing google tag manager
GTM <head> tracking code

You'll first want to copy the <head> code to your clipboard. Next, head back to Webflow. Log in, then jump into the Project Settings for the site you’re working on, and go to the Custom Code tab.

custom code tab in webflow
‍Custom code tab in Webflow

Add the first GTM tracking code to the head code of your Webflow website, and save your changes.

adding gtm to head code in webflow
Adding the GTM Container code snippet to the <head> tag

Next, you want to head over to the Designer in your Webflow project, and you'll want to add a custom code embed element. Make sure when you add the custom code embed element, its the first thing under the Body. See below:

adding a custom code embed in webflow

Now, go back to Google Tag Manager and copy the <body> code to your clipboard.

install google tag in body
GTM <body> tracking code

Then, go back to your Webflow project that has the HTML Embed Code Editor open and paste in the <body> code you copied from GTM.

pasting gtm body code in webflow

Then, click Save & Close — that's it. Now, you can copy the HTML Embed element and add it to any page on your Webflow site that you want to use Google Tag Manager. A good practice, if you want to continue to reuse the HTML Embed element, is to turn it into a symbol.

turning tag manager into a symbol

Now you can easily add your symbol to every page instead of creating a new custom code embed and pasting in the GTM code in each time. The great thing about symbols too is that if you need to update the GTM code, for whatever reason, it will reflect on all pages that have the symbol. For more info on symbols, check out our guide on Webflow University.

Add new variables

Now to start really making use of GTM.

I recommend you start by adding variables that will be used across your different tag integrations. This allows you to avoid duplicating important tracking data and makes it easy to label the tracking settings across different tags.

For more advanced setups, you can also define custom fields, use custom dimensions, or set up cross-domain tracking.

Note: Google's UI for this has been updated, but the directions are still as follows

‍Create user-defined variables

Initially, you’ll probably want to add your Google Analytics Tracking ID. You can do this by setting up a new user-defined variable.

Here’s how to create your first user-defined variable:

  1. Click Variables > New and add a new Constant called gaProperty
  2. Add your Google Analytics tracking ID. You can also add the gaDomain with a value of auto.
  3. Finally, publish the workspace change by clicking Submit

We won’t dig in too deep here, but you can learn more about variables in the Help section of Google Tag Manager.

Design interactions and animations without code

Build complex interactions and animations without even looking at code.

Subscribe to be a Webflow Insider
Thank you! You are now subscribed!
Oops! Something went wrong while subscribing.

Add new tags

Now that you have the Google Analytics variables set up, you can start adding tags that will be embedded into your website.

In the world of Google Tag Manager, a tag is a piece of code that sends information to a third party, such as Google Analytics.

Start by clicking Tags > New…

Then, set up a new tag with Classic Google Analytics. Add the Web Property ID using the existing gaProperty variable. Make sure the track type is set to Page View, which tracks the pages your users visit.

You can also set up events if you want to measure a specific interaction, such as a button click on a promotion.

Finally, publish the change and give it a title of Added GA Tracking Tag.

You should have a new version with a tag and a variable integrated.

Limit staging traffic

Finally, you’ll want to exclude any traffic from the staging URL Webflow provides (the webflow.io subdomain version). This will keep your traffic analytics specific to your production URL.

To do that, you’ll to create a Filter in Google Analytics.

Go to Settings > Property > View. If you already have a Default View, you can use that. Otherwise, click create a new view and set up a new Default View.

Next, go to the filters section and click Add Filter. Name it “Exclude Webflow” or something similar. You’ll need to set a Predefined Filter Type to:

Exclude > traffic from the ISP domain > that contain > your Webflow staging domain (e.g., domain.webflow.io)

Then save your changes.

And you’re done!

Now you should have a fully integrated GTM Container embedded in your Webflow website that’s only tracking traffic to your production website URL.

Take your analytics further

While we’ve only covered the initial setup for tracking Page Views, you can expand your GA tracking in myriad ways, including using custom events, remarketing, ecommerce, and cross-domain analytics.

The benefit of using Google Tag Manager is that you can continue to expand on your marketing analytics integrations without writing any code. You can use GTM to install any number of marketing tools to help you build a better website and increase performance online. All with a single tag.

If you’ve used Google Tag Manager in any unique or powerful ways, let us know in the comments!

Cameron Roe

A passionate software design engineer, product creator, growth hacker, and entrepreneur who strives to solve unique challenges and build innovative solutions that impact and inspire humanity.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free
Designer

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Interactions

Build website interactions and animations visually.

CMS

CMS

Define your own content structure, and design with real data.

Ecommerce

Ecommerce

Goodbye templates and code — design your store visually.

Editor

Editor

Edit and update site content right on the page.

Hosting

Hosting

Set up lightning-fast managed hosting in just a few clicks.