React/Next.js 中 Google Optimize 的一般问题

本文介绍了React/Next.js 中 Google Optimize 的一般问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

标题可能看起来有点含糊，但那是因为我目前在我们的 React/Next.js 项目中集成 Google Optimize 时遇到了多个问题.我将尝试尽可能详细地解释我的问题和行动.但是，如果有不清楚的地方，请告诉我.

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.

虽然在头顶添加了谷歌优化，但我们总是会遇到页面闪烁的情况.这意味着用户首先看到我们的页面，然后什么也没有(异步隐藏功能启动)，然后页面再次发生变化.
我创建了一个实验，用于重新排序导航链接、删除一个导航链接并更改我们的 CTA 文本.出于测试目的，我已将变体设置为 100%.发生的情况(与问题 1 相关)是我们首先看到我们的原始网页，然后是更改，然后再次看到删除了一个导航链接的原始网页.这意味着它添加了变体，但删除了一些更改.
在动态页面上添加实验时，无法应用更改.当我运行实验时，没有任何变化，当我重新打开可视化编辑器时，它说更改存在问题.即使更改只是简单的文本更改.

我尝试过的:

添加异步隐藏"html 上的默认类名.默认情况下，这会将网页设置为隐藏.如果我使用谷歌优化同步，这很好.但是，如果我将其设置为异步，则需要 1 到 2 秒才能显示页面，这不是很好的性能.
我按照 Google 中提到的确切步骤在 Google 跟踪代码管理器中添加了 Google Optimize这里.是的，我确实将我的 async-hide 函数中的 Google Optimize 容器 ID 更改为 GTM 容器 ID.
我取消了上面的第 2 部分，并像这样手动添加了 Google Optimize.

Adding the "async-hide" className by default on html. This sets the webpage by default hidden. If I use Google Optimize synchronous, this works good. If I set it to async, however, it takes 1 to 2 seconds before it shows the page, which isn't good performance.
I added Google Optimize in Google Tag Manager by following the exact steps mentioned by Google here. Yes, I did change the Google Optimize container ID in my async-hide function to GTM container ID.
I undid part 2 above and added Google Optimize manually like this.

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

我遇到的问题

这个问题与 Next.js 有关吗?我们在 React 应用程序中使用静态多页而不是单页这一事实
在 React/Next.js 项目中实施 Google Optimize 的最佳方法是什么:通过 Google Tag Manager 或 Google Optimize
在 React/Next.js 项目中，Google Optimize 的最佳加载方法是什么:异步还是同步?

slow

React/Next.js 中 Google Optimize 的一般问题

问题描述

我尝试过的:

我遇到的问题

推荐答案