Google Analytics integration

You can send A/B test exposures and feature flag values 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 A/B test exposures to Google Analytics

Add a new file called trackHypertuneExposure.ts that creates and exports a helper function to send A/B test exposures to Google Analytics:

via Google tag (gtag.js)

declare const window: any;

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

via Segment (Analytics.js)

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:

Then call this function immediately after getting your feature flag:

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 A/B test

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:

3. View A/B test results

Navigate to any report, then:

1. In the top bar click Add comparison

2. Set Dimension to the custom dimension for your A/B test, 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 A/B test across all results in the report.

That's it

To track exposures for a new A/B test and view its results in Google Analytics, you just 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 A/B test across all your reports.