Google Tag Manager

How to integrate Google Tag Manager with Webflow

Integrate Google Tag Manager (GTM) with Webflow by using the Google site tools for Webflow app for a guided, app-based setup, or using custom code embedding for manual control.

The app streamlines authentication and script placement, while custom code embedding lets you paste GTM snippets directly into your site's settings or pages for full flexibility. Both methods allow you to manage all your marketing and analytics tags centrally through the GTM dashboard, without future code changes.

Use the Google site tools for Webflow app

Integrate GTM, Google Analytics (GA), and Google Search Console (GSC) with your Webflow site using the Google site tools for Webflow app. This method provides a visual, code-free setup for unified Google services, automatic script placement, and team permission management. Ideal for standard site-wide implementations; for advanced or page-specific needs, consider custom embed methods.

Implementation:

1. Install the Google site tools app. Access the Webflow App marketplace and install the official Google site tools app for your project.

2. Log in with your Google account. Log in to your Google account within the app to enable access to GTM, GA, and GSC.

3. Select and connect the right GTM container. Choose your desired GTM container from the app interface. The app will automatically inject the GTM script into your site’s code.

4. Configure permissions and verify integration. Set team permissions as needed and confirm that GTM, Analytics, and Search Console are active by checking the app dashboard and Google platforms.

The marketplace app works best for standard implementations where you want GTM active site-wide. For page-specific installations or custom configurations, consider the embed method below.

Use direct embeds and custom code

Manually embedding GTM in Webflow gives you full control over tag placement, advanced configurations, and conditional loading. This method is useful for advanced tracking, custom data layers, and excluding GTM from specific environments. After embedding, always test your setup to ensure tags fire correctly.

Implementation:

1. Create and configure your GTM container. Sign in to GTM, create a new account and container (select 'Web' as the target platform), and note your unique container ID (e.g., GTM-XXXXXX).

2. Copy both GTM snippets. From the GTM dashboard, access the installation instructions and copy one code snippet for the and one code snippet for immediately after the opening tag. Replace 'GTM-XXXXXX' with your actual container ID if needed.

3. Paste snippets into your Webflow settings. In Webflow, go to your project, open Site Settings > Custom Code. Paste the first snippet into the 'Head Code' section and the second snippet into the 'Footer Code' section (which injects just before ). Save changes and publish your site.

4. Test GTM installation and configure tags. Use GTM's Preview Mode and tools like GA4 DebugView to verify that GTM is firing correctly on your published site. Then, set up tags and triggers in GTM as needed for your analytics and marketing requirements.

This approach enables:

• Environment-specific configurations to exclude staging domains
• Conditional tag loading based on user consent
• Custom data layer variables for enhanced tracking
• Page-level script control for specific sections

Build with Webflow and Google Tag Manager APIs

While GTM typically operates through in-browser scripts, advanced users can leverage both the Webflow and GTM APIs for automated workflows and scalable management. This is especially valuable for agencies or businesses managing multiple sites or requiring programmatic tag deployment. The Tag Manager API v2 enables:

• Scale tag management across sites for consistent deployment and updates
• Automate form tracking workflows to streamline analytics and conversion tracking

This section covers API methods to help you efficiently scale tag management and automate form tracking across your Webflow projects.

Scale tag management across sites

Standardize and automate tag deployment for agencies and enterprises by leveraging the Google Tag Manager (GTM) API. This method covers creating reusable container templates, cloning and configuring containers, synchronizing updates, and auditing implementations to ensure consistency and compliance across all managed sites.

Implementation:

1. Create and configure container templates. Use POST /accounts/{accountId}/containers to create container templates with predefined tags, triggers, and variables. Leverage workspaces to manage draft changes and add descriptive notes for documentation and future reference. Ensure templates include all required built-in variables and custom configurations for your standard tracking needs.

2. Clone and deploy containers across sites. Use the containers.create endpoint to clone container templates to new or existing client sites. Assign appropriate permissions and configure environments as needed for each deployment.

3. Programmatically sync and update tags. Automate tag, trigger, and variable updates across all containers using the GTM API. Use workspaces to batch changes and publish container versions to ensure all sites are running the latest configurations. Integrate with deployment workflows (e.g., when launching new Webflow sites) to keep tags synchronized.

4. Audit and monitor implementations Use GET /accounts/{accountId}/containers and workspace APIs to audit container setups, verify consistency, and monitor for unauthorized changes. Leverage notes and version history for compliance and troubleshooting. Regularly review built-in variable and permission configurations.

Automate form tracking workflows

Seamlessly connect Webflow form submissions to GTM for advanced tracking, analytics, and conversion automation. This method covers webhook setup, secure data handling, GTM integration, and automated conversion event deployment.

Implementation:

1. Configure Webflow webhooks for form submissions. In your Webflow settings, set up webhooks to trigger on form submissions. Ensure each form uses a clear naming convention and that notifications are configured for real-time alerts to relevant team members. Test webhook delivery to confirm successful payload transmission.

2. Securely process and validate form data. Route webhook payloads to a serverless function (e.g., AWS Lambda, Google Cloud Functions). Validate and sanitize incoming data, implement spam protection (such as reCAPTCHA), and structure the payload for GTM compatibility. Log errors and handle exceptions for reliability.

3. Push data to GTM data layer and update custom variables. Within your serverless function, push validated form data to GTM’s data layer using the variables endpoint. Ensure mapping between form fields and GTM variables is explicit and tested for accuracy.

4. Automate conversion tracking deployment. Configure GTM to trigger conversion tags based on form type or submission event. Test the end-to-end workflow by submitting test forms, verifying GTM event firing, and confirming conversion data appears in your analytics platform (e.g., Google Analytics). Document the process for future maintenance.

This creates dynamic tracking that adapts to your site's evolving form structure without manual tag updates.

What you can build

Integrating GTM with Webflow transforms your site into a data-driven marketing powerhouse.

• E-commerce stores with advanced conversion tracking: Track product views, add-to-cart events, and purchase completions across multiple advertising platforms while maintaining a single source of truth for attribution
• Lead generation sites with multi-touch attribution: Monitor form submissions, content downloads, and engagement signals to understand which marketing channels drive qualified leads
• SaaS marketing sites with behavioral analytics: Implement scroll tracking, video engagement metrics, and feature interest indicators to optimize product messaging and user journeys
• Publishing platforms with content performance insights: Measure article engagement, social shares, and reader paths through your content to inform editorial strategy