时间戳

首页 > 解决方案 > 如何在 SSR React 应用程序中以编程方式获取我的 Google 优化实验 ID？

javascript - 如何在 SSR React 应用程序中以编程方式获取我的 Google 优化实验 ID？

问题描述

我在很多博客上注意到开发人员将他们的 Experiment_ID 写入他们的google_optimize.get(代码。我还注意到，如果有变体，很多示例都会检查 G/O ......然后有条件地在本地渲染变体。

来自 Medium博客的示例：

// omitted the rest of the component...  
  async componentDidMount() {
    if (window.dataLayer) {
      await window.dataLayer.push({ event: "optimize.activate" });
    }
    this.intervalId = setInterval(() => {
      if (window.google_optimize !== undefined) {
        const variant = window.google_optimize.get(YOUR_EXPERIMENT_ID_GOES_HERE); // <-- why are we hard coding this??
        this.setState({ variant });
        clearInterval(this.intervalId);
      }
    }, 100);
  }

// render goes here...

首先 - 硬编码不可能是生产软件进行 A/B 测试的方式，当然。从非技术的角度来看，这并不理想。营销/产品希望能够自由地创建 Google 优化工具“体验”或实验，只需单击“开始实验”即可立即运行它们。

然后我们要求前端开发人员进入代码并为每个实验更新 EXPERIMENT_ID 的想法感觉非常手动/过时。

第二 - 为什么有这么多示例（包括Google 文档）提供条件渲染？如果我使用 Google Optimize 来编辑字符串、更改和测试按钮的颜色，为什么我需要编写如下逻辑：

if(variant === 0) return <Button color="white" />
if(variant === 1) return <Button color="green" />

所以：

  1. 对您而言，防闪烁和 GTM/G/O 脚本的全部意义不就是 G/O 被加载并动态更改内容吗？

  2. 关于 EXP ID，Google 跟踪代码管理器和 Google Optimize 脚本是否无法提取所有实时实验并为我提供参考，以便我可以以编程方式更新 EXP_ID 值？

也许我把 G/O 设置错了。如果有人可以建议，我目前正在template.js为我的 SSR HTML 提供服务。我有下面的内容，然后在 GTM 中注入我的 G/O 标签。

<head>
    <!-- anti-flicker 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,
{MY_ID:true});</script>

    <!-- Give GTM my Analytics ID -->
<script async src="https://www.googletagmanager.com/gtag/js?id=${this.googleAnalyticsId}"></script>

<!-- When Page Loads call gtag and give it the date and GA ID -->
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '${this.googleAnalyticsId}');
</script>


<!-- 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','${this.googleTagManagerId}');</script>
<!-- End Google Tag Manager -->`;
</head>

<body>
    <!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=${this.googleTagManagerId}"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->`;
</body>

如果有人可以提供建议，我将永远感激不尽。

标签： javascriptreactjsgoogle-optimize

解决方案

推荐阅读