Skip to main content

Using GrowthBook with Google Tag Manager (GTM)

Overview​

This guide shows you how to integrate GrowthBook with Google Tag Manager (GTM) to run A/B tests and manage feature flags without having to directly modify your app's code.

This setup is ideal for:

  • Marketing teams managing website experiments
  • CRO agencies handling multiple client websites
  • Teams without direct access to website code

Prerequisites​

Before starting, ensure you have:

1. Set Up GrowthBook SDK Connection​

  • In GrowthBook, navigate to SDK Configuration → SDK Connections
  • Click Add SDK Connection
  • Add a Name, choose HTML Script Tag, and click Save
  • Copy the data-client-key value from the script tag. You'll need this for the next step

GrowthBook SDK Connection

2. Create GTM Tag for GrowthBook​

  • Open your GTM workspace
  • Click Tags in the left sidebar
  • Click New to create a tag
  • Click Tag Configuration and use Custom HTML as the tag type
  • Paste the following script tag, replacing YOUR_CLIENT_KEY_HERE with the value from the previous step:
<script>
(function(s) {
  s=document.createElement('script'); s.async=true;
  s.dataset.clientKey="YOUR_CLIENT_KEY_HERE";
  s.src="https://cdn.jsdelivr.net/npm/@growthbook/growthbook/dist/bundles/auto.min.js";
  document.head.appendChild(s);
})();
</script>
  • Click Triggering and choose the pages where you want to run this tag. Use All Pages to load it everywhere
  • Click Save and call your tag "GrowthBook SDK" or similar

GTM Tag for GrowthBook

Be sure to click Submit and Publish to make your changes live. GrowthBook is now connected to your website via GTM 🤝

3. Use Feature Flags and A/B Experiments​

It's possible to use GrowthBook in your GTM setup. This allows you to control feature flags and experiments without needing to modify your website code.

tip

If you're planning to use the Visual Editor, URL redirects, or to run experiments in code, skip ahead to the next section ⏭️

  • Create another Custom HTML tag in your workspace
  • Set the firing trigger to the pages you want to run this on
  • Use the following code as a starting point:
<script>
  // Wait for the GrowthBook SDK to load before running
  window.growthbook_queue = window.growthbook_queue || [];
  window.growthbook_queue.push(function(gb) {
    console.log(gb);
    // Function that uses feature flags to make changes to the page
    function applyFeatureFlags() {
      if(gb.isOn("show-discount")) {
        var priceEl = document.getElementById("price");
        priceEl?.classList.add("show-discount");
      }
    }
    // Call your function initially plus whenever new data is received
    applyFeatureFlags();
    document.addEventListener("growthbookdata", applyFeatureFlags)
  });
</script>

In this example, we're using the show-discount feature flag to run an A/B experiment. When the experiment evaluates to true, we add a CSS class to the price element on the page.

As seen in the image below, the control element shows the price, while the variation shows the original price with a strikethough and the discounted price in red. We can run this entire experiment straight from GTM, without needing to touch the website code!

A control element with the image and name of a couch, showing just a price, and a variation element with the same image and name, showing the original price with a strikethrough and the discounted price in red

4. Tracking via DataLayer and GTM​

To track experiment views, we use the dataLayer to capture experiment data. Whenever an experiment is viewed, we send an event with data like this:

{
  "event": "experiment_viewed",
  "experiment_id": "...",
  "variation_id": "..."
}

In this tutorial, we'll send this data to Google Analytics 4 (GA4), which allows you to analyze experiments and their impact on your business metrics in GrowthBook. (It's also possible to forward this event to your analytics tool of choice.)

tip

You'll need to connect GrowthBook to BigQuery to analyze your experiment data. See our guide on configuring GrowthBook with BigQuery for more information.

Create DataLayer Variables​

To capture experiment data from the dataLayer, create 2 new variables in GTM:

  • Go to Variables in the left sidebar
  • Click New under User-Defined Variables
  • Create 2 variables:
    • Experiment ID
      • Click Variable Configuration
      • Select Data Layer Variable
      • Enter experiment_id as the Data Layer Variable Name
      • Name the variable something descriptive like "Experiment ID"
      • Click Save
    • Variation ID
      • Repeat the these steps but use variation_id as the Data Layer Variable Name and call it something like "Variation ID"

DataLayer Variables

Create Custom Event Trigger​

This custom trigger tells GTM when to fire the GA4 tag based on the experiment_viewed event.

  • Go to Triggers in the left sidebar
  • Click New and Trigger Configuration
  • Choose Custom Event as the trigger type
  • Name the trigger "Experiment Viewed Event" or similar
  • Enter experiment_viewed as the Event Name
  • Set the trigger to fire on All Custom Events
  • Click Save

Custom Event Trigger

Create GA4 Configuration Tag​

Let's connect GTM to GA4. (Skip this step if you've already configured GA4 in your GTM container.)

  • Create a new tag and select Google Analytics as the type
  • Choose Google Tag
  • Enter your GA4 Measurement ID
  • Add Initialization - All Pages for the trigger
  • Name the tag something like "GA4 Configuration" and save it

GTM GA4 Configuration Tag

Create GA4 Event Tag​

Last step! Create a tag that sends the experiment_viewed event data to GA4.

  • Create a new tag in GTM
  • Select Google Analytics: GA4 Event
  • Configuration:
    • Measurement ID: Use your GA4 ID (or reference the GA4 Configuration tag)
    • Event Name: experiment_viewed
    • Event Parameters:
      • Event Parameter: experiment_id
      • Value: {{Experiment ID}}
      • Event Parameter: variation_id
      • Value: {{Variation ID}}
  • Triggering: Select the Experiment Viewed Event trigger
  • Name the tag (e.g., "GA4 - Experiment Viewed Event")
  • Save the tag

GTM GA4 Event Tag

Testing Your Setup​

  1. In GTM:

    • Click Preview in the top right
    • Enter your website URL
    • Click Start

  2. In Preview Mode:

    • Look for the GrowthBook SDK tag firing
    • Verify the experiment_viewed event appears
    • Check that the event parameters contain the correct experiment and variation IDs

GTM Preview Mode

  1. In GA4 (may take 24-48 hours to appear):
    • Go to Real-Time reports
    • Look for the experiment_viewed event
    • Verify the parameters are being received correctly

Remember to save and publish your changes in GTM once you're ready to go live. You can now track experiment views in GA4 using GTM.

Conclusion​

You've successfully integrated GrowthBook with Google Tag Manager to run A/B tests and manage feature flags on your website. This setup allows you to control experiments without needing to modify your website code directly ✊

Next Steps​

Troubleshooting​

Events Not Firing​

  • Verify GrowthBook SDK tag is loading (check browser console)
  • Confirm trigger conditions match your event setup
  • Check DataLayer variable names are exact matches (experiment_id, variation_id)
  • Validate experiment is running in GrowthBook dashboard

Missing or Incorrect Data in GA4​

  • Ensure GA4 Measurement ID is correct
  • Verify event parameters are properly mapped
  • Check Real-Time reports for event validation

Feature Flag Changes Not Applying​

  • Check browser console for JavaScript errors related to your feature flags. (Get to the console by right-clicking on the page, choosing Inspect, and going to the Console tab.)
  • Verify feature flag names match GrowthBook dashboard
  • Confirm trigger timing and page targeting

Debug Tools​

  • Use GTM Preview mode to inspect tag firing sequence
  • Check browser console for GrowthBook SDK logs
  • Use GA4 DebugView for real-time event validation
  • Monitor DataLayer in browser console using dataLayer