If you’re anything like me and you work day in day out with GTM, you’re inheriting a pre-existing account with lots of noise, weight and you find out it has more holes in the tracking than Swiss Cheese after a mouse convention it can be difficult to know where to start.
Often you’re greeted with a tag naming convention with something similar to this:
OK so I need to debug these events to make sure they are all still relevant and all still necessary. OK, let’s start with the home page banner? WHICH ONE?!
And you look and lone behold, there’s no tag notes or documentation to explain why this was setup in this way. And you’re looking at a GTM container with 200+ tags so previewing is a nightmare.
This is a scenario I have seen many times. And there’s no easy way to do a full audit and debugging can bit a bit confusing especially if you’re trying to debug the tag for “Homepage Banner”.
So for this, there’s a combination of things I’ve developed over the years to help make things a little easier. By no means I am saying this is the only way to do this but it might just help reduce some of the headache you have when auditing / managing an ongoing container.
Let’s Talk Tag ID
So my first recommendation is assign a Tag ID to the name of the tag. By this I don’t mean assigning a random number to just any tag. This would be unmanageable. Even if you created your own tag ID format, which you certainly can, it can become messy when tags get deleted and new tags get managed.
So we’re going to use the Tag ID that GTM itself uses behind the frontend code. You can view the tag ID for any tag by inspecting the tag name element in GTM in the console. It will look something like this:
See here the tag ID is actually added to the end of the a element within the frontend code. so for the first tag in this example the tag ID is 60. And If we look at the next one down this again has it’s own unique number:
I’ve built a very basic script that you can execute directly in the console to make this appear for all of your tags to make the job easier. Which would make it look like this:
So all you need to do is to then add it to your tag.
The code for this is below:
function setupTagIDInjection() {
document.querySelectorAll('a.open-tag-button').forEach(anchor => {
const href = anchor.getAttribute('href');
const numericalValue = href.match(/\d+$/)[0];
if (!anchor.hasAttribute('data-tag-id-appended')) {
anchor.textContent += ` (Tag ID: ${numericalValue})`;
anchor.setAttribute('data-tag-id-appended', 'true');
anchor.setAttribute('data-tag-id', numericalValue);
}
anchor.addEventListener('click', () => {
setTimeout(() => {
const folderDropdownDiv = document.querySelector('.gtm-veditor_entity-folder');
if (folderDropdownDiv && !folderDropdownDiv.parentNode.querySelector('.custom-tag-id-div')) {
const tagID = anchor.getAttribute('data-tag-id');
const newDiv = document.createElement('div');
newDiv.textContent = `Tag ID: ${tagID}`;
newDiv.className = 'custom-tag-id-div';
folderDropdownDiv.parentNode.insertBefore(newDiv, folderDropdownDiv.nextSibling);
}
}, 1000);
});
});
}
setupTagIDInjection();So all you need to do is to copy and paste this in the console, press enter and you’re good to go:
Top Tip – in the sources tab of the console > under snippets, you can save this as a script so you can just right-click to re-run this script any time you want to.
So what’s the best practice to add this to GTM?
So with this, I’ve found the best way to implement this is within the tag name with a prefix of TID. So this might look something like this:
Why do it this way?
Because your first created tags are likely to have an ID which has less than 3 characters (like the above example). so if you just add “60” and search for this, there’s a small chance this might show up somewhere else so by having the prefix of TID, it means there is much less chance of having this show up when you search for it in your workspace or you are debugging. Which brings me on to my next points.
Workspace use for this is now a little easier. Instead of solely relying on the limitations of folders where you can only assign one folder value at a time, you can directly search for that in your own database. More on this later, but for the purpose of this, it means you can directly search for the tag you want (and you know you’re going to get it). Personally I think some kind of tag category would be better instead of the folder structure but maybe it’s tag overkill.
Also when you’re debugging, your tag hasn’t fired for whatever reason, and you are trying to find your tag amongst possibly hundreds of tags that haven’t fired, then this can be a bit of a pain trying to type out the full name when you can just type TID 2 – 4 numbers. And it makes it much easier to remember.
So you can just Control + F that ID in preview:
Ok that’s good but what else can you do with it?
OK let’s talk Google Sheets
So disclaimer – this section will inevitably not be for everyone. It does involve detail and management. However, if you’re in the tracking game I suspect this might be something you would welcome. So let’s discuss how we can build this into a basic process.
So firstly we can use the ID that we’ve applied to the tag as a reference in spreadsheet. This could be part of an auditing document or part of a bigger picture. For application we can then use those Tag Names with IDs and then map them to a spreadsheet.
But wont that take me ages to copy out / type and paste?
Yes it would normally do but I have a script for that too.
So if you’re within the tag section of GTM, in the workspace you want to scrape the below code will get all of the tag IDs (directly from the code not the ones you might have added into the tag name), The tag name, the tag type and the tag URL (this is the code URL – more on this later). And all you need to do is run this code in the console and it will directly copy it to clipboard for you. So all you have to do is to paste it into your spreadsheet.
Top Tip: make sure you have all of the tags visible in your view to scrape everything.
With an output that looks something like this:
Here is the code below:
function extractData() {
let trElements = document.querySelectorAll('tr.wd-tag-row');
let data = [];
trElements.forEach(tr => {
let tagNameElement = tr.querySelector('td a');
let tagName = tagNameElement ? tagNameElement.textContent.trim() : '';
let href = tagNameElement ? tagNameElement.getAttribute('href') : '';
let tagId = '';
if (href) {
let tagIdMatch = href.match(/\/tags\/(\d+)$/);
if (tagIdMatch) {
tagId = tagIdMatch[1];
}
}
let tagTypeElement = tr.querySelectorAll('td')[2];
let tagType = tagTypeElement ? tagTypeElement.textContent.trim() : '';
let tagLink = href ? "https://tagmanager.google.com/" + href : '';
if (tagId && tagName && tagType && tagLink) {
data.push(`${tagId}\t${tagName}\t${tagType}\t${tagLink}`);
}
});
let tsvContent = "Tag ID\tTag Name\tTag Type\tTag Link\n" + data.join("\n");
console.log(tsvContent);
return tsvContent;
}
function copyToClipboard(text) {
let textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
textarea.setSelectionRange(0, 99999);
let successful = document.execCommand('copy');
document.body.removeChild(textarea);
if (successful) {
console.log('Data copied to clipboard. You can now paste it wherever you need.');
} else {
console.error('Failed to copy data to clipboard.');
}
}
let tsvContent = extractData();
copyToClipboard(tsvContent);
Why copy the tag link though isn’t that a bit unnecessary?
The beauty of copying the tag link means that when you click this link directly from your spreadsheet, it takes you to that exact tag and even opens up the popup for you:
So there’s actually no need to search for this within GTM if you are solely relying on your audit spreadsheet, this will take you to there directly.
Note: This will get the workspace ID of the workspace you run the script on. So if you are wanting to look at a different workspace, then you will need to re-run the script again in the other workspace to get the link to go to another workspace.
So what else can you do with this?
OK Let’s Talk Tag Mapping
One of the biggest benefits of having the Tag ID is that you have something unique to work with. It helps when setting up tracking on elements whereby perhaps things get quite granular. So there might be a section of your website where you have to either use multiple tags for the same block element to track different things, or there is a similar feature on your website elsewhere.
Predominantly I’m talking about things like click tracking here. And I know people will be split on this with the approach, but there are circumstances when you’re setting up tracking which you mind find things get as confusing as trying to follow a cooking recipe written in Morse code. Well maybe not quite but you get the point. So where it get like that here are some potential options to help:
1. Adding a tag description column
This might look something like this. The mobile and desktop Tag Descriptions are for example only. I wouldn’t actually do something like this:
2. Adding the tag event name
Yes you might need to click into each tag to do this, but it means that having this mapped against your tag itself will also mean than you have greater understanding of what your tag is doing (aside from just using Tag notes) and also there is more benefits to having this.
The first and most important benefit, is that it allows you to check the event name and make sure you are not going outside of the 40 character event limit that Google states. So if it’s a general event and it goes outside of this limit, it will be truncated in your GA4 reports which can be a pain if you have granular even names. Even more importantly, if you exceed the 40 character limit and you mark it as a key event, then it will not be reported as a key event.
So let’s add another column into the sheet to check the length of the GA4 event name. To do this, you can simply add the following formula:
=LEN(F2)replace F2 with your GA4 Event Name:
This will give you the length of your GA4 event name and if it goes over 40 characters you can add some conditional formatting or a rule to highlight this and flag if it is too long.
It also let’s you see all of your event names in one single view alongside your tags. Which makes it much easier to view and edit accordingly should you wish. And also it make editing the formatting to make this more consistent much easier. You could add a supporting column if you wish for something like “proposed GA4 event name” to map this further depending on your scenario.
3. Website Section
Adding a website section can make this easier to filter tags too. So if you have a lot of tags categorising them into this will also help to filter things down. For this example, all of these sample tags are “Homepage” but you might have ones for other pages or a generic one for site-wide tags. Totally dependent on your setup.
4. Adding an image URL to your tags
Adding an image URL to your tags can improve the visibility and clarity of where things fire. To do this I am going to use Google Drive as my example. So the first step is to take a screenshot of what you want to use as an example. For this I’ll be using an example Google page to provide examples.
So your example screenshot might look something like this:
Notice how I’ve circled the Start Now button so it’s clearer to the user and for you if you forget later on! You will find your best process with this but this is the best way I have found to do this.
Once you’ve got your image, upload it to Google Drive. There are a few ways you can do this. I prefer to have a folder for all of my images and have the folder sharing access to “Anyone with the link can view” but you can do this on the individual image. You need to enable this for the additional functionality later on.
Note, the image I upload have the Tag ID for ease of use and again ease of reference etc:
Once you’ve done this, copy the link to the image:
And paste it into your sheet:
Next, we need to transform this link so it can be a friendlier image link. More on this in a moment:
So add another column to your sheet. I have called mine Friendly Image link:
Then in the column alongside this you need to paste in the following formula:
=REGEXREPLACE(H2, "https://drive.google.com/file/d/([a-zA-Z0-9_-]+).*/view.*", "https://drive.google.com/uc?export=view&id=$1")Note replace H2 with the actual corresponding cell which contains your first image link. You can also adjust the formula and make it a bit fancier to array this so that you don’t have to drag this down and also so that it only populate cells that aren’t blank. This would look like this:
=ARRAYFORMULA(IF(H2:H<>"", REGEXREPLACE(H2:H, "https://drive.google.com/file/d/([a-zA-Z0-9_-]+).*/view.*", "https://drive.google.com/uc?export=view&id=$1"), ""))
Again, replace all references to H2 with your actual column.
Which will make your URL output look something like this:
Why are we doing this?
Because we’re going to build this into a data studio report.
OK Let’s Talk Data Studio Reports
So I’m suggesting to do this as a Data Studio report for a few reasons:
- Visible images will show here
- You can build it as a guide to existing dashboards (and add a filter to only include the relevant sections of the website the report is designed for)
- You can use it as a lookup tool for users – so this could be a dashboard on it’s own for clarity and management.
What will this roughly look like?
Like this:
Top Tip – When you import the data into Google Data Studio, you need to make sure that your “Friendly Image Link” or whatever you have called your Google Drive link converter column, the type is set to image or the image will not show. When I’ve tested this, Data Studio likes to set it to link by default on initial connection not image link, so watch out for this if your images don’t load.
Notice now the GA4 event name is directly linked to an image a tag and a description? This is the key part about all of this. When looking in GA4 or Big Query events where there is a lot of noise, often it can be really difficult to understand what that event actually means or what it relates to. Especially if you’re new to the GTM /GA4 accounts or if you’re not a technical user. Or even if you’ve just forgot because you have a lot of tags!
This way it provides clarity for your own tracking management and reflection, it provides greater visibility to less technical users and will help you to evaluate your tracking. And this is only the tip of the iceberg look out for more updates on this coming soon!