# Google Analytics integration

You can send flag values and [experiment](https://docs.hypertune.com/concepts/experiments) exposures from Hypertune to Google Analytics to add comparisons and breakdowns to your Google Analytics reports. This lets you see the impact of feature releases on key metrics.

## 1. Send experiment exposures to Google Analytics

Add a new file called `trackHypertuneExposure.ts` that creates and exports a helper function to send experiment exposures to Google Analytics:

{% tabs %}
{% tab title="via Google tag (gtag.js)" %}

```typescript
declare const window: any;

export default function trackHypertuneExposure(
  dimensionName: string,
  value: any,
): void {
  window.gtag("event", "hypertune_exposure", {
    user_properties: { [dimensionName]: value },
  });
}
```

{% endtab %}

{% tab title="via Segment (Analytics.js)" %}

```typescript
declare const window: any;

export default function trackHypertuneExposure(
  dimensionName: string,
  value: any,
): void {
  window.analytics.track("hypertune_exposure", {
    user_properties: { [dimensionName]: value },
  });
}
```

Also make sure you've set up a Google Analytics destination in Segment with a mapping that forwards all events including their properties. Here's an example:

<figure><img src="https://2048905609-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWa3rQLiu4JZhBRkiyoKz%2Fuploads%2FGziBr1g1bMum86dMJhf8%2Fsegment.png?alt=media&#x26;token=b866b575-960b-406b-9f2f-4b5e5660ece1" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

Then call this function immediately after getting your feature flag:

```typescript
import trackHypertuneExposure from "../lib/trackHypertuneExposure";
import useHypertune from "../lib/useHypertune";

export default function Editor() {
  const rootNode = useHypertune();
  
  const showNewEditor = rootNode.showNewEditor({ fallback: false });
  trackHypertuneExposure("ht_new_editor_test", showNewEditor);
  
  return showNewEditor ? <NewEditor /> : <OldEditor />;
}
```

## 2. Create a custom dimension for your experiment

Open Google Analytics. Click **Admin** in the left sidebar, then **Custom definitions**, then **Create custom dimension**. Set:

* **Scope** to **User**
* **Dimension name** and **User property** to the dimension name you set in the call to `trackHypertuneExposure`, e.g. **ht\_new\_editor\_test**

Here's what this looks like:

<figure><img src="https://2048905609-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWa3rQLiu4JZhBRkiyoKz%2Fuploads%2FeXHEzDEO5xDgwXemoiRq%2Fcustom_dimension.png?alt=media&#x26;token=d9c639b4-b5d6-4836-8d3b-3e13af02972c" alt=""><figcaption></figcaption></figure>

## 3. View experiment results

Navigate to any report, then:

1. In the top bar click **Add comparison**
2. Set **Dimension** to the custom dimension for your experiment, e.g. **ht\_new\_editor\_test**
3. Set **Match Type** to **contains**
4. Set **Value** to **true**
5. Repeat steps 1 to 4 but with **Value** set to **false**

You can now compare the test and control arms of your experiment across all results in the report.

## That's it

To track exposures for a new experiment and view its results in Google Analytics, you need to:

1. Call `trackHypertuneExposure` in your code immediately after you access its flag
2. Create a custom dimension in Google Analytics with the same dimension name you passed to `trackHypertuneExposure`

Then you can add comparisons to compare the test and control arms of your experiment across all your reports.