Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to make gtag to work in chrome extension?

I've added gtag.js to my chrome extension but I don't see anything on the nework, please tell me what I did wrong.

This is my CSP in manifest.json

{
   "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'"
}

This is my index.html used by my extension (which replaces the user's default tab)

<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>

Here's how I trigger views and events

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
})

Although I followed every step, here's what I have on the network : nothing.

Here's the dataLayer var which proves my events are added to the queue but not triggered

[
 {
  "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"
  }
 }
]

What can the issue be here ?

like image 894
darkylmnx Avatar asked Oct 17 '22 19:10

darkylmnx


1 Answers

Adding gtm in the Chrome Extension is a bit tricky job. I had faced the same issues you are facing now. However, this is possible to implement gtm in CE.

Your manifest looks fine. You need to do some configuration changes in https://tagmanager.google.com/

You must add checkProtocolTask : false to each gtm tag in order to track them from Google Chrome Extension.

Add checkProtocolTask : false to Fields to Set

Scroll down to Fields to Set, and add a new field:

Field Name: checkProtocolTask
Value: false

See this SO post for more details.

like image 91
elegant-user Avatar answered Oct 21 '22 00:10

elegant-user