如何解决如何在 SSR React 应用程序中以编程方式获取我的 Google 优化实验 ID?
我在很多博客上注意到开发人员将他们的 Experiment_ID 写入他们的 google_optimize.get(
代码中。我还注意到很多示例会检查 G/O 是否存在变体……然后在本地有条件地呈现变体。
来自媒体 blog 的示例:
// 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 的想法感觉非常手动/过时。
第二 - 为什么有这么多示例(包括 the Google Documentation)提供条件渲染?如果我使用 Google Optimize 来编辑字符串、更改和测试按钮的颜色,为什么我需要编写如下逻辑:
if(variant === 0) return <Button color="white" />
if(variant === 1) return <Button color="green" />
所以:
-
防闪烁和 GTM/G/O 脚本的全部意义不就是加载 G/O 并即时更改内容吗?
-
对于 EXP ID,Google 标签管理器和 Google 优化脚本是否无法提取所有实时实验并为我提供参考,以便我可以以编程方式更新 EXP_ID 值?
也许我把 G/O 设置错了。如果有人可以提供建议,我目前正在为我的 SSR HTML 提供 template.js
。我有下面的内容,然后在 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,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','${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>
如果有人能给我建议,我将永远感激不尽。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。