文章/答案/技术大牛

发布

社区首页 >问答首页 >React / Next.js中谷歌优化的一般问题

问React / Next.js中谷歌优化的一般问题
EN

Stack Overflow用户

提问于 2020-09-21 14:45:05

回答 1查看 7.6K关注 0票数 19

标题可能看起来有点模糊，但这是因为我目前遇到了多个问题，将谷歌优化整合到我们的React / Next.js项目中。我将尽可能详细地解释我的问题和行动。但是，如果有什么不清楚的话，请告诉我。

问题：

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

我试过的是：

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

<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 / Next.js项目中实现Google的最佳方法是什么:通过Google或
在React / Next.js项目中，谷歌优化的最佳加载方法是什么:异步还是同步？

reactjs

next.js

google-tag-manager

google-optimize

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-12-03 17:14:48

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

回答你的问题：

当您使用next.js时，会出现一些特殊的问题。Next.js在服务器上使用服务器(或静态呈现阶段)，在客户端使用水合阶段。当你把谷歌优化(和它加载)之前水化开始，它将提供正确的实验，但会被覆盖，一旦水化开始。
如何将它与Tagmanger适当地集成:在最外层的组件中，e.x。<App/>您可以使用一个useEffect()钩子，它抛出一个标签管理器事件来触发优化体验的插入。请注意！通过这个，你会得到一个闪烁的效果或放慢你的网站，因为你必须等待直到所有的水化，这可能需要几秒钟的慢速设备，然后会重新修改你的内容。这是Jam堆栈页面中的一个常见问题--可以通过将实验api直接集成到代码中来解决，这一点肯定要复杂得多。
同步加载将减慢您的站点，因为它阻止呈现，直到JS和内容加载，异步加载将使站点闪烁。这是两个选项，当使用基于标签的A/B测试时-你必须选择较小的邪恶。

票数 15

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63994663

复制

相似问题

问React / Next.js中谷歌优化的一般问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React / Next.js中谷歌优化的一般问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React / Next.js中谷歌优化的一般问题
EN