Oct 20, 2021
Adding Google Tag Manager and Google Analytics to Webflow — Part 1
In Part 1 of this post, we’ll look at setting up a Google Tag Manager container and quickly and easily installing it in Webflow. In Part 2, we’ll add Google Analytics 4 and Google Universal Analytics to Tag Manager, and test that everything’s running smoothly in Tag Manager and Webflow.
While Webflow is usually the simple no-code solution of choice for quick and easy website design, and dare I say development, getting Google Tag Manager installed properly can be a bit of a hack. But don’t fret, today we’ll walk you through the simplest solution for getting Tag Manager up and running as quickly as possible while still functioning 100%.
But first things first:
Set up a Tag Manager Container
If you haven’t done this yet we’ll run you through this really quickly. (We’ll do a separate post on why you should be using Tag Manager and not just the vanilla Google Analytics installation by pasting in the GA UA tracking code on Webflow and a myriad of other Tag Manager benefits).
Step 1 — Create a Tag Manager Account
This bit is super easy. Sign up for Tag Manager and hit Create Account.
Give the account a name, select the country, stick in your URL and hit Web.
After you accept the user agreement you’ll end up with the installation instructions. The first bit will just be a copy and paste, but the second bit that goes in the <body> tag will be a bit harder.
Step 2 — Installing Tag Manager in Webflow
Once you’ve reached the above screen you’ll want to copy the code that goes in the <head> and head on over to your Webflow Project settings page.
Once you’re in Settings, open up Custom Code and paste the Tag Manager Container code into the Head Code section and save. This bit’s as easy and 1, 2, 3.
Next stop’s the Designer. Add a new HTML Embed.
Paste in the second bit of code from Tag Manager that’s supposed to go in the <body>. Save and Close.
We recommend turning this into a Symbol as you’re gonna reuse this on every page in your Webflow Project.
Once you’ve turned into a Symbol, drag it all the way to the top so it sits just under your Body element. You always want this to be right at the top of every page’s list of elements.
And that’s it. Tag Manager is now safely embed in your Webflow Project. Just remember to make sure it’s sitting at the top of each page in your element list under Navigator and publish the container in Tag Manager before you publish your Webflow Project.
But wait, there’s more:
Step 3 — Testing
Naturally you want to make sure Tag Manager is installed, so let’s test.
You’re going to want to install this plugin for Chrome (sorry Safari users).
Make sure you’ve published Tag Manager and then Webflow, now head over to your site.
Open the plugin and hit Enable.
Once you’ve done that refresh the page (command+R).
The Plugin should now show a little number (this will differ on the amount of Tag loaded):
You’ll notice mine has 4. Number 4 is my Tag Manager container, the blurred bit is my container ID that should match my Tag Manager Container in Tag Manager itself.
No 1 is my Google Analytics 4 Tag, no 2 is my old Google Analytics Tag (Universal Analytics), and no 3 is Google Optimise. We’ll do more posts about setting all these up in Tag Manager so don’t worry, if you’ve just created your container you won’t see any of these.
But yeah, that’s it, well done, you’ve set up Google Tag Manager in Webflow. As a side note, don’t worry about the sad little blue face next to the Tag Manager container, that’s just because this is a non-standard Tag Manager implementation. Sadly this is pretty much as good as it gets, until Webflow changes things you’re not gonna see a green smiley, but everything works just fine, trust us.
In part 2 of this series we’ll cover setting up Google Analytics in Tag Manager. You can find Part 2 here. You can also check out how to link your GA4 account to BigQuery here. and a guide on speeding up your site using deferred Tags here.
Got any questions, hit us up in the comments on the site, and remember to check out the How-To section of our blog for more tutorials.
Originally published at https://www.milkmoonstudio.com.
