接下来JS重新呈现Google优化脚本引起的更改

发布于 2025-01-18 08:57:10 字数 2336 浏览 1 评论 0原文

我正在尝试在基于 Next 和 React 构建的多页面网站中实现 Google Optimize 功能。脚本已正确安装，但某些元素在闪烁后会重新渲染为其原始变体，而某些元素则被 Optimize 标记更改。

有谁知道如何解决这个重新渲染问题？我添加了三个脚本：

防闪烁脚本
优化脚本
GTM 脚本

<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>

原文

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>

分享到QQ

分享到微博