如何让 gtag 在 chrome 扩展中工作?

dar*_*mnx 5 analytics google-analytics google-chrome-extension gtag.js

我已将 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'"
}
Run Code Online (Sandbox Code Playgroud)

这是我的扩展程序使用的 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>
Run Code Online (Sandbox Code Playgroud)

这是我如何触发视图和事件

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
})
Run Code Online (Sandbox Code Playgroud)

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

这是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"
  }
 }
]
Run Code Online (Sandbox Code Playgroud)

这里有什么问题?

ele*_*ser 3

在 Chrome 扩展中添加 gtm 是一项有点棘手的工作。我曾经遇到过你现在面临的同样的问题。然而,这可以在 CE 中实现 gtm。

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

您必须添加checkProtocolTask : false到每个 gtm 标签才能从 Google Chrome 扩展程序跟踪它们。

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

向下滚动到要设置的字段,然后添加新字段:

Field Name: checkProtocolTask
Value: false
Run Code Online (Sandbox Code Playgroud)

有关更多详细信息,请参阅此 SO 帖子