Have you created a Chrome Extension, and now you’re dying to find out how users are interacting with it? Perhaps you want to see what features are (not) being utilized, or perhaps you’re just interested in knowing if people are actually using it.

In this article, I’ll show you how to configure Google Tag Manager, so that it works in the restricted sandbox of the Chrome Extension. You’ll need to make some tweaks, but it’s still perfectly doable.

This article was inspired by Mike Pantoliano’s question in the Google Tag Manager Google+ community. Thanks Mike!

X

The Simmer Newsletter

Subscribe to the Simmer newsletter to get the latest news and content from Simo Ahava into your email inbox!

Tip 47: How to make Google Tag Manager work in a Chrome Extension

Add Google Tag Manager to Chrome Extension

This solution requires that your extension have a pop-up page. In other words, the extension needs to have actual HTML that the browser renders when you activate it.

1. Deploy the Google Tag Manager container

The first thing you’ll need to do is create a new JavaScript file. You can do it with any text editor. Within the file, add the following code:

(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','GTM-XXXXX');

You probably recognize this as the JavaScript part of the regular Google Tag Manager container snippet.

We’re using a separate JavaScript file to load the container library, because the use of inline JavaScript is strongly discouraged in Chrome Extensions (well, almost universally in fact).

There are two things you’ll need to modify in this script.

First, you need to explicitly load the gtm.js library using the HTTPS protocol. You can see this change in the line that has j.src='https://www.googletagmanager...'. So, the first thing to do is make sure you explicitly type https: in its rightful place, instead of the default relative protocol the snippet uses.

The second thing you need to do is change the GTM-XXXXX to match the container you will be using. Regular GTM stuff.

Once you’re done, save the file as gtm.js and store it in the extension folder.

2. Load the file in your pop-up HTML

Next, open the HTML file where your pop-up is loaded. Add the gtm.js file you just created as a reference, and place it in <head>. Why? Because it doesn’t make sense to load asynchronous libraries anywhere else but in <head> especially since you don’t need to worry about stuff like Search Console verification.

<head>
  ...
  <script type="text/javascript" src="popup.js"></script>
  <script type="text/javascript" src="gtm.js"></script>
</head>
<body>
  <noscript>
    <iframe src="//www.googletagmanager.com/ns.html?id=GTM-W92WQQ" height="0" width="0" style="display:none;visibility:hidden"></iframe>
  </noscript>
  ...

If you really want, you can keep the <noscript> block which loads GTM for JavaScript-less users, but again I’m struggling to figure out a use case where you’d want to fire some pixels when people are using your Chrome Extension.

This change in the markup simply executes the JavaScript in the file gtm.js, which means that when this HTML is rendered by the browser, the Google Tag Manager library is also loaded in the extension.

3. Modify manifest.json

Next, you need to add a Content Security Policy to your extension’s manifest.json file. Basically, you’re telling the extension that requests to certain endpoints are OK, and the extension doesn’t need to panic when those requests take place. A Chrome Extension has the potential to do all sorts of vile things, so this level of additional security is definitely warranted.

In the CSP, you’ll need to tell Chrome that requests to https://www.google-analytics.com and https://www.googletagmanager.com must be allowed. If you’re firing any Tags to other endpoints, you need to list their hostnames here, too. Just remember that all communications must happen across HTTPS, or your extension will report an error when you try to upload it to your browser.

{
  "manifest_version": 2,
  "name": "...",
  "version": "...",
  "content_security_policy": "script-src 'self' https://www.google-analytics.com https://www.googletagmanager.com; object-src 'self'",
  "description": "...",
  ...
}

4. Modify your GTM Tags

Finally, you’ll need to make some necessary modifications to your Google Tag Manager Tags.

For every Google Analytics Tag firing in the container, you need to make the following change.

Add checkProtocolTask : false to Fields to Set

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

Field Name: checkProtocolTask
Value: false

Normally, Google Analytics requires that the request to GA originate from either HTTP or HTTPS. If the requests originate from anywhere else, the process is cancelled. By setting the task named checkProtocolTask to false, we can prevent this check from happening, since the extension uses the custom chrome-extension:// protocol.

Next, in your Page View Tags, make the following change.

Add a custom page to Fields to Set

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

Field Name: page
Value: /some-custom-page-path/

Because the extension page doesn’t have a proper URL (at least in the typical sense), GA can’t decrypt the Document Location parameter for the page path. Page path is a required dimension in all Google Analytics requests, so you’ll need to manually add it to each Tag that fires.

These two modifications need to be in place for tracking to work. For non-Google-Analytics Tags, you might have to make similar (or additional) modifications to enable them in Chrome Extensions.

And that’s it!

Summary

I hope this guide was helpful to you! Understanding the full breadth of security that Chrome Extensions implement can be daunting, so perhaps this illuminates some of the peculiarities of working in such a sandboxed environment.

By following these steps, you should be able to accumulate data in Google Analytics on how users interact with your extension. Remember, though, that the HTML is only rendered when the pop-up is clicked open, and each time the user clicks the pop-up open again, a new pageview is sent. So you can actually use Pageviews as a pretty reliable proxy for extension open rates!

On an only slightly related note, it came to my mind that it’s impossible to use a Chrome Extension like Ghostery to block other extensions (due to the sandbox). So even if the user has blocked Google Analytics and Google Tag Manager from their browser, it wouldn’t apply to the extension. This is something you might want to make clear in the privacy statement of your Chrome Extension!