6

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 ?

darkylmnx
  • 1,891
  • 4
  • 22
  • 36

2 Answers2

3

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.

Aefits
  • 3,399
  • 6
  • 28
  • 46
  • still not working.. works with http://localhost but not in my extension – darkylmnx May 26 '18 at 18:33
  • What do you mean by localhost? is it a local webpage? – Aefits Jun 01 '18 at 05:29
  • 1
    it works on a local server (because I use webpack in dev mode) but it doesn't work when I package the extension. Anyway, finally I had to fallback to analytics.js instead of gtag.js as gtag.js doesn't handle tasks so it doesn't handle checkProtocolTask command. The SO post you wrote is about using Google Tag Manager which is something different of gtag.js, it's not worth for me to setup a Google Tag Manager account for all this :( – darkylmnx Jun 02 '18 at 14:21
  • @darkylmnx Hi! I know this is a shot in the dark, but I am currently trying to implement Google Analytics in my chrome extension and I'm having an incredibly difficult time finding resources on it. Do you know if I still must use analytics.js instead of gtag.js? Have any workarounds been found since then? – MRB Jan 09 '21 at 17:29
  • @MRB hi, well I haven't tried since but from what I see in the docs, there's still no method to disabled the protocol check on gtag.js. Maybe with Google Analytics v4 this has change but I doubt it. – darkylmnx Jan 10 '21 at 07:32
0
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
})
inu1255
  • 1
  • 1