Menu
I am trying to get Google Optimize experiment data in JavaScript, by following these instructions. But I get no callback and I can't see anything happening in the debugger either.
The linked instructions use the gtag way of configuring GA, so I have set up gtag according to https://developers.google.com/gtagjs/devguide/snippet, and configured Optimize according to https://support.google.com/optimize/answer/7513085?hl=en with Method 1: Install Optimize with the global site tag (gtag.js).
I want to show the exact code I am using, but since I am doing it in React with Next.js Server Side Rendering, the original code has some extra stuff compared to plain HTML+JS. The source looks like this:
require("dotenv").config()
import React from "react"
import Document, { Head, Main, NextScript } from "next/document"
export default class extends Document {
render() {
return (
<html>
<Head>
<script async src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GA_TRACKING_ID}`}/>
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){ dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', '${process.env.GA_TRACKING_ID}', { optimize_id: '${process.env.OPTIMIZE_ID}'});
console.log('GA setup done: ${process.env.GA_TRACKING_ID} + ${process.env.OPTIMIZE_ID}');
gtag('event', 'optimize.callback', {
name: '${process.env.EXPERIMENT_ID}',
callback: o => console.log(o)
});
`
}}
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}
This code produces a result page that starts Analytics and tracks a pageView just like it should, and when I do "RUN DIAGNOSTICS" in the Google Optimize console it opens the page, checks the JavaScript and reports:
Optimize is correctly installed
No major issues were detected while verifying the Optimize installation on this page.
I have also installed the Google Chrome Tag Assistant plug-in, and it reports that the Google Optimize tag is correctly installed.
I can see the following calls in the network log:
https://www.googletagmanager.com/gtag/js?id=UA-xxxxxx
https://www.google-analytics.com/analytics.js
https://www.google-analytics.com/gtm/js?id=GTM-xxxxxx&t=gtag_UA_xxxx&cid=nnn.nnn
I have also verified that the google_optimize global variable is created, and it has a .get() method. If I look (in the debugger network panel) at the http response of the https://www.google-analytics.com/gtm/js?... request I can actually see the Google Optimize experiments data with the correct Experiment embedded in the code.
So everything looks good, except for the fact that the optimize.callback event seems to be a complete no-op. It does not do anything at all. And I don't know how else to access the experiments data that I see in the http response in the debugger.
432
You can verify your Optimize installation at any time by clicking Run Diagnostics in the experiment information panel. A diagnostic message appears in the header of the experiment details page or experiment information panel (pictured below) when an issue is detected.
Google Optimize is session-based, in the future this might change when we move to GA4. For now, that's not the case. In order to get this information, there are two paths you can follow. The first path is to create a custom report, the second path is to create segments based on your experiment ID.
Conclusion. Google Optimize is not a perfect tool. Yes, it still has some missing features, but it's a reliable A/B testing tool for dynamic and straightforward experiments.
So I finally figured out what caused my struggles: I was running from a local NodeJS server, on the usual http://localhost:3000 url. Turns out Google Optimize will never trigger an experiment on http://localhost/... urls. The code wants a hostname part of the url that can be parsed according to a host.domain scheme.
In other words, there must be a dot in the hostname for Optimize to trigger an experiment.
For local testing, this can be fixed by creating a hostname alias such as localhost.domain for 127.0.0.1, and accessing the web page using this alias.
81
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
