Add Google Tag Manager to Webflow the Right Way

How to Add Google Tag Manager to Webflow Without Silent Failures

Last quarter I audited a SaaS company running EUR 4,500 a month on Google Ads. Their Webflow site looked polished. Google Analytics showed sessions. But when I opened GTM Preview mode, the container was loading twice on every page, form submissions were not tracked at all, and the Google Ads conversion tag was firing on page load instead of on the thank-you state. They had been optimizing campaigns against phantom conversions for five months.

The root cause was a messy Google Tag Manager Webflow setup: the head snippet pasted into the wrong field, the <noscript> part dropped into Footer code instead of the body, and zero custom event handling for Webflow's AJAX forms. None of this is rare. Across the Webflow tracking audits I run, the same three or four mistakes show up in roughly eight out of ten sites.

This guide walks through the exact steps to add Google Tag Manager to Webflow so that every tag fires once, forms track reliably, and you do not end up feeding bad data to your ad platforms.

What You Need Before You Start

Before touching Webflow, make sure two things are in place.

A GTM account and container. If you do not have one yet, go to tagmanager.google.com, create an account, and create a Web container. Google will give you two code snippets: one for <head>, one for immediately after the opening <body> tag. Keep both open in a tab. The official install documentation specifies the exact placement.

A paid Webflow Site plan. Webflow's free Starter plan does not let you edit custom code in Site Settings. You need at least a Basic Site plan, or a paid Workspace plan that unlocks custom code across the workspace. If your site is on the free tier, you cannot add GTM at the site level at all. Webflow's plan comparison page confirms this.

Step 1: Add the GTM Head Snippet in Webflow Site Settings

In your Webflow project, go to Site Settings > Custom Code.
You will see two fields: Head Code and Footer Code.
Paste the first GTM snippet (the <script> block) into the Head Code field.

This snippet loads the GTM container. Placing it in Head Code means it executes on every page before the page renders, which is exactly what Google specifies.

Do not paste both snippets into the Head Code field. The second snippet is an <noscript> iframe and belongs in the body. Mixing them up is the most common Webflow GTM setup mistake I see.

Step 2: Place the Noscript Snippet in the Body

Here is where Webflow makes things awkward. The Footer Code field in Site Settings injects code before the closing </body> tag, not after the opening <body> tag. Google's documentation says the <noscript> snippet must go immediately after the opening <body> tag.

You have two options.

Option A: Use the Footer Code field anyway. The <noscript> block only matters for users with JavaScript disabled, which is under 1 percent of web traffic. In practice, placing it in the Footer Code field will not break your tracking for the vast majority of visitors. Paste the <noscript> snippet into the Footer Code field, publish, and move on.

Option B: Use an HTML Embed element for exact placement. If you want it right after <body> (for full compliance or Search Console verification), do this:

Drag an Embed element onto your page canvas.
Paste the <noscript> GTM snippet into the Embed's code editor.
Using the Navigator panel, drag the Embed element to the very top of your page structure, above everything else.
Right-click the Embed and select Create Component (formerly Symbol) so it appears on every page.

Option A is fine for 99 percent of sites. Option B is the technically correct approach.

Step 3: Publish and Verify

Webflow custom code does not execute in the Designer preview. You must publish the site to test.

Publish your site.
Open the live site in Chrome.
Install the Tag Assistant Companion extension and launch GTM Preview mode from your GTM workspace.
Confirm the container fires on every page. You should see a Container Loaded event and a DOM Ready event in the Preview panel.

If the container does not appear, check for typos in your container ID, confirm the site is actually published (not just saved), and verify you are on a paid Site plan.

Quick Diagnostic Table

Symptom	Likely cause
Container not loading at all	Snippet in wrong field, or free plan blocking custom code
Container loading twice	Snippet pasted in both Head Code and an Embed element
Tags fire but data is wrong	Container ID mismatch between environments
Preview mode shows no tags	No tags published in the GTM container yet

Setting Up Webflow Form Tracking with GTM

This is where most Webflow Google Tag Manager installs fall apart. Webflow forms submit via AJAX. The page does not reload, and the URL does not change. That means two things fail silently:

GA4 Enhanced Measurement form tracking does not detect the submission. It watches for page reloads or navigation changes, neither of which happens with Webflow forms.
GTM's built-in Form Submission trigger is unreliable here because it was designed for traditional HTML form POSTs.

The fix is a lightweight JavaScript listener that watches for the Webflow success state and pushes a dataLayer event.

Add the Listener Script

Create a Custom HTML tag in GTM with this code:

<script>
document.querySelectorAll('.w-form').forEach(function(form) {
  var successBlock = form.querySelector('.w-form-done');
  if (!successBlock) return;

  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (successBlock.style.display === 'block') {
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
          event: 'webflow_form_submit',
          formId: form.querySelector('form')
            ? form.querySelector('form').getAttribute('id') || 'unnamed_form'
            : 'no_form_element'
        });
      }
    });
  });

  observer.observe(successBlock, {
    attributes: true,
    attributeFilter: ['style']
  });
});
</script>

Set this tag to fire on All Pages with the trigger type DOM Ready.

What this does: it watches every .w-form wrapper on the page. When Webflow shows the success block (by flipping its display to block), the observer pushes a webflow_form_submit event into the dataLayer, including the form ID. No page reload needed.

Create the GTM Trigger and GA4 Tag

In GTM, create a Custom Event trigger with event name webflow_form_submit.
Create a GA4 Event tag with event name form_submit (or generate_lead, depending on your setup). Set it to fire on the trigger from step 1.
If you want the form ID as a parameter, create a Data Layer Variable for formId and pass it as an event parameter.

If form tracking terminology feels shaky, my post on what a data layer actually does explains the mechanics in detail.

Give every form in Webflow Designer a unique ID. Without it, you cannot tell which form converted. This matters the moment you have more than one form on the site, which is most B2B Webflow sites I audit.

Common Webflow GTM Mistakes and How to Avoid Them

Pasting both snippets into Head Code. The <noscript> block inside <head> is invalid HTML. Some browsers silently ignore it. Others behave unpredictably. Split the snippets.

Installing GTM plus a standalone Google Analytics tag. If you add Google Tag Manager to Webflow and also paste a separate GA4 gtag.js snippet into your custom code, you will double-count every pageview. Use GTM to deploy GA4. Not both. If you are unclear on the boundary between the two tools, read Google Tag Manager vs Google Analytics: The Difference.

Forgetting Consent Mode. If your site serves visitors in the EU, your GTM container needs Google Consent Mode v2 configured before tags fire. Webflow does not have a native consent banner. You will need a third-party CMP (like Cookiebot or CookieYes) integrated through GTM or a custom embed. Skipping this does not just create legal risk. It means Google Ads loses modeling data, and your conversion reporting degrades.

Not testing after every Webflow publish. Webflow re-generates your site's static files on every publish. If you accidentally remove or overwrite the custom code fields, your tracking silently disappears. I recommend a post-publish check as part of your workflow: publish, open Preview mode, confirm the container loads.

Beyond the Basics: What to Set Up Next

Once GTM is installed and forms are tracking, here is what I typically configure next for Webflow clients:

GA4 with proper event structure. Pageviews alone are not enough. You want scroll depth, outbound clicks, and file downloads configured correctly. My GA4 event tracking guide covers the parameters that matter and the mistakes I see most often.
Google Ads conversion tracking. If you are running paid search, the conversion tag fires through GTM, not through a separate Google Ads snippet. Get the conversion label right the first time.
Server-side tracking. For high-value Webflow sites, a server-side GTM container extends cookie lifetimes beyond Safari ITP's 7-day cap on client-side cookies and reduces data loss from ad blockers. It is not a day-one requirement for most sites, but it is worth understanding early.

If your tracking stack has grown organically and you are not sure what is firing, what is missing, or what is double-counting, I can audit it and tell you exactly what needs fixing.

FAQ

Does Webflow have a native Google Tag Manager integration?

No. Webflow does not offer a one-click GTM integration. You add the GTM snippets manually through Site Settings Custom Code fields or HTML Embed elements. This gives you full control over placement but means you need to handle the install yourself.

Can I add Google Tag Manager to Webflow on the free plan?

No. The free Starter plan does not allow editing custom code in Site Settings. You need at least a Basic Site plan or a paid Workspace plan to add GTM snippets to your Webflow site.

Why are my Webflow form submissions not showing in Google Analytics?

Webflow forms submit via AJAX without a page reload. GA4 Enhanced Measurement and GTM built-in form triggers both expect a page reload or URL change. You need a custom JavaScript listener that watches for the Webflow success state and pushes an event to the data layer.

Where does the GTM noscript snippet go in Webflow?

Google specifies it should go immediately after the opening body tag. Webflow Footer Code injects before the closing body tag instead. You can use an HTML Embed element placed at the top of your page structure for exact placement, or accept the Footer Code field since the noscript block only affects users with JavaScript disabled.

Can I use Google Tag Manager and a separate GA4 snippet at the same time?

You can, but you should not. If GTM deploys GA4 and you also have a standalone gtag.js snippet in your Webflow custom code, every pageview and event will be counted twice. Deploy GA4 exclusively through GTM to keep your data clean.

Not sure your Webflow tracking is actually working? Book a tracking audit — I will tell you exactly what is broken and how to fix it.