时间戳

首页 > 解决方案 > 如何在 chrome 扩展中实现谷歌标签管理器代码？

google-chrome-extension - 如何在 chrome 扩展中实现谷歌标签管理器代码？

问题描述

我有一个在 contacts.google.com 页面上运行的 chrome 扩展程序。我需要在我的项目中实现谷歌标签管理器代码，但我无法添加它。正如以下链接https://developers.google.com/tag-manager/quickstart中给出的文档所说，我们必须在 < Head> 标记和 <body> 标记处添加代码。问题是我没有 html 文件，因为使用 javascript 文件将 html 内容加载到谷歌联系人页面中：background.js 文件和 content.js 文件。有人可以告诉如何在 chrome 扩展中实现谷歌标签管理器代码吗？任何帮助将不胜感激。

标签： google-chrome-extensiongoogle-analyticsgoogle-tag-manager

解决方案

我不确定这是否是最好的方法，但它对我有用

在 manifest.json 上

"content_scripts": [
    .
    .
    . 
    {
      "matches": ["*://*/*"], 
      "js": ["jQuery.js","gtm.js"],
      "run_at": "document_end"
    },
    ...

在 gtm.js 上

const accountToken = `GTM-XXXXX`;
const dataLayer = [];
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 = `<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);
}
$(document).ready(integrateGTM);

这种方式对我很有用，我希望对你也一样

推荐阅读