有没有人成功地在 SPA React 应用程序中实施谷歌优化？

Question

我是 Google Analytics Suite 的新手，目前正在尝试将 Google Optimize 用于 A/B 测试集成到 react 应用中。

我已经到了在所需网页上显示变体更改的地步，但仅在预览模式下，并且对于如何继续在实时站点上查看变体更改​​感到困惑。

到目前为止：

• 谷歌优化脚本安装在应用中

  <style>.async-hide { opacity: 0 !important} </style> <script>(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, {'GTM-XXXXXXX':true});</script>

• 使用 ReactGA 设置 ga 跟踪

• GTM 已设置并正在触发跟踪代码

• 在自定义激活事件上触发谷歌优化实验并使用 dataLayer 推送新事件

  const initializeReactGa = () => { console.log('called to initialize react ga'); ReactGA.initialize(config.gaTag) ReactGA.ga('require', config.optimizeTag); ReactGA.pageview(window.location.pathname + window.location.search); }

  const googleOptimizeLoader = () => { console.log('called google optimize loader'); if(window.dataLayer) { window.dataLayer.push({'event': 'optimize.activate'}) } }

问题

• 无法在实时站点中看到变体更改（未运行预览）

感谢任何帮助。

TIA

纳伊尔

[已解决]

能够确定问题不在于设置。问题是google优化的cookie管理无法在localhost:3000上设置过期所需的cookie，而是一个指向localhost的自定义域，类似于XXXX.local:3000。

Answer 1

这可能就是你要找的东西

How to Add Google Optimize A/B Testing to Your React App in 10 Lines of Code