Google Tag Manager

Webflow generates production-ready HTML and handles hosting, CMS content, and responsive layouts. But it does not include a native tag management layer. Every time a marketing team needs a new analytics pixel, remarketing tag, or conversion script, someone has to edit site code directly. That workflow creates bottlenecks and risks breaking existing tracking.

Google Tag Manager connects to Webflow through the Google Site Tools app or manual code injection, giving marketing and analytics teams a single dashboard to deploy, edit, and disable tracking scripts. Once the GTM container is installed, new tags fire on the live site without any further changes in Webflow. Ad pixels, heatmap scripts, consent management tools, and GA4 events all route through one container instead of scattered code snippets.

This guide covers Google Tag Manager implementation options in Webflow, including the Google Site Tools for Webflow app, manual snippet installation, and API-based workflows. The Google Site Tools for Webflow app is built by Webflow and listed in the Webflow App Marketplace. Its website, google-site-tools-for-webflow.com, functions as an OAuth endpoint rather than a public documentation hub.

This integration is most relevant for marketers managing paid campaigns, agencies running multiple Webflow client sites, and developers building analytics infrastructure. Growth teams tracking form conversions, e-commerce managers measuring purchase funnels, and compliance-focused teams implementing cookie consent all benefit from centralized tag management on Webflow.

How to integrate Google Tag Manager with Webflow

What is Google Tag Manager? Google Tag Manager is a tag management system that lets you deploy and update tracking scripts on a website from a web-based interface. It supports built-in tag templates for Google products and custom HTML tags for third-party tools. GTM uses a container-based model where tags, triggers, and variables are configured independently from site code.

Teams use GTM with Webflow when they need to add multiple tracking scripts without repeated code edits. A single GTM container replaces individual script installations for GA4, Google Ads, Meta Pixel, LinkedIn Insight Tag, Hotjar, and other tools. Webflow's own developer documentation labels GTM as the recommended method for advanced tracking and integrations.

This Google Tag Manager-Webflow guide supports 3 approaches:

• The Google Site Tools app handles site-wide GTM deployment without writing code, and also connects GA4 and Google Search Console.
• Custom code injection lets you paste GTM snippets into custom code in head and body tags or Code Embed elements for more control over placement and scope.
• The Webflow and GTM APIs give you full control over programmatic container provisioning, tag deployment, and custom code injection, but require server-side development.

Most implementations start with the app or manual code method and add API-driven workflows as tracking requirements grow.

Install the Google Site Tools app

The Google Site Tools for Webflow app is the fastest path to a working GTM installation. Built by Webflow, the app authenticates with your Google account and auto-injects the GTM container script into your site. It also connects GA4 and Google Search Console in the same flow, so you can set up all three Google services at once. A paid Webflow plan is required — the app does not bypass the plan restriction for custom code access.

To set up the integration:

1. Open the Webflow App Marketplace and search for "Google site tools for Webflow." Install the app for your site.
2. Authenticate with your Google account inside the app interface. This grants access to your GTM containers, GA4 properties, and Search Console sites.
3. Select your GTM container from the dropdown menu. The app automatically injects the GTM container into your site code.
4. Configure team permissions as needed and verify the container is active by checking the GTM dashboard.
5. Publish your site. Custom code changes applied by the app do not go live until you publish.

The app provides these capabilities:

• Code-free GTM container deployment across all pages
• Unified Google account authentication for GTM, GA4, and Search Console
• In-Webflow analytics viewing for GA4 traffic metrics
• Team permission management for Google tool access

The app works well for standard site-wide GTM deployments. For page-specific tag placement or sites that require strict GDPR compliance with a JavaScript-based consent management platform, manual installation offers more control. The app injects a <noscript> tag that JavaScript-based CMPs cannot block, which may cause compliance issues for EU-facing sites.

Add GTM snippets with custom code

Manual installation gives you direct control over where GTM snippets appear in your site's HTML. This method is better suited for page-specific deployments, strict <noscript> tag placement, or sites where consent management platforms need full control over script execution. You need a paid Webflow site plan and your GTM container ID (format: GTM-XXXXXX) from tagmanager.google.com.

Add GTM site-wide through site settings

The site settings method applies your GTM container to every page. Copy both snippets from your GTM container's installation instructions before starting.

To add the GTM head snippet:

1. Go to Site settings > Custom code tab.
2. Paste the GTM <script> snippet into the Head code field.
3. Click Save changes, then publish your site.

To add the GTM body snippet:

1. In the same Custom code tab, paste the GTM <noscript> snippet into the Footer code field.
2. Click Save changes, then publish.

The Footer code section injects code before the closing </body> tag — not immediately after the opening <body> tag as GTM's installation guide specifies. For most tracking use cases, this placement works correctly. If strict placement compliance matters, use an HTML Embed element instead for the body snippet.

Place the body snippet with a Code Embed element

An HTML Embed element lets you position the GTM <noscript> snippet closer to the opening <body> tag, matching GTM's official installation instructions.

To add the snippet:

1. In Webflow, drag an HTML Embed element onto the canvas as the first element under the Body.
2. Open the embed's code editor and paste the GTM <noscript> snippet.
3. Click Save & Close.
4. To apply the snippet across all pages, right-click the element and select Create Symbol. Symbol updates propagate to every page that uses it.

Combine this method with the site settings head snippet for a complete installation that follows GTM's recommended tag placement.

Apply GTM to a single page

Page-level custom code scopes GTM to one specific page. This is useful for landing pages, thank-you pages, or test pages where you need a different container or additional tracking.

To add page-level GTM code:

1. In Webflow, open Page settings for the target page.
2. Paste the GTM <script> snippet into the Before </head> tag section.
3. Paste the GTM <noscript> snippet into the Before </body> tag section.
4. Save and publish.

Page-level custom code loads after site-level custom code in the HTML output. Each section supports up to 50,000 characters. Do not wrap GTM snippets in <html>, <body>, or <head> tags — Webflow injects those structural elements automatically.

Build with the Webflow and GTM APIs

The API approach enables programmatic GTM management at scale. This is separate from the Google Site Tools app and is intended for custom implementations rather than app-managed setup. Agencies onboarding multiple client sites, teams automating tag deployment through CI/CD pipelines, and developers syncing GTM updates with Webflow CMS content changes all benefit from this method. It requires server-side development and OAuth 2.0 authentication for GTM.

Three APIs work together in this integration:

• The GTM API v2 handles container creation, tag deployment, trigger configuration, and version publishing
• Webflow Data API handles custom code injection for sites and individual pages
• Webflow webhooks trigger real-time events like form_submission, collection_item_published, and site_publish to keep GTM synchronized with content updates

GTM uses OAuth 2.0 authentication, and the Webflow Data API uses Bearer token authentication. Both operate within their respective quota systems.

Provision a GTM container and inject it into Webflow

This workflow creates a new GTM container and installs it on a Webflow site without manual configuration. It is the foundation for agency-scale deployments.

To implement automated container provisioning:

1. Create a GTM container by calling POST /tagmanager/v2/accounts/{accountId}/containers with usageContext: ["WEB"] and the site's domain. The response returns a publicId (your GTM-XXXXXXX ID).
2. Retrieve the embeddable snippet by calling GET /tagmanager/v2/accounts/{account}/containers/{container}:snippet. The response includes the full JavaScript embed code.
3. Inject the snippet into Webflow by calling PUT /v2/sites/{site_id}/custom_code with the snippet registered for the header location.
4. Publish the Webflow site by calling POST /v2/sites/{site_id}/publish to make the GTM container live.

This same flow can be templated and repeated across multiple Webflow sites. The GTM API also provides bulk_update and combine endpoints for propagating a standard tag configuration from a master container to new client containers.

Sync CMS changes with GTM updates

Webflow webhooks notify your middleware when CMS content changes, enabling automatic GTM updates tied to content publishing.

To implement CMS-driven GTM sync:

1. Register a Webflow webhook for the collection_item_published event by calling POST /v2/sites/{site_id}/webhooks with the trigger type and your middleware endpoint URL.
2. When the webhook fires, your middleware receives the payload containing the CMS item's slug, collectionId, and field data.
3. Use that data to update GTM variables or triggers via PUT /tagmanager/v2/.../workspaces/{workspaceId}/variables/{variableId}.
4. Create a container version with POST .../workspaces/{workspaceId}:create_version and publish it with POST .../versions/{versionId}:publish.

This pipeline keeps GTM trigger rules aligned with live CMS content. Publishing a new blog category or product page can automatically update the corresponding GTM page-path triggers without manual intervention.

What can you build with the Google Tag Manager Webflow integration?

Integrating Google Tag Manager with Webflow lets you manage all tracking and analytics scripts from one interface without editing Webflow code for each new tool.

• Multi-pixel campaign tracking: Deploy GA4, Google Ads conversion tags, Meta Pixel, LinkedIn Insight Tag, and TikTok Pixel from the GTM dashboard. Add or swap pixels for new campaigns without touching your Webflow site code.
• Form conversion attribution: Track Webflow form submissions as GA4 events and Google Ads conversions using custom dataLayer pushes. Because Webflow forms submit via AJAX without a page reload, a Custom HTML tag in GTM listens for submission success and fires the conversion event.
• GDPR-compliant consent enforcement: Use GTM with a consent management platform like Cookiebot or CookieYes to conditionally fire or suppress tags based on visitor consent. GTM handles Google Consent Mode v2, which became mandatory in March 2024 for sites targeting EEA, UK, or Swiss users.
• Agency-scale tag standardization: Build a master GTM container with standard tags, triggers, and variables, then replicate it across multiple Webflow client sites using the GTM API. GTM's tiered permissions (Read-Only, Edit, Approve, Publish) let clients review configurations without risk of misconfiguration.

If you need more control over automated tag deployment or CMS-driven tracking updates, the API integration path covers those cases with full flexibility.