Milk Moon Studio
Published in

Milk Moon Studio

Adding Google Tag Manager and Google Analytics to Webflow — Part 1

Google Tag Manager and Webflow
Please check out the full post for more detail and remember to subscribe to our channel to stay up to date with our latest how-tos and updates.

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.

Tag Manager Create Account

Give the account a name, select the country, stick in your URL and hit Web.

Google Tag Manager account creation

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

Google Tag Manager Install Snippet

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.

Google Tag Manager Webflow Header Install

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.

Google Tag Manager Webflow Embed Tag

Paste in the second bit of code from Tag Manager that’s supposed to go in the <body>. Save and Close.

Google Tag Manager Webflow Embed Code

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.

Google Tag Manager embed symbol

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):

Google Tag Manager Webflow install test

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



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jakes van Eeden

Jakes van Eeden

South African, small time Webflow dev, analytics enthusiast and tech lover. I write on behalf of our Webflow design and dev agency