<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXX');
</script>

{
  bulkCallbackV2: function(treatments) {
    if (!window.gtag || !treatments || !treatments.length) return;

    var map = {};
    treatments.forEach(function(t) {
      if (t.coframe_experiment_slug) {
        map[t.coframe_experiment_slug] = t.coframe_variant_slug;
      }
    });

    window.gtag("event", "coframe_treatments_applied_compact", {
      cf_treatments: JSON.stringify(map),
    });
  }
}

# Google Analytics

Send Coframe treatments to Google Analytics 4

Coframe fires a `coframe_treatments_applied_compact` event via `gtag` for every batch of treatments a visitor receives. The event carries a compact JSON map of experiment slugs to variant slugs, which you can analyse in GA4 alongside the rest of your event data.

## Step 1: Install the GA4 base tag on your website

Follow the [official Google Analytics (GA4) installation guide](https://support.google.com/analytics/answer/9304153) and ensure `gtag` is initialized before Coframe runs.


HTML



```
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXX');
</script>
```




Replace `G-XXXXXXX` with your actual GA4 Measurement ID.

## Step 2: Configure the analytics callback

Add the following `bulkCallbackV2` snippet to your Coframe analytics callback. It builds a compact map of `experiment_slug → variant_slug` and sends it to GA4 as a single event.


JS



```
{
  bulkCallbackV2: function(treatments) {
    if (!window.gtag || !treatments || !treatments.length) return;

    var map = {};
    treatments.forEach(function(t) {
      if (t.coframe_experiment_slug) {
        map[t.coframe_experiment_slug] = t.coframe_variant_slug;
      }
    });

    window.gtag("event", "coframe_treatments_applied_compact", {
      cf_treatments: JSON.stringify(map),
    });
  }
}
```




Place this snippet inside your Coframe analytics callback as described in [Tracking Settings](../docs/tracking-settings.html).

## Step 3: Register custom parameters in GA4

GA4 does not automatically expose all event parameters in reports by default. You need to register `cf_treatments` as a custom dimension so it is available in Explorations and standard reports.



- Go to Admin → Data display → Custom definitions → Create custom dimension.


- Create a custom dimension for each Coframe event parameter you want to surface (at minimum, `cf_treatments`).


- Note: Set Scope to Event.

## Step 4: Verification

- Install the [Google Analytics Debugger](https://chromewebstore.google.com/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna) Chrome extension and enable it.


- After enabling the extension, open your site and navigate to a page where a treatment can be applied.


- Check the browser console to confirm debug logs and the `coframe_treatments_applied_compact` event flow.


- In GA4, open Admin → Data display → DebugView to verify that events and parameters are being received correctly.



Note: Events appear in Realtime reports within seconds. Standard aggregated reports may take several hours to process. Newly created custom dimensions may take up to 24 hours to become available in Explorations.

## What gets sent

The `cf_treatments` property contains a JSON-stringified map where each key is a `coframe_experiment_slug` and each value is the corresponding `coframe_variant_slug` for that visitor. The experiment and variant identifiers are described in [Experiment Assignment & IDs](../docs/experiment-assignment.html).