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
- Go to tagmanager.google.com, create an account, and create a container for your Webflow site. GTM displays two snippets.
- Copy the first snippet — the
<script>block meant for the<head>. - In Webflow, open your project and go to Site Settings > Custom Code.
- Paste the
<script>snippet into the Head code field. - Copy the second snippet — the
<noscript>block — and paste it into the Body code field. - Click Save Changes, then Publish your Webflow site so the container loads on the live domain.
- 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
| Capability | GTM via Custom Code | Native Webflow integration |
|---|---|---|
| Number of tags | Unlimited, one container | One snippet per tag |
| Code changes to add a tag | None after initial setup | Republish Webflow each time |
| Event tracking (clicks, scroll, forms) | Full trigger and variable system | Not available |
| Setup difficulty | Moderate learning curve | Paste-and-publish |
| Tag management access | Separate GTM permissions | Requires Webflow access |
| Best for | Multi-tag sites, marketing teams | Single-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.
Consent-mode compliance
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.
Related Webflow integrations
- Google Analytics — the most common tag deployed through GTM, and the quantitative reporting layer GTM does not provide.
- Microsoft Clarity — free heatmaps and session recordings, deployable through GTM and linkable to GA4.
- Blog: 20 Best Webflow Integrations to Use in 2026
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.
Launch faster with Webflow templates
Every template is CMS-ready and integration-friendly — connect your tools and ship.









