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

如何解决React / Next.js中Google Optimize的一般问题

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

问题：

尽管Google Optimize位于顶部，但我们始终会遇到页面刷新的情况。意味着用户首先看到我们的页面，然后什么都没有（异步隐藏功能启动），然后再次进行更改的页面。
我创建了一个实验，该实验可以对导航链接进行重新排序，删除一个导航链接并更改我们的CTA文本。为了测试目的，我已将变体设置为100％。发生的事情（与问题1相关）是，我们首先看到我们的原始网页，然后是更改，然后再次是我们的原始网页，其中删除了一个导航链接。意味着它添加了变体，但删除了一些更改。
在动态页面上添加实验时，更改无法应用。当我运行实验时，什么都没有改变，并且当我重新打开可视化编辑器时，它说更改存在问题。即使更改只是简单的文本更改。

我尝试过的事情：

默认情况下在html上添加“异步隐藏” className。默认情况下，这会将网页设置为隐藏。如果我使用Google Optimize同步，则效果很好。但是，如果我将其设置为异步，则显示页面需要1到2秒钟的时间，这不是很好的性能。
我按照Google here提到的确切步骤在Google跟踪代码管理器中添加了Google Optimize。是的，我确实将异步隐藏功能中的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]

我遇到的问题

此问题与Next.js相关吗？我们在React应用程序中处理静态多页而不是单页的事实
在React / Next.js项目中实现Google Optimize的最佳方法是什么：通过Google跟踪代码管理器或Google Optimize
在React / Next.js项目中，最佳的Google Optimize加载方式是什么：异步还是同步？

解决方法

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

要回答您的问题：

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

！请注意！通过此操作，您将获得闪烁效果或变慢在您的网站上停下来，因为您必须等到一切都水化在速度较慢的设备上可能要花费几秒钟，然后会重新呈现您的内容。

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

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

如何解决React / Next.js中Google Optimize的一般问题

问题：

我尝试过的事情：

我遇到的问题

解决方法

相关推荐