Integrating Google Tag Manager with Google Analytics in Webflow
You are what you measure.
Installing analytics on a website is a common practice. All website admins should be tracking their analytics closely in order to better optimize for site visitors and increase conversions. You can get very far with a simple Google Analytics tracking code and a Facebook pixel, however when you want to start split-testing, re-targeting, and embedding multiple widgets that help optimize your site traffic, you should consider Google Tag Manager.
Google Tag Manager is a simple, reliable container service from Google that allows you to consolidate all your script tags, analytics codes, or pixels into one single tag. This makes it incredibly easy to manage your website integrations. A few of the benefits for installing GTM is the ability to:
- Quickly deploy 3rd-party tags with zero code on your actual website
- Smooth collaboration between marketing and IT
- Easily check errors, security, and get the benefits of async tag loading
- 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 you would set up GTM inside of Webflow to start consolidating tags and improving your site metrics! 😁 👉 📈
Setting Up Google Tag Manager
To get started with GTM, simply sign up for an account here:
If you already have a Google account, this is super simple.
You can start by adding in your company name. Then click Continue.
Next, you can set up a new Container.
A container is comprised of a set of macros, rules and tags.
You can also choose the platform where your container will be placed — in this case on the Web.
I want to also mention that you can select the AMP integration which is focused on integrating with high-performance AMP Websites. If you are focused on performance, I would encourage you to consider shifting your site to AMP <html ⚡>. You can learn more about AMP here.
You’ll be prompted with an Terms of Service Agreement. Read through it. Basic terms:
- Google is not responsible for 3rd Party Tags.
- Google may screen such 3rd Party Tags to ensure compliance with this GTM Use Policy.
- You guarantee that You have the rights to upload the 3rd Party Tags.
- You agree not to, and not to allow third parties to use the Service or interfaces provided with the Service:
- to engage in or promote any unlawful, infringing, defamatory or otherwise harmful activity;
- to disable, interfere with or circumvent any aspect of the Service;
- to upload any data to Google Tag Manager that personally identifies an individual (such as a name, email address or billing information), or other data which can be reasonably linked to such information by Google, or
- to access any other Google product or service in a manner that violates their respective terms.
Next you’ll be prompted with a new tracking code for your container.
Next, in Webflow. Log in to your Dashboard and go to the “Custom Code” section.
Add the first GTM tracking code in the Head Code of your Webflow website.
Then click, Save Changes
Next, add the second GTM tracking code to your Footer Code.
Then click, Save Changes
Adding New Variables (Do this first!)
To get started with GTM, you can begin by adding in 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 set ups, you can also set custom fields, use custom dimensions, or set up cross domain tracking.
Initially, you will most likely want to add your Google Analytics Tracking ID. You can do this by setting up a new User-Defined Variable.
Click Variables > New and add a new Constant called gaProperty.
Add in your GA tracking ID. You can also add the gaDomain with a value of auto.
Finally, make sure you publish the workspace change by clicking Submit.
More info on variables here.
Adding New Tags
Now that you have the GA variables set up. You can start adding tags that will be embedded into your website.
A tag is a piece of code that sends information to a third party, such as Google Analytics.
Start by creating a Tags > New…
Next, 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.
A Page View on a website measures which 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, once that’s all set up, 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 will want to exclude any traffic from the staging URL that Webflow provides and keep your traffic specific to your production URL. You can do so by creating a Filter in Google Analytics.
Go to Settings > Property > View. If you already have a Default View you can use that. Otherwise, click Create new view and set up a new Default View.
Next, go to the filters section and click Add Filter. You can set up the new filter to “Exclude Webflow”. You’ll need to set a Predefined Filter Type to:
Exclude > traffic from the ISP domain > that contain.
Enter your Webflow staging domain and click save. (Ex. domain.webflow.io)
Now you should have a fully integrated GTM Container embedded into your Webflow website that’s only taking traffic from your production website URL.
While this was only going over the initial set up, which only tracks Page Views, there are many different ways to can expand on your GA tracking like using custom events, remarketing, ecommerce, and cross-domain.
The benefit of using Google Tag Manager is that you can continue to expand on your marketing analytics integrations without needing to write any code. You can use GTM to install any number of marketing tools to help you build a better website and increase performance online.
Overall, now you will have one tag on your Webflow site instead of adding dozens of custom script tags. It’s a simple set up that is a great way to set up analytics for a new website.