[英]In chrome extension content-scripts, how can I redirect the current window to a different url and still have the script continue
[英]How can I add Google Tag Manager to chrome extension content-scripts?
我有一個 chrome 擴展,可以在某些網站上激活並在 html DOM 中注入一些元素。 現在我想在擴展上添加谷歌標簽管理器。
在 Google 標簽管理器文檔中,提到在頁面<head>
標簽中添加給定的 function。 所以首先我嘗試在加載擴展后立即在文檔<head>
標記中添加腳本標記:
const loadGTM = () => {
const scriptTag = document.createElement("script");
scriptTag.innerHTML = `(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');`;
document.head.appendChild(scriptTag);
const noScriptTag = document.createElement("noscript");
noScriptTag.innerHTML = `<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe>`;
document.body.prepend(noScriptTag);
}
然后我嘗試通過 Google Tag Assistant 進行連接,但沒有成功。
在此之后,我嘗試運行腳本而不是將腳本添加到 head 標簽。 所以我打開一個新的gtm.js
文件並在其中添加腳本:
//gtm.js
const accountToken = `GTM-XXXXXXX`;
function integrateGTM() {
(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", accountToken);
const code = `<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=${accountToken}"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>`;
const bodyScript = document.createElement("noscript");
bodyScript.innerHTML = code;
document.body.prepend(bodyScript);
}
integrateGTM();
在嘗試通過 Tag Assistant 連接后,它再次連接不上。
所以如果有人在這個領域有任何想法或經驗,我很樂意得到一些幫助。 謝謝!
我不確定谷歌標簽管理器,但你可以直接向谷歌分析發送請求。
您可以像這樣從內容腳本發出獲取后請求:
const trackEvent = (category, action, label, value) => {
const data = {
// API Version.
v: '1',
// Tracking ID / Property ID.
tid: GA_TRACKING_ID,
// Anonymous Client Identifier. Ideally, this should be a UUID that
// is associated with particular user, device, or browser instance.
cid: '555',
// Event hit type.
t: 'event',
// Event category.
ec: category,
// Event action.
ea: action,
// Event label.
el: label,
// Event value.
ev: value,
};
return fetch('http://www.google-analytics.com/debug/collect', {
params: data,
});
}
您可能需要添加標題來欺騙它來自瀏覽器:
headers: {
'user-agent':
'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36',
},
您也可以像這樣發出獲取請求:
'https://www.google-analytics.com/collect?v=1&t={category}&tid=${GA_TRACKING_ID}&cid=555&dp=tube'
https://developers.google.com/analytics/devguides/collection/protocol/v1/reference#overview
在腳本中調用如下:
try {
await trackEvent(
'Example category',
'Example action',
'Example label',
'100'
);
return 'Event tracked.');
} catch (error) {
// handle error
}
請參閱: https://cloud.google.com/appengine/docs/standard/integrating-with-analytics?tab=node.js#top
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.