> ## Documentation Index
> Fetch the complete documentation index at: https://docs2.growthbook.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Using GrowthBook with Google Tag Manager (GTM)

> This guide walks you through using GrowthBook with Google Tag Manager (GTM) to track your experiments and measure their impact on your business.

## 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:

* Access to your [Google Tag Manager account](https://tagmanager.google.com/)
* A [GrowthBook account](https://app.growthbook.io/)
* Basic familiarity with GTM's interface

## 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

<Frame>
  <img src="https://mintcdn.com/growthbook-ea15456d/4KUzUtpaNUGa50Xc/static/images/guides/gtm-sdk.webp?fit=max&auto=format&n=4KUzUtpaNUGa50Xc&q=85&s=15273e6e6577e26c6d7081cbf24bde40" alt="GrowthBook SDK Connection" width="2491" height="987" data-path="static/images/guides/gtm-sdk.webp" />
</Frame>

## 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:

```html theme={null}
<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

<Frame>
  <img src="https://mintcdn.com/growthbook-ea15456d/4KUzUtpaNUGa50Xc/static/images/guides/gtm-growthbook-sdk-custom-tag.webp?fit=max&auto=format&n=4KUzUtpaNUGa50Xc&q=85&s=d5731b8693556c63c9f10779e45f783e" alt="GTM Tag for GrowthBook" width="3024" height="1736" data-path="static/images/guides/gtm-growthbook-sdk-custom-tag.webp" />
</Frame>

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](/app/visual), [URL redirects](/app/url-redirects), or to [run experiments in code](/feature-flag-experiments), skip ahead to the next section ⏭️
</Tip>

Create a new boolean feature flag with an A/B test. For this tutorial, we'll use a feature flag called `show-discount` to run an A/B test to show and hide an item's discount. New to feature flags in GrowthBook? Learn more about [creating them and A/B tests](/features/basics).

Next, we'll use GTM to apply the feature flag to your website:

* 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:

```html theme={null}
<script>
  // Wait for the GrowthBook SDK to load before running
  window.growthbook_queue = window.growthbook_queue || [];
  window.growthbook_queue.push(function(gb) {
    // Function that uses feature flags to make changes to the page
    function applyFeatureFlags() {
      if(gb.isOn("show-discount")) {
        var priceEl = document.getElementById("price");
        if (!priceEl) return;
        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!

<Frame>
  <img src="https://mintcdn.com/growthbook-ea15456d/4KUzUtpaNUGa50Xc/static/images/guides/gtm-ab-test.webp?fit=max&auto=format&n=4KUzUtpaNUGa50Xc&q=85&s=0e4894372c1851765b8fa4f03fcf41ff" alt="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" width="1920" height="917" data-path="static/images/guides/gtm-ab-test.webp" />
</Frame>

## 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:

```json theme={null}
{
  "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](/guide/bigquery) for more information.
</Tip>

### 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"

<Frame>
  <img src="https://mintcdn.com/growthbook-ea15456d/4KUzUtpaNUGa50Xc/static/images/guides/gtm-data-layer-variables.webp?fit=max&auto=format&n=4KUzUtpaNUGa50Xc&q=85&s=093b558e4ba629bc4072498fb3a87591" alt="DataLayer Variables" width="1076" height="733" data-path="static/images/guides/gtm-data-layer-variables.webp" />
</Frame>

### 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**

<Frame>
  <img src="https://mintcdn.com/growthbook-ea15456d/4KUzUtpaNUGa50Xc/static/images/guides/gtm-custom-trigger.webp?fit=max&auto=format&n=4KUzUtpaNUGa50Xc&q=85&s=3e19c3664793171fb736984ce9544bcb" alt="Custom Event Trigger" width="1459" height="564" data-path="static/images/guides/gtm-custom-trigger.webp" />
</Frame>

### 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](https://support.google.com/analytics/answer/12270356?hl=en)
* Add **Initialization - All Pages** for the trigger
* Name the tag something like "GA4 Configuration" and save it

<Frame>
  <img src="https://mintcdn.com/growthbook-ea15456d/4KUzUtpaNUGa50Xc/static/images/guides/gtm-ga4-config.webp?fit=max&auto=format&n=4KUzUtpaNUGa50Xc&q=85&s=52bfbae55957553315ec484be58524a0" alt="GTM GA4 Configuration Tag" width="1459" height="564" data-path="static/images/guides/gtm-ga4-config.webp" />
</Frame>

### 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

<Frame>
  <img src="https://mintcdn.com/growthbook-ea15456d/4KUzUtpaNUGa50Xc/static/images/guides/gtm-ga4-event.webp?fit=max&auto=format&n=4KUzUtpaNUGa50Xc&q=85&s=5321c12d88898c40c71de02a6b04b142" alt="GTM GA4 Event Tag" width="1470" height="748" data-path="static/images/guides/gtm-ga4-event.webp" />
</Frame>

### 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

<Frame>
  <img src="https://mintcdn.com/growthbook-ea15456d/4KUzUtpaNUGa50Xc/static/images/guides/gtm-preview.webp?fit=max&auto=format&n=4KUzUtpaNUGa50Xc&q=85&s=6a6298fb587330c6ef1973014f130d3b" alt="GTM Preview Mode" width="2117" height="808" data-path="static/images/guides/gtm-preview.webp" />
</Frame>

3. 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

* Check out our guide for connecting [GrowthBook to GA4 and BigQuery](/guide/GA4-google-analytics)
* For other analytics tools, see our guide on [connecting to your data warehouse](/warehouses)

### Troubleshooting

Please see our [Google Tag Manager (GTM) Troubleshooting Guide](/kb/google-analytics/google-tag-manager-gtm-troubleshooting) and our [GA4 Troubleshooting Guide](/kb/google-analytics/google-analytics-ga4-troubleshooting) (if relevant) for help debugging GTM and GA4 integrations with GrowthBook.
