问题描述
我在很多博客上注意到开发人员将他们的 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 (将#修改为@）