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

Question

我对 Google Analytics Suite 还很陌生，目前正在尝试在 React 应用程序中集成 Google Optimize for A/B 测试。

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

迄今为止:

谷歌优化脚本安装在应用程序中
<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>

ga 跟踪是使用 ReactGA 设置的

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

奈伊尔

[解决了]

能够确定问题与设置无关。问题是谷歌优化的 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