Installing Google Tag Manager on Webflow | Blue Frog Docs

Installing Google Tag Manager on Webflow

Complete guide to installing and configuring Google Tag Manager (GTM) on your Webflow website for centralized tag management.

Installing Google Tag Manager on Webflow

Google Tag Manager (GTM) provides a centralized platform to manage all your marketing and analytics tags without constantly editing your Webflow code. This guide covers complete GTM installation and configuration for Webflow sites.

Why Use GTM with Webflow?

Benefits

  • Centralized tag management: Manage GA4, Meta Pixel, and other tags in one place
  • No-code changes: Add/edit/remove tags without republishing your Webflow site
  • Version control: Track changes and roll back if needed
  • Team collaboration: Multiple team members can manage tags with different permissions
  • Advanced tracking: Implement complex triggers and custom events easily
  • Faster deployment: Add new marketing tags in minutes, not days
  • Performance: Load tags conditionally to improve site speed

When to Use GTM

Use GTM if you:

  • Need to manage multiple marketing and analytics tags
  • Have a marketing team that needs to deploy tags independently
  • Require advanced event tracking and custom triggers
  • Want to implement complex ecommerce tracking
  • Need to A/B test different tracking configurations

Use direct installation if you:

  • Only need basic GA4 tracking
  • Have a simple site with minimal tracking requirements
  • Prefer maximum site performance (one less layer)

Prerequisites

  • Webflow account with access to Project Settings
  • Google Tag Manager account - Create one free
  • Published Webflow site (tags only work on published sites)
  • GTM Container ID (format: GTM-XXXXXXX)

Step 1: Create a GTM Container

If you don't already have a GTM container:

  1. Go to Google Tag Manager
  2. Click Create Account
  3. Enter your Account Name (your company name)
  4. Enter Container Name (your website domain)
  5. Select Target Platform: Web
  6. Click Create
  7. Accept the Terms of Service

Your GTM Container ID will look like: GTM-XXXXXXX

Step 2: Get GTM Installation Code

After creating your container:

  1. GTM will automatically show you the installation code
  2. If you need to retrieve it later: Admin > Install Google Tag Manager
  3. You'll see two code snippets:
    • Head code - Goes in <head>
    • Body code - Goes immediately after opening <body> tag

The code looks like this:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Step 3: Install GTM in Webflow (Site-Wide)

Install GTM across your entire site via Project Settings.

Add Head Code

  1. Open your Webflow project
  2. Click Settings (gear icon) in the left sidebar
  3. Navigate to Custom Code tab
  4. Paste the first GTM code snippet (the <script> tag) into Head Code
  5. Click Save Changes

Add Body Code

  1. In the same Custom Code section
  2. Paste the second GTM code snippet (the <noscript> tag) into Footer Code
  3. Click Save Changes

Note: Webflow's "Footer Code" injects code at the end of the <body>, which is acceptable for the noscript fallback.

Method 2: Page-Level Installation

To install GTM on specific pages only:

  1. Go to Pages panel in Webflow Designer
  2. Click the page you want to track
  3. Click the gear icon next to the page name
  4. Go to Custom Code tab
  5. Add GTM head code to Head Code section
  6. Add GTM body code to Footer Code section
  7. Repeat for each page

Use case: A/B testing GTM on specific pages before site-wide rollout.

Step 4: Publish Your Site

  1. Click Publish in the top-right corner
  2. Select your publishing destination
  3. Confirm publication

Critical: GTM does NOT work in Webflow Designer preview or Editor mode. You must publish your site.

Step 5: Verify GTM Installation

Method 1: GTM Preview Mode

  1. In Google Tag Manager, click Preview (top right)
  2. Enter your published Webflow site URL
  3. Click Connect
  4. A new window opens with Tag Assistant
  5. Verify GTM is connected and firing

Method 2: Google Tag Assistant (Chrome Extension)

  1. Install Google Tag Assistant
  2. Visit your published Webflow site
  3. Click the Tag Assistant icon
  4. Verify GTM container is detected and working

Method 3: Browser Developer Tools

  1. Open your published site
  2. Press F12 to open Developer Tools
  3. Go to Console tab
  4. Type: dataLayer
  5. You should see an array with GTM events

Method 4: View Source

  1. Right-click on your published site
  2. Select View Page Source
  3. Search for your GTM container ID (Ctrl+F: GTM-XXXXXXX)
  4. Verify both head and body code are present

Step 6: Configure GTM Container Settings

Set Up Variables

  1. In GTM, go to Variables
  2. Under Built-In Variables, click Configure
  3. Enable useful variables:
    • Click URL
    • Page URL
    • Page Path
    • Referrer
    • Click Element
    • Click Classes
    • Click ID
    • Form Element
    • Form Classes
    • Form ID
    • Video (for video tracking)

Create Custom Variables

Create Webflow-specific variables:

Variable: Page Type

  1. Go to Variables > New
  2. Name: "Webflow - Page Type"
  3. Type: Custom JavaScript
  4. Code:
function() {
  if (document.querySelector('.w-commerce-commerceproducttemplate')) return 'product';
  if (document.querySelector('.w-commerce-commercecartcontainer')) return 'cart';
  if (document.querySelector('.w-commerce-commercecheckoutform')) return 'checkout';
  if (document.querySelector('.w-commerce-commerceorderconfirmationcontainer')) return 'order_confirmation';
  if (document.querySelector('.w-dyn-item')) return 'cms_item';
  return 'standard';
}

Variable: Form Name

  1. Go to Variables > New
  2. Name: "Webflow - Form Name"
  3. Type: Custom JavaScript
  4. Code:
function() {
  var form = {{Click Element}}.closest('form') || {{Form Element}};
  return form ? form.getAttribute('data-name') : undefined;
}

Installing Tags via GTM

Now that GTM is installed, you can add tags without touching Webflow.

Install Google Analytics 4 via GTM

  1. In GTM, go to Tags > New
  2. Click Tag Configuration
  3. Choose Google Analytics: GA4 Configuration
  4. Enter your Measurement ID (G-XXXXXXXXXX)
  5. Click Triggering
  6. Select All Pages
  7. Name the tag: "GA4 - Configuration"
  8. Click Save

Install Meta Pixel via GTM

  1. Go to Tags > New
  2. Click Tag Configuration
  3. Choose Custom HTML
  4. Paste your Meta Pixel base code
  5. Click Triggering
  6. Select All Pages
  7. Name: "Meta Pixel - Base Code"
  8. Click Save

See Meta Pixel Setup Guide for complete implementation.

Install Other Tags

GTM supports templates for many platforms:

  • LinkedIn Insight Tag
  • Twitter Pixel
  • Pinterest Tag
  • TikTok Pixel
  • Hotjar
  • Crazy Egg
  • And many more via the Community Template Gallery

Publishing GTM Changes

After adding tags in GTM:

  1. Click Submit (top right in GTM)
  2. Add a Version Name (e.g., "Added GA4 and Meta Pixel")
  3. Add Version Description (optional but recommended)
  4. Click Publish

Important: You do NOT need to republish your Webflow site. GTM changes go live immediately after publishing in GTM.

GTM Workspace and Environments

Workspaces

GTM supports multiple workspaces for team collaboration:

  1. Go to Admin > Workspaces
  2. Click Create
  3. Name your workspace (e.g., "Holiday Campaign")
  4. Multiple people can work on different workspaces simultaneously
  5. Merge changes when ready

Environments

Test tags before pushing to production:

  1. Go to Admin > Environments
  2. GTM includes Live (production) by default
  3. You can create additional environments like Staging
  4. Each environment gets a unique code snippet
  5. Install staging snippet on your Webflow staging site

Webflow staging: Install the staging GTM snippet on your webflow.io subdomain for testing.

Webflow-Specific GTM Considerations

Webflow Designer vs. Published Site

  • Designer preview: GTM does NOT fire
  • Editor mode: GTM does NOT fire
  • Staging subdomain (yoursite.webflow.io): GTM DOES fire
  • Custom domain: GTM DOES fire

Always test on published sites, not in the Designer.

Webflow Forms and GTM

GTM can track Webflow forms automatically:

  1. Enable Form variables (see Step 6 above)
  2. Create a Form Submission trigger
  3. Use \{\{Form ID\}\} or \{\{Form Classes\}\} to identify specific forms
  4. Use the Webflow - Form Name custom variable

See GTM Data Layer Guide for detailed implementation.

Webflow Ecommerce and GTM

For ecommerce tracking via GTM:

  1. Create a data layer with cart and product data
  2. Push ecommerce events to GTM
  3. Configure GA4 or other ecommerce tags

See GTM Data Layer Guide for complete ecommerce implementation.

Webflow CMS and GTM

Pass CMS field data to GTM:

  1. Add an Embed element to your CMS Collection Page template
  2. Push CMS data to the data layer
  3. Access via GTM variables

Example:

<script>
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    'event': 'cms_page_view',
    'cms_title': 'INSERTED_CMS_TITLE', // Use Webflow's insert field
    'cms_category': 'INSERTED_CMS_CATEGORY',
    'cms_author': 'INSERTED_CMS_AUTHOR'
  });
</script>

Click the purple Insert field button in Webflow's Embed editor to insert actual CMS values.

Webflow CDN and Caching

Webflow uses a global CDN that caches your site:

  • After adding GTM: Publish your site and wait a few minutes for CDN propagation
  • Hard refresh: Use Ctrl+Shift+R to bypass browser cache
  • Test on multiple devices: Verify GTM works across desktop and mobile

GTM Best Practices for Webflow

1. Naming Conventions

Use consistent naming for tags, triggers, and variables:

  • Tags: [Platform] - [Purpose] (e.g., "GA4 - Page View", "Meta Pixel - Add to Cart")
  • Triggers: [Action] - [Location] (e.g., "Form Submit - Contact", "Click - CTA Button")
  • Variables: [Source] - [Name] (e.g., "Webflow - Form Name", "CMS - Product ID")

2. Use Folders

Organize tags into folders:

3. Version Control

  • Always add meaningful version names and descriptions
  • Before major changes, create a workspace
  • Test in Preview mode before publishing
  • Keep a changelog of what changed in each version

4. Trigger Testing

Always test triggers in Preview mode:

  1. Click Preview in GTM
  2. Visit your Webflow site
  3. Perform the action (form submit, button click, etc.)
  4. Verify the trigger fires in Tag Assistant
  5. Check that the correct tags fire

5. Performance Optimization

  • Minimize custom HTML tags: Use native tag templates when possible
  • Async tags: Most GTM tags load asynchronously by default
  • Conditional loading: Only load tags on relevant pages
  • Limit DOM scraping: Avoid complex selectors in triggers

6. Data Layer Strategy

  • Push critical data to data layer in Webflow
  • Don't rely solely on DOM scraping
  • See GTM Data Layer Guide

Common Issues and Troubleshooting

GTM Not Loading

Problem: GTM container doesn't appear on the page.

Solutions:

  1. Verify site is published: GTM only works on published sites
  2. Check container ID: Ensure GTM-XXXXXXX is correct
  3. Clear cache: Hard refresh with Ctrl+Shift+R
  4. Check ad blockers: Disable ad blockers and privacy extensions
  5. View source: Verify GTM code is in the page HTML

Tags Not Firing

Problem: Tags don't fire even though GTM is loaded.

Solutions:

  1. Use Preview mode: Check what's happening in Tag Assistant
  2. Verify trigger: Ensure trigger conditions match the page/event
  3. Check variables: Verify variables contain expected values
  4. Publish changes: Ensure you clicked "Publish" in GTM
  5. Wait for propagation: GTM changes can take a few minutes

Duplicate Tags

Problem: Tags fire multiple times or duplicate data appears.

Causes:

  • GTM tag AND direct installation (e.g., GA4 in both GTM and Webflow Custom Code)
  • Multiple GTM containers on the same page
  • Trigger firing multiple times

Solutions:

  1. Remove direct installations from Webflow Custom Code
  2. Check for multiple GTM container IDs
  3. Review trigger conditions
  4. Use "Once per page" or "Once per event" trigger options

Form Triggers Not Working

Problem: Form submission triggers don't fire.

Solutions:

  1. Enable Form variables: Variables > Configure > Form variables
  2. Use correct trigger type: Use "Form Submission" not "All Forms"
  3. Check Webflow form class: Verify .w-form exists
  4. Use MutationObserver: Webflow forms may need custom detection

See GTM Data Layer - Webflow Forms for advanced form tracking.

Webflow Ecommerce Data Not Available

Problem: Cannot access cart or product data in GTM.

Solutions:

  1. Check Ecommerce plan: Ensure you have Webflow Ecommerce plan
  2. Verify published site: Ecommerce data only on published sites
  3. Use data layer: Push window.Webflow.commerce data to GTM data layer
  4. Wait for Webflow: Wrap code in window.Webflow.push()

Security and Privacy

Implement cookie consent before loading GTM tags:

<!-- Add BEFORE GTM installation code -->
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}

  // Default consent to denied
  gtag('consent', 'default', {
    'ad_storage': 'denied',
    'analytics_storage': 'denied',
    'functionality_storage': 'denied',
    'personalization_storage': 'denied',
    'security_storage': 'granted',
    'wait_for_update': 500
  });
</script>

<!-- GTM Installation Code -->
<!-- ... -->

<!-- After user grants consent -->
<script>
  gtag('consent', 'update', {
    'ad_storage': 'granted',
    'analytics_storage': 'granted',
    'functionality_storage': 'granted',
    'personalization_storage': 'granted'
  });
</script>

Method 2: Conditional GTM Loading

Only load GTM after consent:

<script>
  // Check consent (example using localStorage)
  if (localStorage.getItem('cookieConsent') === 'granted') {
    // Load GTM
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXXXXX');
  }
</script>

GTM Permissions

Control who can access and modify your GTM container:

  1. Go to Admin > User Management
  2. Click Add User
  3. Enter email address
  4. Choose permission level:
    • Publish: Full access (use sparingly)
    • Approve: Can approve and publish
    • Edit: Can create and edit, but not publish
    • Read: View-only access

Best practice: Give most users "Edit" access, reserve "Publish" for admins.

Data Layer Security

Never put sensitive data in the data layer:

  • ❌ Passwords
  • ❌ Credit card numbers
  • ❌ Social Security numbers
  • ❌ Full email addresses (hash them)
  • ❌ Full phone numbers

Advanced GTM Setup

Custom JavaScript Variables

Create complex variables with JavaScript:

function() {
  // Example: Get product ID from URL
  var path = window.location.pathname;
  var segments = path.split('/');
  return segments[segments.length - 1];
}

Regex Tables

Map URLs to page categories:

  1. Create a Variable > Regex Table
  2. Input: \{\{Page Path\}\}
  3. Add patterns:
    • /products/.* → "Product"
    • /blog/.* → "Blog"
    • /checkout → "Checkout"

Custom Event Triggers

Create custom triggers for Webflow events:

  1. Trigger > Custom Event
  2. Event name: webflow_form_success
  3. Fire on: All Custom Events
  4. Condition: Event equals webflow_form_success

Then push the event from Webflow:

dataLayer.push({
  'event': 'webflow_form_success',
  'formName': 'Contact Form'
});

Migrating from Direct Tags to GTM

If you have tags installed directly in Webflow:

  1. Audit existing tags: List all tags in Webflow Custom Code
  2. Install GTM: Add GTM to Webflow (Steps 1-5 above)
  3. Recreate tags in GTM: Add each tag to GTM
  4. Test in parallel: Verify GTM tags work alongside direct tags
  5. Remove direct tags: Delete tags from Webflow Custom Code
  6. Publish changes: Publish both Webflow and GTM

Important: Don't run the same tag in both GTM and Webflow Custom Code simultaneously (causes duplicate data).

Next Steps

Additional Resources

↑ Back to top
// SYS.FOOTER