标题可能看起来有点模糊，但这是因为我目前在React/Next.js项目中集成Google Optimize时遇到了多个问题。我将尽可能详细地解释我的问题和行动。但是，如果有什么不清楚的地方，请告诉我。
问题：
- 虽然Google Optimize被添加到了顶部，但我们总是会遇到页面闪烁。这意味着用户首先看到我们的页面，然后什么都看不到(异步隐藏功能启动(，然后页面再次发生更改
- 我创建了一个实验，可以重新排序导航链接，删除一个导航链接，并更改我们的CTA文本。出于测试目的，我已将变体设置为100%。发生的事情(与问题1有关(是，我们首先看到我们的原始网页，然后是更改，然后是删除了一个导航链接的原始网页。这意味着它添加了变体，但删除了一些更改
- 在动态页面上添加实验时，无法应用更改。当我运行实验时，没有任何变化，当我重新打开视觉编辑器时，它会说这些变化有问题。即使更改只是一个简单的文本更改
我尝试过的：
- 添加"；异步隐藏"；className默认为html。这将默认情况下隐藏网页。如果我使用谷歌优化同步，这很好。然而，如果我将其设置为async，它需要1到2秒才能显示页面，这不是很好的性能
- 我按照谷歌在这里提到的确切步骤，在谷歌标签管理器中添加了谷歌优化。是的，我确实将异步隐藏函数中的Google Optimize容器ID更改为GTM容器ID
- 我取消了上面的第2部分，并像这样手动添加了谷歌优化
<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项目中实现谷歌优化的最佳方法是什么：通过谷歌标签管理器或谷歌优化
- 在React/Next.js项目中，谷歌优化的最佳加载方法是什么：异步还是同步
这是您在这里遇到的一个非常常见的问题。谷歌优化和其他A/B测试解决方案通过客户端上的Javascript更改网站内容，会产生闪烁效果，因为必须下载脚本才能更改任何内容。
回答您的问题：
-
当您使用next.js时，会出现一些特殊问题。Next.js在服务器端使用服务器(或静态渲染阶段(，在客户端使用水合阶段。当你在水合作用开始前放置谷歌优化(并加载(时，它将呈现正确的实验，但一旦水合作用开始，就会被覆盖。
-
如何将其与tagmanager正确集成：在最外部的组件e.x.
<App/>中，您可以使用useEffect()钩子，该钩子抛出tagmanager事件来触发优化体验的插入。请注意！通过这个你会得到一个闪烁的效果或慢关闭你的网站，因为你必须等到一切都水合在慢速设备上可能需要几秒钟的时间，然后会重新发送您的内容。
这是Jamstack Pages的常见问题，可以通过将实验api直接集成到代码中，这无疑是更复杂。
-
同步加载会减慢你的网站速度，因为它会阻止渲染，直到JS和内容被加载，异步加载会使网站闪烁。当使用基于标签的A/B测试时，这是两个选项——你必须选择较小的邪恶。