如何将 Google 跟踪代码管理器添加到 chrome 扩展内容脚本？答案

【问题标题】：How can I add Google Tag Manager to chrome extension content-scripts?如何将 Google 跟踪代码管理器添加到 chrome 扩展内容脚本？
【发布时间】：2022-12-06 03:34:36
【问题描述】：

我有一个 chrome 扩展，可以在某些网站上激活并在 html DOM 中注入一些元素。现在我想在扩展上添加谷歌标签管理器。

在 Google 标签管理器文档中提到在页面 <head> 标签中添加给定的功能。因此，首先我尝试在加载扩展后立即在文档 <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 连接后，它再次连接不上。

所以如果有人在这个领域有任何想法或经验，我很乐意得到一些帮助。谢谢！

【问题讨论】：

你最后想出来了吗？
@akds 不幸的是没有！我为扩展事件编写了我们自己的分析系统。

标签： javascript typescript google-chrome-extension

【解决方案1】：

我不确定谷歌标签管理器，但你可以直接向谷歌分析发送请求。

您可以像这样从内容脚本发出获取后请求：

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

【讨论】：