I'm excited to share something I've been working on recently.
Tag Mapper helps you avoid Google #TagManager mistakes which could lose you data.
rebrand.ly/tag-mapper-twi…
1/
Tag Mapper helps you avoid Google #TagManager mistakes which could lose you data.
rebrand.ly/tag-mapper-twi…
1/
This visualisation is of a medium-complexity GTM account. This is what we're trying to navigate when we make changes - potential for unexpected issues is HIGH
Tag Mapper helps you see;
- What's at risk when you change something
- What could have caused something to break
2/
Tag Mapper helps you see;
- What's at risk when you change something
- What could have caused something to break
2/
Let me give you a scenario. You want to make a GTM change so you open up Tag Mapper. It takes the raw setup data from your GTM account.
If you don't know how to get your raw GTM setup - I've written a how-to blog post here; rebrand.ly/export-gtm-json
3/
If you don't know how to get your raw GTM setup - I've written a how-to blog post here; rebrand.ly/export-gtm-json
3/
Tag Mapper uses that data to plot out your Tag Manager connections.
- No data leaves your computer
- No need to authorise API access
- None of your Analytics data is used - just your Tag Manager setup.
4/
- No data leaves your computer
- No need to authorise API access
- None of your Analytics data is used - just your Tag Manager setup.
4/
Your variables, triggers, tags, and external connections are colour coded (more on that later)
That can be useful for spotting elements which aren't connected to anything else (highlighted in black) in case you want to have a cleanup.
But that's not enough for GTM work!
5/
That can be useful for spotting elements which aren't connected to anything else (highlighted in black) in case you want to have a cleanup.
But that's not enough for GTM work!
5/
So you go to the "filter" section and choose the variable, trigger, or tag you're thinking about changing.
Tag Mapper highlights your element (in purple) & everything which depends on it the whole way down the chain. You can switch to a "tree view" to see it neatly laid out.
6/
Tag Mapper highlights your element (in purple) & everything which depends on it the whole way down the chain. You can switch to a "tree view" to see it neatly laid out.
6/
You confirm that various elements aren't going to be a problem so you un-tick them as you go by just clicking on the circles on the graph.
When you untick one that a bunch of others are depending on - Tag Mapper understands those others will be fine too, so removes them.
7/
When you untick one that a bunch of others are depending on - Tag Mapper understands those others will be fine too, so removes them.
7/
(Worth mentioning - if something has multiple paths to it, Tag Mapper will only remove it once you've unticked everything leading to it.)
You whittle down the things to check using this intelligent filtering so you don't have to hold everything in your head.
8/
You whittle down the things to check using this intelligent filtering so you don't have to hold everything in your head.
8/
You decide you want to see the nodes in a list rather than scrolling around so you switch to the "Subfilter" tab for an ordered and categorised list.
You can tick or untick elements here. Whenever you hover over the list, it highlights the relevant circle on the graph.
9/
You can tick or untick elements here. Whenever you hover over the list, it highlights the relevant circle on the graph.
9/
The straight lines overlap a bit so you switch to the curved line view.
That separates out the forward-and-back lines AND shows you when one thing is referencing something else MULTIPLE times so you know you need to watch out for multiple ways it might break.
10/
That separates out the forward-and-back lines AND shows you when one thing is referencing something else MULTIPLE times so you know you need to watch out for multiple ways it might break.
10/
You toggle on the "external connection" highlighting in orange.
Whenever Tag Mapper sees something (usually a tag) setting a cookie or using dataLayer.push - it will try to find anything else which references either that cookie or that dataLayer event.
11/
Whenever Tag Mapper sees something (usually a tag) setting a cookie or using dataLayer.push - it will try to find anything else which references either that cookie or that dataLayer event.
11/
In this way - Tag Mapper shows you connections which aren't just "this trigger references this variable" but also things like
"THIS tag uses a dataLayer.push event called 'conversion' which THAT trigger is waiting for"
or
"this tag sets a cookie which we later rely on"
12/
"THIS tag uses a dataLayer.push event called 'conversion' which THAT trigger is waiting for"
or
"this tag sets a cookie which we later rely on"
12/
These "external connections" are things that Tag Manager doesn't actually tell you in the interface. So even aside from making connections easier to follow - Tag Mapper will pull out connections which are otherwise pretty much invisible in Tag Manager.
13/
13/
Worth noting here - Tag Mapper is looking for either dataLayer.push or document.cookie, then looking for the cookie name or dataLayer event name shared at the same time. It's possible to do these things in a way that Tag Mapper will miss but I still think this is useful.
14/
14/
Because of the external connections - you realise that your planned change would have deleted an important dataLayer event.
You fix that - avoiding lost data and a massive future headache (if you had broken this, it would be very hard to figure out how post-publish).
15/
You fix that - avoiding lost data and a massive future headache (if you had broken this, it would be very hard to figure out how post-publish).
15/
Because you're making good time with these checks, you decide to toggle back and forth between the tree view and jumbled graph view. Sometimes it's fun just to see things move around on the page while you process.
16/
16/
You can also just revert to the original graph and remove all the filters by hitting "reset"
17/
17/
Back to the investigation! As you're looking, you notice something unrelated to your current work is broken. You're no-longer sending a specific GA event.
18/
18/
You type the name of the GA event into the "Search" tab.
Tag Mapper finds you everything which mentions that event name anywhere in its name or contents so you can quickly find everything related without having to know what it's called.
19/
Tag Mapper finds you everything which mentions that event name anywhere in its name or contents so you can quickly find everything related without having to know what it's called.
19/
You click to expand the result you want to check. Tag Mapper shows you the key details, including criteria for firing, any HTML or JavaScript being added, pre-formatted for you.
20/
20/
You hit the "what could break this?" button to see everything that element depends on.
You plan a fix for the offending element, using the tool to make sure your "fix" won't break anything else.
21/
You plan a fix for the offending element, using the tool to make sure your "fix" won't break anything else.
21/
You're getting into the swing of this. You switch the canvas colour back and forth.
You also save a snapshot of the graph to demonstrate to a colleague why this is all so complicated (that's how I got the image at the start of this thread).
22/
You also save a snapshot of the graph to demonstrate to a colleague why this is all so complicated (that's how I got the image at the start of this thread).
22/
As you dig around, you forget whether you originally chose a variable, trigger, or tag. You click the "highlight nodes on scroll over" button, which shows the true colour of every node you scroll over for a couple seconds.
It shows you what you're looking at is a trigger.
23/
It shows you what you're looking at is a trigger.
23/
Because you can easily dig into connections in specific parts of your Tag Manager account, and quickly move between connected parts, you swiftly;
- Find out what you broke in the past
- Confirm that you can fix that thing without breaking other things
24/
- Find out what you broke in the past
- Confirm that you can fix that thing without breaking other things
24/
You also;
- Make sure the original change you had planned isn't going to jeopardise existing tracking
- Avoid the pitfalls of changing dataLayer.push events not highlighted in GTM
- Quickly create a list of things to check in on after you publish your change
25/
- Make sure the original change you had planned isn't going to jeopardise existing tracking
- Avoid the pitfalls of changing dataLayer.push events not highlighted in GTM
- Quickly create a list of things to check in on after you publish your change
25/
You avoid losing important #analytics data but, more importantly, you save time and reduce stress because you're able to make changes without having to hold lots of complex connections in your head.
26/
26/
I'd love to hear any thoughts or suggestions. It works alright mobile but is best on desktop.
In case you don't have data (or can't be bothered to get it right now) I've included some example data you can play with.
rebrand.ly/tag-mapper-twi…
27/
In case you don't have data (or can't be bothered to get it right now) I've included some example data you can play with.
rebrand.ly/tag-mapper-twi…
27/
Finally, thanks very much to the people who already gave thoughts and feedback on this! @RichardFergie, @noahlearner, @THCapper, @samnemzer, @dom_woodman, and @dsottimano
Also @micahwoldu and Sinead on the Brainlabs analytics team - thank you for the help and input!
• • •
Missing some Tweet in this thread? You can try to
force a refresh
