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

Question

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

Céd*_*oem 17 google-tag-manager reactjs next.js google-optimize

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

问题：

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

我试过的：

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

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

Run Code Online (Sandbox Code Playgroud)

我遇到的问题

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

Answer 1

小智 11

这是您在这里遇到的一个很常见的问题。Google Optimize 和其他通过客户端上的 Javascript 更改网站内容的 A/B 测试解决方案会产生闪烁效果，因为必须先下载脚本才能更改任何内容。

回答您的问题：

当您使用 next.js 时，会出现一些特殊问题。Next.js 在服务器上使用服务器（或静态渲染阶段）以及在客户端使用水化阶段。当您在水合作用开始之前放置 Google Optimize（并加载）时，它会呈现正确的实验，但会在水合作用开始时立即被覆盖。
您如何将其与 Tagmanger 正确集成：在最外部的组件中，ex<App/>您可以使用一个useEffect()钩子来引发 tagmanager 事件来触发优化实验的插入。

！请注意！通过这种方式，您将获得闪烁效果或减慢您的网站速度，因为您必须等到一切都水合起来，这在慢速设备上可能需要几秒钟的时间，然后会重新呈现您的内容。

这是 Jamstack Pages 的一个常见问题 - 可以通过将实验 api 直接集成到代码中来解决，这肯定会更复杂。
同步加载会减慢您的站点速度，因为它会阻止渲染，直到加载 JS 和内容为止，异步加载会使站点闪烁。这是使用基于标签的 A/B 测试时的两个选项 - 您必须选择较小的邪恶。

归档时间：	5 年，4 月前
查看次数：	3482 次
最近记录：	5 年，2 月前