In part 1 of this series I showed you how to set up Tag Manager on your website.
In part 2 I explained how to set up basic triggers and tags.
This time around I will answer the question: How do I test my Google Tag Manager tags, and how can I use Preview Mode to set up new triggers and tags?
Now that you’ve got some basic triggers and tags set up, you need to test them to make sure they work! Tag Manager has a ‘Preview Mode’ that is very helpful in a few ways. You can use Preview Mode to test the triggers and tags you have created, but you can also use it to help you set up more triggers. Preview Mode is very helpful in setting up trickier tags as well as it can help you zero in on the specific conditions you need to look for to create new triggers.
1. You’ll need to use Google’s Chrome browser for Preview Mode to work, so be sure you are using Chrome for the following steps.
2. Login to your Tag Manager account here: https://tagmanager.google.com/
4. Click on the ‘Triggers’ option in the left menu:
5. Now click the ‘Preview’ button at the top right (A):
6. You’ll see an orange message box telling you that you are in Preview Mode (B above).
7. Now open a new tab in Chrome and load the website you’ve added this Tag Manager account to. You should see the homepage and a Google Tag Manager frame will appear at the bottom of your browser:
If you don’t see this frame at the bottom of your browser, then you either haven’t installed the Google Tag Manager code, or installed it incorrectly – you’ll need to go back to Step 1 and follow the instructions for installing Tag Manager to your site.
8. Now scroll to the area of the page that contains the element you have set up the trigger and tag for. Click the element (A) and if you have set up the trigger and tag correctly, you’ll see a message appear under the ‘Tags Fired On This Page’ section (B) like this:
9. If you see this message – congratulations! You have set up your trigger and tag correctly! If not, then you will need to troubleshoot why the trigger and tag aren’t working. Preview Mode is amazingly helpful in doing just that!
Troubleshooting uses the exact same methods that you can use to help set up new triggers. So, since my trigger/tag is working, let’s focus on the button to the left (which I haven’t set up a trigger for).
If I click that button, no message pops up saying a Tag was triggered, but you’ll notice under ‘Summary’ that every event on the page is recorded and when I click on the other button, a new event was recorded:
10. I can use the data associated with this event to zero in on the specific element I need to use for my trigger. 1st, click on the new event under Summary – in this case ‘5 gtm.click (A):
Then, in the top section, click the ‘Variables’ tab (B).
11. Here we have a bunch of data associated with the event I triggered when I clicked on the button. Scroll down and have a look at it all. The bit of data I find easiest to use for triggers is in the ‘Click Classes’ row (A):
12. Of course, you can use any of these elements to help you set up or fix your triggers. Back in Tag Manager and looking at the tag we’ve created, you can see there are several options you can choose from when deciding what is going to set off the trigger:
13. Back on the site preview page, you can see that I’ve added an extra class to the button ‘ios-download’ (B):
14. Back in Tag Manager, I can use that to set off my trigger. For this example I’m going to switch the Android code to the IOS class to illustrate how it can be used to troubleshoot and modify triggers. I’ll do this by changing the ‘Click Classes’ from ‘android-download’:
to ‘ios-download’ (A) and clicking ‘SAVE’ (B):
15. Now I need to click ‘Refresh’ in the Preview Mode box:
16. Switch back to the tab with your webpage loaded and refresh the page. When I click the IOS download button, I can see it has triggered the Android event:
17. You can use this technique to find what data to use when you set up new triggers, and to troubleshoot triggers you are having problems with.
For example if I click on an element I haven’t set up to trigger an event like the ‘SEE ALL NEWS’ button, I can get data from that event in the Preview panel to help me create the appropriate trigger. It is usually best to hold the ctrl or cmd key when you click a link so you don’t move away from the page and lose the event data:
18. When I look at Variable data associated with this event (‘4 gtm.click’ under the ‘Summary’ section), I can see I have a lot of options. Under ‘Click Classes’ I can see a whole list of classes (‘A’ above) I can use for my trigger – or I can go into the code of that element and add a custom class to be more specific. I can also use the data from the ‘Click Test’ row in my trigger (‘B’ above).
19. So, if I go back to Tag Manager and set up a new Trigger like this:
You can see I’ve used one of the classes from the Preview page (vc_btn3) and by clicking the plus (+) sign to the far right of that trigger (A), I’ve added another condition using the ‘Click Text’ data (B) to further specify what Tag Manager should look for before firing the trigger.
You can add as many conditions as you’d like here, and you can play with the middle dropdown (C – ‘contains’) to be even more specific.
20. Now I set up a new Tag using that trigger:
21. Click ‘Refresh’ again (See Step 15) and test your new Tag:
22. Works like a charm! Now click the ‘Leave Preview Mode’ link:
That’s how you can test new triggers, troubleshoot triggers/tags that aren’t working and also work out what data to use when setting up new triggers.
Next time I’ll walk you through how to make your Tags live, connect them to Goals, and test them in Analytics.