<script>
  window.CFQ = window.CFQ || [];
  window.dataLayer = window.dataLayer || [];

  window.CFQ.push({
    subscribe: 'treatmentApplied',
    bulkCallbackV2: function (treatments) {
      if (!treatments || !treatments.length) return;

      for (var i = 0; i < treatments.length; i++) {
        var t = treatments[i];
        window.dataLayer.push({
          event: 'variant_rendered',
          cf_user_token: t.coframe_user_token,
          cf_variant_id: t.coframe_variant_id,
          cf_variant_slug: t.coframe_variant_slug,
          cf_experiment_id: t.coframe_experiment_id,
          cf_experiment_slug: t.coframe_experiment_slug,
          cf_impression_id: t.coframe_impression_id,
          cf_is_global_holdout: t.coframe_in_global_holdout,
          cf_is_baseline: t.coframe_in_exp_baseline,
        });
      }
    }
  });

  console.log('[Coframe][GTM] Coframe callback tag registered');
</script>

# Google Tag Manager

Send Coframe treatments through Google Tag Manager

Coframe pushes a `variant_rendered` event into `window.dataLayer` for every treatment a visitor receives. GTM can then route that event to Google Analytics or any other destination configured in your container.

## Step 1: Install GTM in your project

Follow the [official Google Tag Manager documentation](https://support.google.com/tagmanager/answer/6103696) to import and install a Web Container on your site. GTM must be loaded and running before Coframe fires treatments.

## Step 2: Create a Custom HTML Tag in GTM

Create the tag

- Enter Tags


- Click New


- Create a tag of type Custom HTML


- Copy the code below into the HTML editing area and save it.



Note: GTM’s Custom HTML Tag only supports ES5 syntax. Avoid arrow functions, `const` / `let`, destructuring, and other ES6+ features.


HTML



```
<script>
  window.CFQ = window.CFQ || [];
  window.dataLayer = window.dataLayer || [];

  window.CFQ.push({
    subscribe: 'treatmentApplied',
    bulkCallbackV2: function (treatments) {
      if (!treatments || !treatments.length) return;

      for (var i = 0; i < treatments.length; i++) {
        var t = treatments[i];
        window.dataLayer.push({
          event: 'variant_rendered',
          cf_user_token: t.coframe_user_token,
          cf_variant_id: t.coframe_variant_id,
          cf_variant_slug: t.coframe_variant_slug,
          cf_experiment_id: t.coframe_experiment_id,
          cf_experiment_slug: t.coframe_experiment_slug,
          cf_impression_id: t.coframe_impression_id,
          cf_is_global_holdout: t.coframe_in_global_holdout,
          cf_is_baseline: t.coframe_in_exp_baseline,
        });
      }
    }
  });

  console.log('[Coframe][GTM] Coframe callback tag registered');
</script>
```




Configure the trigger
Choose a trigger to make the tag fire. Set the trigger type to All pages - Page View so the tag registers the Coframe callback before any treatments are applied.

## Step 3: Add a new Event Trigger

Create a second trigger to capture the `variant_rendered` event that Coframe pushes into `dataLayer`:



- Enter Triggers


- Click New to add a new trigger


- Create a trigger of type Custom Event


- Set the event name to match the one used in the code snippet — for example, variant_rendered



Attach this trigger to any tag in your container that should fire when a Coframe treatment is recorded (for example, a GA4 event tag).

## Step 4: Verification

- Click Preview in the top-right corner of GTM to start the Tag Assistant.


- Follow the on-screen instructions to open your site with the `gtm_debug` query parameter.


- Open the browser console and inspect `window.dataLayer` to confirm the `variant_rendered` event is present.


- In the Tag Assistant summary panel, verify that both Container Loaded and `variant_rendered` events appear.

- Under Container Loaded, confirm the Coframe Custom HTML tag fired.


- Under `variant_rendered`, inspect the Data Layer panel to verify that the event properties (`cf_experiment_slug`, `cf_variant_slug`, and the other `cf_*` fields) are present.









After completing these steps, `variant_rendered` events can be captured in GTM and forwarded to Google Analytics or other analytics platforms as needed.

## Where this fits

Register the Custom HTML tag as described in [Tracking Settings](../docs/tracking-settings.html). The `cf_*` fields included in each `dataLayer` push correspond to the experiment and variant identifiers described in [Experiment Assignment & IDs](../docs/experiment-assignment.html).