Next JS re-renders the changes caused by Google Optimize script

1 year ago

#363203

Rishav Chowdhury

I am trying to implement the Google Optimize functionality in a multi-page website, built on Next and React. The scripts are installed correctly, but certain elements and getting re-rendered to their original variant after a flicker, whereas certain elements are being changed by the Optimize tag.

Does anyone know how to fix this re-rendering issue? I have added three scripts:

Anti-Flicker Script
Optimize Script
GTM Script

<Head>
   <style
   // eslint-disable-next-line react/no-danger
   dangerouslySetInnerHTML={{
   __html: `
   .async-hide { opacity: 0 !important };
   `
   }}
   />
   <script
    defer
   // eslint-disable-next-line react/no-danger
   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-XXXXXXX':true});
   `
   }}
   />
   <script defer src="https://www.googleoptimize.com/optimize.js?id=OPT-XXXXXXX" />
   <script
   // eslint-disable-next-line react/no-danger
   dangerouslySetInnerHTML={{
   __html: `
   (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','GTM-XXXXXXX');
   }}
   }, false);
   `
   }}
   />
   <link rel="preconnect" href="https://www.google-analytics.com" crossOrigin="true" />
   <link rel="dns-prefetch" href="https://www.google-analytics.com" />
   <link rel="preconnect" href="https://www.googletagmanager.com" crossOrigin="true" />
   <link rel="dns-prefetch" href="https://www.googletagmanager.com" />
   {process.env.NEXT_PUBLIC_ENV === "dev" && <meta name="robots" content="noindex,nofollow" />}
   </Head>

   <body>
      <Main />
      <noscript
       dangerouslySetInnerHTML={{
       __html: `
       <iframe 
          src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
          height="0" 
          width="0" 
          style="display:none;visibility:hidden"
       ></iframe>
       `
     }}
   />
   </body>

reactjs

next.js

google-tag-manager

server-side-rendering

google-optimize

0 Answers

Your Answer

Posts

Questions

Blogs

Jobs