Menu
The title might seem a bit vague, but that's because I'm currently experiencing multiple problems integrating Google Optimize in our React / Next.js project. I'm going to try to explain my problems and actions as detailed as possible. However, let me know if something's unclear.
<Html lang="en" className="async-hide">
<Head>
{/*
Google Optimize Ant-Flicker Snippet
https://support.google.com/optimize/answer/9692472?ref_topic=6197443
*/}
<style
dangerouslySetInnerHTML={{
__html: `.async-hide { opacity: 0 !important}`,
}}
/>
<script
dangerouslySetInnerHTML={{
__html: `
(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,
{'OPT-OPTIMIZE_ID':true});
`,
}}
/>
<script src="https://www.googleoptimize.com/optimize.js?id=OPT-OPTIMIZE_ID"></script>
{/* Google Tag Manager */}
<script async src="https://www.googletagmanager.com/gtm.js?id=GTM-TAGMANAGER_ID"></script>
<script
dangerouslySetInnerHTML={{
__html: `
(function(w,l){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});
})(window,'dataLayer');
`,
}}
></script>
...
[rest of code]
960
The major difference between Next JS and React JS is performance. If we talk about Next. js applications, they are extremely fast because of the static destinations and server-side rendering. Of course, they are viable due to many performance enhancement features, such as Image Optimization.
Method 2: Run JavaScriptStep 1 – Click and highlight the CTA you want to change. Step 2 – Click 'Edit element' or press right-click. Then click 'Run JavaScript'. Step 3 – Add the JavaScript code and click 'Apply'.
It's a quite common problem you're experiencing here. Google Optimize and other A/B testing solutions that change website content through Javascript on the client create a flicker effect, as the scripts have to be downloaded before it can change anything.
To answer your questions:
As you're working with next.js some special problems arise. Next.js uses a server (or static render phase) on the server as well as a hydration phase at the client side. When you place Google Optimize (and it loads) before the hydration started it will render the correct experiment but will get overwritten as soon as the hydration kicks in.
How could you integrate it properly with Tagmanger: In the most outer component, e.x. <App/> you could use a useEffect() hook which throws a tagmanager event to trigger the insertion of the optimize experiement.
!Please be aware! through this you will get a flicker effect or slow down your site as you have to wait until everything is hydrated which can take some seconds on slow devices and then will rerender your content.
This is a common problem with Jamstack Pages - which can be solved through integration the experimentation api directly in the code which for sure is more complex.
Sync loading will slow down you're site as it blocks the rendering until the JS and content is loaded, async loading will make the site flicker. That's the two options when working with tag based A/B testing - you have to choose the lesser evil.
59
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
