Reactjs React/Next.js中Google优化的一般问题_Reactjs_Next.js_Google Tag Manager_Google Optimize

Reactjs React/Next.js中Google优化的一般问题

reactjs next.js

Reactjs React/Next.js中Google优化的一般问题,reactjs,next.js,google-tag-manager,google-optimize,Reactjs,Next.js,Google Tag Manager,Google Optimize,标题可能看起来有点模糊，但这是因为我目前在React/Next.js项目中集成Google Optimize时遇到了多个问题。我将尽可能详细地解释我的问题和行动。但是，如果有不清楚的地方，请告诉我问题是：虽然谷歌优化添加在顶部的头部，我们总是经验到一个页面闪光。这意味着用户首先看到我们的页面，然后什么也看不到（异步隐藏函数启动），然后页面再次发生更改我已经创建了一个实验，重新排序导航链接，删除一个导航链接，并更改我们的CTA文本。出于测试目的，我已将变量设置为100%。发生的情况（与问题1

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

问题是：

虽然谷歌优化添加在顶部的头部，我们总是经验到一个页面闪光。这意味着用户首先看到我们的页面，然后什么也看不到（异步隐藏函数启动），然后页面再次发生更改

我已经创建了一个实验，重新排序导航链接，删除一个导航链接，并更改我们的CTA文本。出于测试目的，我已将变量设置为100%。发生的情况（与问题1相关）是，我们首先看到原始网页，然后看到更改，然后再次看到原始网页，删除了一个导航链接。这意味着它添加了变体，但删除了一些更改

在动态页面上添加实验时，无法应用更改。当我运行这个实验时，没有任何变化，当我重新打开可视化编辑器时，它说这些变化有问题。即使更改只是一个简单的文本更改

我所尝试的：

默认情况下，在html上添加“异步隐藏”类名。这将默认情况下网页设置为隐藏。如果我使用Google Optimize synchronous，效果很好。但是，如果我将其设置为async，则需要1到2秒才能显示页面，这不是很好的性能

我按照谷歌提到的确切步骤在谷歌标签管理器中添加了谷歌优化。是的，我在异步隐藏函数中将Google Optimize容器ID更改为GTM容器ID

我解开了上面的第2部分，像这样手动添加了谷歌优化


{/* 
谷歌优化蚂蚁闪烁片段
https://support.google.com/optimize/answer/9692472?ref_topic=6197443
*/}
{/*谷歌标签管理器*/}
...
[其余代码]

我有问题

这个问题与Next.js有关吗？事实上，我们在react应用程序中使用静态多页而不是单页

在React/Next.js项目中实现谷歌优化的最佳方法是什么：通过谷歌标签管理器或谷歌优化

在React/Next.js项目中，Google Optimize的最佳加载方法是什么：异步还是同步

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

回答您的问题：

在使用next.js时，会出现一些特殊问题。js在服务器上使用服务器（或静态渲染阶段），在客户端使用水合阶段。当你在水合作用开始之前放置Google Optimize（并加载）时，它将呈现正确的实验，但一旦水合作用开始，它就会被覆盖

如何将其与Tagmanger正确集成：在最外部的组件e.x.

中，您可以使用一个

useEffect（）

钩子，它抛出一个tagmanager事件来触发插入优化实验

!！请注意！通过这个，你会得到一个闪烁的效果或缓慢关闭你的网站，因为你必须等待，直到一切都水合在速度较慢的设备上可能需要几秒钟，然后将重新启动你的内容

这是Jamstack页面的常见问题，可以通过将实验api直接集成到代码中，这是肯定的更复杂

同步加载会减慢站点的速度，因为它会阻止渲染，直到加载JS和内容，异步加载会使站点闪烁。这是使用基于标记的A/B测试时的两个选项-您必须选择较小的选项

您是否正在利用nextjs提供的任何路由器事件<代码>router.events.on（'routeChangeStart。如果您需要一个示例，请告诉我。不，我们在项目中不使用路由器。我们只在定义页面时使用pages文件夹。在我们的情况下，我们将其放置在src/pagesYo中，不需要使用其他第三方路由器-只需使用内置的下一个路由器。这些是nextjs提供的事件。您只需在你的app.js中做一些更改。你可以继续使用pages文件夹中的autorouting。Nextjs可以告诉你pages文件夹中的一个页面何时更改为另一个页面以及加载何时完成。你可以使用它来避免页面闪烁。我将查看这些路由器事件的文档，看看如何使用它来帮助我。谢谢你的建议ce。我会发布一个答案作为示例，但可能有人可能有更好的解决方案，所以我将不回答。祝你好运，但如果你需要appjs的完整代码，请告诉我。

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