Update: After the recent GTM revamp this will not work anymore. I’ll see if can update this to work with the new interface.
Google does not just offer a search engine, or a browser, or an Analytics package; it offers an ecosystem where you can connect various parts easily using just standard web technology.
I needed a simple way to keep notes on individual tags, triggers and variables within the Google Tag Manager, since via the interface I can keep notes only per container version. Now I could just have opened a spreadsheet and been done with it, but that would have been boring, so I did things in a somewhat more roundabout fashion. In fact I took this as an excuse to finally look into Chrome extension development.
The result is, well, maybe a not very useful thing for reasons I will go into later. But it is a demonstration of how easily you can link up different parts of the Google ecosystem. This uses GTM as the thing I want do pull data from, an extension as the piece that send and retrieves the data, and a Google Spreadsheet with a few lines of Google Apps Script as data storage. I knew apps script, but with extension development I had to start from zero. Now the result might not be particular graceful code, but the project took the better part of two afternoons (and it would have been much quicker had I realized earlier that I had accidentally swapped rows and cols in the “getRange” function in my apps script, which caused a lot of confusion), and that’s really not a lot of time to build a working thing from scratch.
If you want to play directly with the code you find it on Github. To load the extension code you need to enable developer mode in the Chrome extension settings, click the “load unpacked extension” button and point to the directory where you have downloaded the code (I haven’t “packed” this as an extension since that would defy the point of showing how simple this extension is).
Next locate the appscript.js file, copy the contents to the clipboard. Go to Google docs, create a new spreadsheet, select “script editor” from the tools menu. Paste the code. Enter the id of the spreadsheet at the top as value for the SHEETID variable. You need to run this at least once from within the script editor interface to authorize the script (i.e. give it permission to edit the spreadsheet programmatically). Publish as a webapp, and copy the URL.
Go to the extension page in your browser, click options and enter the URL of your webapp. If you did everything correctly there should now be a small icon in the upper right edge of your Chrome browser. Unless you are currently editing GTM tags, triggers or vars it will not do very much, so let’s have a look at what this is supposed to do.
So what does it do ?
This is a very small extension that scans the URL of the current tab to determine if it belongs to the editing interface of a tag, trigger or variable within GTM. For example if you edit a tag the tab url will look something like this:
We are mostly interested in the domain, since the extensions does not need to run unless we are in the GTM interface, and the last two bits which tell us what kind of resource we are currently editing, and which resource as identified by id.
This adds the first of several caveats, which is that the extension will not work on newly created tags – newly created tags (triggers, vars) do not have an id yet, so you have to save them first before you can add notes to them.
If trigger the “browser action” of the extension by clicking the icon the extension will take the id, and the url bit that names the resource as well as the container id from the DOM and send a request to the webapp we have created from the spreadsheet. If there is a sheet that has a name constructed from the container id and resource name (i.e. GTM-1234-3_tags), and if there is a column that has the tag id as value then the webapp will return the contents of the column, and the extension will display it in the popup of the browser action. If there is not such sheet or no such column the webapp returns an empty value and the extension will inform you that there is no information available.
In that case you probably want to write some information, and for that there is a text field with a submit button. If you are editing an existing (! – remember, we need that id) tag, trigger or variable you can click the icon, add some text and click submit and this will be stored in the spreadsheet. The webapp will create a new sheet and/or column if the appropriately named sheet or column does not yet exist, or it will add to existing data if you have added something before. And now you, and anybody else who has the extension installed and has authorized access to the Google Spreadsheet can easily access and submit notes for the tags, triggers and variables within your GTM containers.
Watch a bit of (silent) video to see how this is supposed to work:
Another caveat is that the note you entered will be saved even if you abort editing; the extension does not try to figure out if you have actually saved the edited tag, it will store the information regardless.
Useful, some day
Currently this is not the most useful extension ever – after all if you simple opened a second tab with the spreadsheet it would serve the same purpose without the overhead of an extension. But there is some potential to use this for interesting things. In my GTM wishlist I wanted a push notification API, a webhook of sorts – some mechanism that informs collaborators about my actions within a GTM container. The combination of Chrome extension and webapp could easily do that, with the extension examining the http requests to see if a tag has been entered for editing, or saved, and then tell the webapp to send an email to all other parties that work on the same container. Currently GTM does not offer much tools for collaboration (rumor has it that GTM 360 will change that, but I don’t know how this will look like or when it will arrive, or how much of it will trickle down to the free version), so I think this really would be a way to help teams that work on the same container.
And of course you could integrate this with other software, as well. Chrome extensions offer support for OAuth with 3rd party applications, so you could hook this up to some project management software like Trello or comparable
Simple, how ?
This is a very long post already. In time I’ll add another post that explains how this works under the hood (or the various hoods of Chrome extensions and Apps Script).
I’m usually not much concerned with attribution (you’ll notice the code does not even have a copyright notice), but if you actually find this idea (or the code) helpful and use it somewhere I would be glad I you link to this article. Thank you.