When adding Google Optimize into your webpage, you would normally add this script tag into your header like this
<head>
<script src="https://www.googleoptimize.com/optimize.js?id=OPT-ABC123">
</script>
</head>
I am running a React.js app with node.js Server-Side-Rendering (SSR) and I initially used React-Helmet to inject this script tag into my element like this:
<Helmet>
<script src="https://www.googleoptimize.com/optimize.js?id=OPT-ABC123">
</script>
</Helmet>
Running this in SSR mode, outputs the expected tag, the browser loads the script, but it fails to initialise Google Optimize correctly (because the 'Google Tag Legacy Assistant` chrome extension tells me).
We use react-helmet in many other places on out website and it works perfectly fine, but not for Optimize.
I tried adding the script into our static index.html file directly - without react-helmet - and it works perfectly.
<head>
<script src="https://www.googleoptimize.com/optimize.js?id=OPT-ABC123">
</script>
</head>
I noticed that when react-helmet renders the tag it also injects a data-react-helmet="true" attribute, which I understand it uses internally to prevent duplicate tags being injected.
I tried adding that attribute into my static index.html file and notice that Optimize no longer loaded.
<head>
<script data-react-helmet="true" src="https://www.googleoptimize.com/optimize.js?id=OPT-ABC123">
</script>
</head>
I can't understand why the extra attribute would prevent this otherwise pure tag to work as expected. I assume either the browser doesn't like the data-* attribute or react-helmet is doing something funky with the hardcoded tag.
Thoughts:
- I wonder if the server-side-render is messing with anything, especially when react.js does the client-side "hydration" step, which might it to re-render the tag somehow...?
Help! :)
UPDATE #1
Adding timestamp to the script URL's querystring, didn't work in the end. It must have been cached somehow:(