谷歌优化不适用于 React App（未设置 cookie）答案

【问题标题】：Google Optimize not working with React App (no cookie set)谷歌优化不适用于 React App（未设置 cookie）
【发布时间】：2018-01-18 09:45:12
【问题描述】：

我在将 Google Optimize 与我们的 React 应用程序结合使用时遇到了问题（例如 https://quality.livechatinc.com/1520 ）。应该运行一个简单的 A/B 测试（文本替换）。

测试的预览以某种方式起作用（设置了gaexp cookie，并且在预览模式下，只有在重新加载页面**后，才会触发变体）。

发布测试时，未设置 cookie，测试无法完全运行。

下面是 GA/GTM/Optimize 的实现：

//Page-hiding snippet.
<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-XXXXXX':true});</script> //instead of X we have our Optimize container ID

//Optimize code without ga(`send`), as we use GTM to send pageviews
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-XXXXXX-XX', 'auto'); //instead of X we have our GA tracking code
  ga('require', 'GTM-XXXXXXX'); //instead of X we have our Optimize container ID
</script>

//GTM code
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

代码位于应用程序的<head> 中，紧跟在<meta> 和<links> 之后。

我尝试使用自定义 dataLayer 事件触发 Optimize 测试，例如 Optimize 文档建议 (https://support.google.com/360suite/optimize/answer/7008840?hl=en)，但没有解决问题。

我尝试清除和禁用缓存/cookies，并检查测试是否在各种浏览器、隐身模式、计算机上都有效——没有任何效果。

您有在 React 应用中使用 Google Optimize 的经验吗？任何想法如何解决这个问题？

提前致谢！

米哈乌

** 这可能暗示发生了什么，但我不知道为什么会这样。

【问题讨论】：

标签： reactjs cookies google-tag-manager ab-testing google-optimize

【解决方案1】：

即使认为这是一个有点老的问题，你可能已经解决了，我也有类似的问题，很难找到正确的解决方案。因此，对于仍在为此苦苦挣扎的人。

所以，您所做的一切都是正确的，但是我认为您没有在 DOM 更改时触发 dataLayer 事件，因此您需要添加观察者函数来执行此操作。

这是代码示例，应该在之前的某个位置添加，但在所有脚本之后。（也可以在 index.html 中）

<!-- This will send an activate event to Optimize, anytime that there is a change in the DOM --> 
<script> 
    window.dataLayer = window.dataLayer || []; 
    if (MutationObserver) { 
      new MutationObserver(function(){ 
        dataLayer.push({'event': 'optimize.activate'}); 
      }).observe(document.body, {subtree: true, attributes: true, characterData: true}); 
    } 
  </script>

另外，不要忘记在优化中设置以激活自定义事件而不是页面加载的实验（如此处https://support.google.com/360suite/optimize/answer/7008840?hl=en 中所述）

【讨论】：

在页面的初始视图上工作，但在 react 重置它之后，例如单击页面上的某个位置导致重新渲染.. 在控制台中手动写入 dataLayer.push({'event': 'optimize.activate'}); 不起作用任何东西