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
November 16, 2017
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.

Ok. But what’s 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.

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.

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

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.

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.

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.

‍GTM container tracking code

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.

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

‍Adding the GTM Container code snippet to the <head> tag.

Next, add the second GTM tracking code to your footer code and save your changes.

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.

‍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.

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

Bring your wildest web designs — and client sites — to life, without writing code.

CMS

Build completely custom content structures for client sites and prototypes.

Hosting

World-class web hosting at your fingertips, without all the usual hassles.