AnalyticsWebflow

Google Tag Manager

Ship and update every marketing and analytics tag from one container.

Google Tag Manager (GTM) is a free tag management system that sits between your Webflow site and every third-party marketing and analytics pixel. You paste the GTM container into Webflow Custom Code once, then deploy, update, and disable tags like GA4, Meta Pixel, Google Ads, and LinkedIn Insight from the GTM dashboard without touching Webflow again. For any Webflow site running more than one tracking tool, GTM is the cleanest way to add Google Tag Manager to Webflow and keep every tag in one place — and it unlocks event tracking (clicks, scroll depth, form submissions, video plays) that Webflow's native integrations don't offer on their own.

What Google Tag Manager does on Webflow

  • Centralizes every tag in one container. GA4, Google Ads, Meta Pixel, LinkedIn Insight, Hotjar, and Microsoft Clarity all deploy from a single GTM dashboard instead of cluttering Webflow Custom Code.
  • Ships tags without code changes. Add the container once; every future tag addition, edit, or removal happens in GTM and goes live on your next GTM publish — no Webflow republish required.
  • Tracks advanced events. Clicks, element visibility, scroll depth, YouTube plays, and form submissions fire through GTM triggers and variables, none of which Webflow exposes natively.
  • Versions and rollbacks. Each GTM publish creates a versioned snapshot you can revert to in one click if a tag breaks.
  • Separates permissions. Grant a marketing team edit access to tags without giving them Webflow Designer or Site Settings access.
  • Keeps Custom Code clean. One container snippet replaces a dozen individual pixel snippets, making your Webflow Custom Code easier to audit and maintain.

When you need GTM vs. Webflow's native integrations

Use GTM when you run more than one tag. If GA4 is your only analytics tool, Webflow's native Google Analytics integration in Site Settings is faster to set up and one fewer moving part. Once you add a second pixel — Meta Pixel for ads, LinkedIn Insight for B2B, a Google Ads conversion tag, or a heatmap like Clarity — GTM pays for itself in reduced complexity. You should also reach for GTM when you need event tracking beyond pageviews, when a marketer needs to manage tags independently, or when consent-mode banners must control which tags fire in which regions.

How to add Google Tag Manager to Webflow

  1. Go to tagmanager.google.com, create an account, and create a container for your Webflow site. GTM displays two snippets.
  2. Copy the first snippet — the <script> block meant for the <head>.
  3. In Webflow, open your project and go to Site Settings > Custom Code.
  4. Paste the <script> snippet into the Head code field.
  5. Copy the second snippet — the <noscript> block — and paste it into the Body code field.
  6. Click Save Changes, then Publish your Webflow site so the container loads on the live domain.
  7. Back in GTM, add your first tag (for example, a GA4 Configuration tag), set its trigger to All Pages, click Preview to debug with Tag Assistant on your live site, then click Submit and Publish the container.

This Webflow GTM setup is the foundation; every tag you add afterward lives entirely inside GTM.

Tracking Webflow form submissions with GTM

Webflow forms submit asynchronously, which means GTM's built-in Form Submission trigger fires too early and often misses successful submits. The reliable approach is a dataLayer event pushed when Webflow shows its success state.

When a Webflow form succeeds, the platform adds a w-form-done class to the success message element. Add a small script — either in Webflow Custom Code or a GTM Custom HTML tag — that watches for that class and pushes an event:

window.dataLayer = window.dataLayer || [];
document.addEventListener('DOMContentLoaded', function () {
  var observer = new MutationObserver(function () {
    if (document.querySelector('.w-form-done')) {
      window.dataLayer.push({
        event: 'form_submission_success',
        formId: 'contact-form'
      });
    }
  });
  observer.observe(document.body, { childList: true, subtree: true });
});

In GTM, create a Custom Event trigger with the event name form_submission_success, then attach a GA4 Event tag or a Google Ads conversion tag to that trigger. Use Preview mode to submit the form on your live site and confirm the event fires. This pattern lets you track Webform submissions with GTM accurately and route the same event to any number of destinations.

Google Tag Manager vs. native Webflow integrations

CapabilityGTM via Custom CodeNative Webflow integration
Number of tagsUnlimited, one containerOne snippet per tag
Code changes to add a tagNone after initial setupRepublish Webflow each time
Event tracking (clicks, scroll, forms)Full trigger and variable systemNot available
Setup difficultyModerate learning curvePaste-and-publish
Tag management accessSeparate GTM permissionsRequires Webflow access
Best forMulti-tag sites, marketing teamsSingle-tag sites, simplicity

Native integrations win on simplicity for a single tag. GTM wins the moment you add a second pixel or need event tracking.

Best GTM + Webflow use cases

Multi-platform marketing pixels

Run GA4, Meta Pixel, Google Ads, and LinkedIn Insight from one container and route conversions to each ad platform without pasting four separate snippets into Webflow.

Conversion tracking on form submissions

Fire a Google Ads or Meta conversion event when a visitor submits a contact, demo, or lead form, using the dataLayer method above so you capture only successful submits.

Scroll depth and video engagement

Add a scroll-depth trigger to fire events at 25%, 50%, 75%, and 100% of long-form CMS pages, and track YouTube play, pause, and complete events to measure content engagement.

Audience segmentation and retargeting

Push user properties into the dataLayer — plan type, logged-in status, CMS category — and use them as GTM variables to fire retargeting or personalization tags for specific audiences.

Use GTM's consent mode to gate tags by region, so analytics and advertising pixels respect GDPR and CCPA consent choices without rewriting each tag individually.

Limitations to know

  • Added complexity. GTM has its own triggers, variables, and dataLayer concepts; a misconfigured trigger can silently break tracking across the entire site, and the failure is invisible without Preview mode.
  • Small performance cost. The container loads sequentially, and poorly sequenced or heavy tags can delay page paint and hurt Core Web Vitals if you don't audit them.
  • No data of its own. GTM transports tags — it stores nothing. You still need GA4 or another analytics tool behind it to see reports.
  • Does not fire in Designer preview. GTM tags run on the published site only, so you cannot test them inside the Webflow Designer; use GTM Preview mode on the live domain instead.

Frequently asked questions

Create a container at tagmanager.google.com and copy the two snippets it gives you. In Webflow, open Site Settings, go to the Custom Code tab, paste the GTM script into the Head code field and the noscript snippet into the Body code field, then save and publish your site. Back in GTM, add your first tag, click Preview to debug with Tag Assistant, then Submit and Publish the container. Tags fire only on the published site, not in the Webflow Designer.

Yes, completely. Google Tag Manager has no paid tier, no usage limits, no pageview caps, and no contract. You can run unlimited containers, tags, triggers, and variables across as many sites as you want at no cost. Google monetizes the advertising and analytics products that GTM deploys, not the tag manager itself.

Not always. If you only run GA4, Webflow's native Google Analytics integration in Site Settings is simpler and sufficient. You need GTM when you run multiple tags (GA4 plus Meta Pixel, Google Ads, LinkedIn Insight), when you want advanced event tracking like clicks and scroll depth, or when a marketing team needs to manage tags without Webflow Designer access. One tag usually does not justify GTM.

Webflow forms submit via AJAX, so the built-in form submit trigger misses successful submits. The reliable method is to push a dataLayer event when the success state appears. Add a small script that detects the w-form-done class Webflow adds on success and runs dataLayer.push with an event name like form_submission_success. In GTM, create a Custom Event trigger matching that name and attach a GA4 Event or Google Ads conversion tag to it. Verify in Preview mode.

They do different jobs. Google Tag Manager is a delivery system that deploys and routes tags, including the GA4 tag, to your site. GA4 is the analytics product that collects and reports user behavior data. GTM transports; GA4 measures. You can install GA4 directly through Webflow without GTM, but when you use GTM you add GA4 as a tag inside the container and manage it from the GTM dashboard instead of the Webflow Site Settings.

More Webflow integrations
Ready to build?

Launch faster with Webflow templates

Every template is CMS-ready and integration-friendly — connect your tools and ship.