将 google 优化与 chrome 扩展程序集成时遇到不同的错误

问题描述

我正在尝试使用谷歌标签管理器在 chrome 扩展上集成谷歌优化。除了 A/B 测试，我一切正常：

这是我用来注入容器的函数

const accountToken = `GTM-XXXXX`;
const googleOptimize = `OPT-XXXXX`;
const analyticsToken = `UA-XXXXXX-X`;

function integrateGTM() {
console.log("Trying GTM");
if (!document.querySelector("body")) {
return setTimeout(integrateGTM,100);
}
const fliker = `
(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',7000,{'${accountToken}':true});`;
const gtm = `(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;
console.log(j.src);
f.parentNode.insertBefore(j,f);
})(window,document,"script","dataLayer","${accountToken}");
`;
const analyticsSource = "https://www.google-analytics.com/analytics.js";
const analyticsCode = `
(function(i,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,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create','${analyticsToken}','auto');
ga('send','pageview');
`;
const optimizeSrc = `https://www.googleoptimize.com/optimize.js?id=${googleOptimize}`;
console.log(fliker,gtm);
const FLICKER = document.createElement("script");
FLICKER.async = false;
FLICKER.innerHTML = fliker;
document.querySelector("head").prepend(FLICKER);
const GTM = document.createElement("script");
GTM.innerHTML = gtm;
const sOPTIMIZE = document.createElement("script");
sOPTIMIZE.async = true;
sOPTIMIZE.src = optimizeSrc;
const analytics = document.createElement("script");
const analytics2 = document.createElement("script");
analytics.asyc = true;
analytics.src = analyticsSource;
analytics2.innerHTML = analyticsCode;
document.querySelector("head").append(GTM);
document.querySelector("head").append(analytics);
document.querySelector("head").append(analytics2);
document.querySelector("head").append(sOPTIMIZE);
const code = `<iframe src="https://www.googletagmanager.com/ns.html?id=${accountToken}"
height="0" width="0" style="display:none;visibility:hidden"></iframe>`;
const bodyScript = document.createElement("noscript");
bodyScript.innerHTML = code;
document.body.prepend(bodyScript);
}

我什至在 CSP 中包含了这些工具：

  "content_security_policy": "script-src 'self' https://www.google-analytics.com https://www.googletagmanager.com https://ajax.googleapis.com; object-src 'self'",

然而，每次我进行更改时，都会在变体调试模式中遇到以下错误之一：

• 页面在初始加载后修改
• 未应用此体验。
• 此体验已在之前的活动中激活。
• Google 跟踪代码管理器阻止了以下代码在此页面上运行：esc。

有时我什至没有收到任何错误，但实验没有运行！

我认为发生这种情况是因为页面更改了内容，主要是因为扩展程序将内容注入到另一个网站。我很失落。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）