Question

我遇到了使用我们的React App使用Google Optimize的问题（例如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 docs建议（https://support.google.com/360suite/optimize/answer/7008840?hl=en），但它没有解决问题。

我尝试清除并禁用缓存/ Cookie并检查测试是否适用于各种浏览器，隐身模式，计算机 - 没有任何效果。

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

提前致谢！

米哈尔

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

Answer 1

即使认为这是一个有点老问题，你可能已经解决了这个问题，我也有类似的问题，很难找到合适的解决方案。对于那些仍然在为此而奋斗的人。

所以，你所做的一切都是正确的，但我认为你没有在DOM更改时触发dataLayer事件，所以你需要添加观察者功能来实现这一点。

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

  app.delete(
    "/api/posts/:postId",
    requireAuth,
    async (req, res, next) => {
      try {
        const post = await Post.findById(req.params.postId);
        if (post._userId.equals(req.user._id)) {
          await post.remove();
          const user = await req.user.save();
          res.send(req.user);
        } else {
          res.send("Error:", "This post does not belong to you");
        }
      } catch (err) {
        next(err);
      }
    }
  );

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

Google Optimize无法使用React App（不设置Cookie）

1 个答案: