I've noticed on a lot of blogs that developers write their Experiment_ID into their google_optimize.get( code. I've also noticed that a lot of examples check G/O if there is a variant... and then conditionally render the variant locally.
Example from Medium blog:
// omitted the rest of the component...
async componentDidMount() {
if (window.dataLayer) {
await window.dataLayer.push({ event: "optimize.activate" });
}
this.intervalId = setInterval(() => {
if (window.google_optimize !== undefined) {
const variant = window.google_optimize.get(YOUR_EXPERIMENT_ID_GOES_HERE); // <-- why are we hard coding this??
this.setState({ variant });
clearInterval(this.intervalId);
}
}, 100);
}
// render goes here...
First - hardcoding can't be the way Production software is being A/B tested, surely. It's not ideal from non Tech perspective. Marketing/Product want to be free to create Google Optimize 'experiences' or experiments, run them instantly, with a click of 'Start Experiment'.
The idea we're then asking Front End Developers to then go into the code and update the EXPERIMENT_ID for every experiment feels very manual/archaic.
Second - why are so many examples (including the Google Documentation) providing conditional rendering? If I am using Google Optimize to edit strings, change and test the color of buttons, why should I need to write logic like:
if(variant === 0) return <Button color="white" />
if(variant === 1) return <Button color="green" />
So:
Isn't the whole point of the anti flicker and the GTM/G/O scripts, that G/O is loaded in and changes the content on the fly, for you?
re the EXP ID, is Google Tag Manager and the Google Optimize Script not able to pull in all live experiments and provide me the reference, so that i can update the EXP_ID value programatically?
Perhaps I'm setting G/O up wrong. If anyone can advise, I am currently serving a template.js for my SSR HTML. And I have what's below, and then in GTM I inject my G/O tags.
<head>
<!-- anti-flicker snippet -->
<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{MY_ID:true});</script>
<!-- Give GTM my Analytics ID -->
<script async src="https://www.googletagmanager.com/gtag/js?id=${this.googleAnalyticsId}"></script>
<!-- When Page Loads call gtag and give it the date and GA ID -->
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${this.googleAnalyticsId}');
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','${this.googleTagManagerId}');</script>
<!-- End Google Tag Manager -->`;
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=${this.googleTagManagerId}"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->`;
</body>
If anyone can advise, I'd be eternally grateful.