如何使 gtag 在 chrome 扩展中工作？答案

【问题标题】：how to make gtag to work in chrome extension?如何使 gtag 在 chrome 扩展中工作？
【发布时间】：2018-04-24 21:27:08
【问题描述】：

我已将 gtag.js 添加到我的 chrome 扩展程序中，但我在网络上没有看到任何内容，请告诉我我做错了什么。

这是我在 manifest.json 中的 CSP

{
   "content_security_policy": "script-src 'self' https://www.googletagmanager.com https://ssl.google-analytics.com https://www.google-analytics.com https://mustsee-earth.firebaseio.com; object-src 'self'"
}

这是我的扩展使用的 index.html（它替换了用户的默认选项卡）

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>mustsee.earth</title>
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-X"></script>
</head>

这是我触发视图和事件的方式

gtag('config', GATID, {
  page_title: place.name,
  page_path: path
})

gtag('event', binding_value.action, {
    event_category: binding_value.category,
    event_label: binding_value.label,
    value: binding_value.value
})

虽然我遵循了每一步，但这就是我在网络上所拥有的：什么都没有。

这是 dataLayer 变量，它证明我的事件已添加到队列中但未触发

[
 {
  "0": "js",
  "1": "2018-04-24T21:02:54.881Z"
 },
 {
  "0": "config",
  "1": "UA-XXXXXXXXX-X",
  "2": {
   "checkProtocolTask": null,
   "custom_map": {
    "dimension5": "under 1.5 or failed"
   }
  }
 },
 {
  "0": "config",
  "1": "UA-XXXXXXXXX-X",
  "2": {
   "page_title": "Mesquite Flat Sand Dunes",
   "page_path": "/mesquite-flat-oleksandr-mokrohuz-small.jpg"
  }
 },
 {
  "0": "event",
  "1": "click on reload",
  "2": {
   "event_category": "Image View"
  }
 }
]

这里有什么问题？

【问题讨论】：

标签： google-chrome-extension google-analytics analytics gtag.js

【解决方案1】：

在 Chrome 扩展程序中添加 gtm 有点棘手。我曾经遇到过你现在面临的同样问题。但是，这可以在 CE 中实现 gtm。

您的清单看起来不错。你需要在https://tagmanager.google.com/做一些配置修改

您必须将checkProtocolTask : false 添加到每个 gtm 标记，以便从 Google Chrome 扩展程序中跟踪它们。

将checkProtocolTask : false 添加到要设置的字段

向下滚动到要设置的字段，然后添加一个新字段：

Field Name: checkProtocolTask
Value: false

有关详细信息，请参阅this SO post。

【讨论】：

仍然无法正常工作.. 与 localhost 一起使用，但不适用于我的扩展程序
本地主机是什么意思？是本地网页吗？
它在本地服务器上工作（因为我在开发模式下使用 webpack），但是当我打包扩展时它不起作用。无论如何，最后我不得不退回到 analytics.js 而不是 gtag.js，因为 gtag.js 不处理任务，所以它不处理 checkProtocolTask 命令。您写的 SO 帖子是关于使用与 gtag.js 不同的 Google Tag Manager，我不值得为此设置一个 Google Tag Manager 帐户:(
@darkylmnx 你好！我知道这是在黑暗中拍摄，但我目前正在尝试在我的 chrome 扩展中实现 Google Analytics，而且我很难在上面找到资源。你知道我是否仍然必须使用 analytics.js 而不是 gtag.js？从那以后有没有找到解决方法？
@MRB 嗨，从那以后我就没有尝试过，但是从我在文档中看到的内容来看，仍然没有方法可以禁用 gtag.js 上的协议检查。也许在 Google Analytics v4 中这已经发生了变化，但我对此表示怀疑。

【解决方案2】：

gtag('config', GATID, {
  page_title: place.name,
  page_path: path
})

gtag = (function (old_gtag) {
    var inited = false;
    return function gtag() {
        if (!inited && window.ga && window.ga.getAll) {
            window.ga.getAll().forEach(function (tracker) {
                tracker.set("checkProtocolTask", null);
                inited = true;
            });
        }
        if (inited) return old_gtag.apply(this, arguments);
        var args = arguments;
        setTimeout(function () {
            gtag.apply(this, args);
        }, 300);
    };
})(gtag);

gtag('event', binding_value.action, {
    event_category: binding_value.category,
    event_label: binding_value.label,
    value: binding_value.value
})

【讨论】：

欢迎来到 SO。请对你的代码做一点解释。