facebook
skip to Main Content
Using Tag Manager To Track Events & Goals On A Website Pt 3

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/

3. Go to the account you created in Part 1 and used in Part 2.

4. Click on the ‘Triggers’ option in the left menu:

using tag manager 01

5. Now click the ‘Preview’ button at the top right (A):

seo company tag manager

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:

google tag manager

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:

04

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:

track events 5

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):

track events 6

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):

track events 6a

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:

track events 07

13. Back on the site preview page, you can see that I’ve added an extra class to the button ‘ios-download’ (B):

track events 6a

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’:

track events 08

to ‘ios-download’ (A) and clicking ‘SAVE’ (B):

track events 09

15. Now I need to click ‘Refresh’ in the Preview Mode box:

track events 10

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:

track events 11

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:

track events 12

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:

track events 13

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:

track events 14

21. Click ‘Refresh’ again (See Step 15) and test your new Tag:

track events 15

22. Works like a charm! Now click the ‘Leave Preview Mode’ link:

track events 16

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.

Rich Brown

Rich is one of the smartest dudes around here – he is our SEO Strategist at TheOnlineCo. He is a learner, he enjoys figuring out how to make things work and is tenacious about getting your SEO sorted. Rich has this ability to implement SEO strategies that help our clients rank for their designated keywords. He is thorough, methodical and highly skilled.

CONTACT US

Contact Us

Input this code: captcha

Back To Top