标题可能有点模糊，因为我目前正在尝试在我们的React / Next.js项目中集成Google Optimize时遇到了多个问题。我会尽可能详细地说明我的问题和行动。但是，如果有什么不清楚的，请告诉我。
问题:
- 虽然Google Optimize添加在头部，但我们总是看到页面闪烁。这意味着用户首先看到我们的页面，然后什么都没有（异步隐藏功能启动），然后再次看到带有更改的页面。
- 我创建了一个实验来重新排序导航链接，删除一个导航链接并更改我们的CTA文本。我将变体设置为100％以进行测试。发生的情况（与问题1有关）是我们首先看到我们原始的网页，然后是更改，然后再次看到我们原始的网页，其中一个导航链接被删除。这意味着它增加了变体，但删除了一些更改。
- 在动态页面上添加实验时，无法应用更改。当我运行实验时，没有任何更改，当我重新打开可视化编辑器时，它会显示更改存在问题。即使更改只是简单的文本更改也是如此。
我已经尝试过的内容:
- 默认在html上添加“async-hide”className。这将网页默认隐藏。如果我使用Google Optimize同步，这很有效。如果我将其设置为异步，则需要1到2秒才会显示页面，这不利于性能。
- 我按照Google在这里提到的确切步骤，在Google Tag Manager中添加了Google Optimize。是的，我确实将Google Optimize容器ID更改为我的async-hide函数中的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>
{/* 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的最佳加载方法是什么：异步还是同步？
router.events.on('routeChangeStart'。如果需要示例，请告诉我。 - Kal