Loading Site
skip to Main Content
How To Setup And Use Tag Manager

Setting Up Tag Manager for a Website

In my quest to understand how to properly set up and use Google Tag Manager, I found answers by piecing together bits and pieces from several different sources. It was a frustrating process and it took me a long time to figure out how to make things work (and I still have a LOT to learn!).

With this blog post I will attempt to explain – using simple, step-by-step instructions – how to set up and use Google Tag Manager to track events and goals on your website.

So first off, I will do my best to answer the question: How do I set up Tag Manager on my website?

1. Go to: https://tagmanager.google.com/ and login with your Google account – or create a new one if you don’t have one already.

2. On the Tag Manager Dashboard, click ‘Create Account’:

Create a New Google Tag Manager Account

3. On the Next page, give the new account a name (A) – usually the name of the business that owns the website. Click ‘Continue’ then enter the domain name (B) – do not include ‘http://’. Click the ‘WEB’ button (C) and then click the ‘CREATE’ link (D):

Setting Up Google Tag Manager to Track Events & Goals on Your Website Step 3

4. The next page will have the Tag Manager codes you need to add to your site. Copy the top code (A):

Setting Up Google Tag Manager to Track Events & Goals on Your Website Step 5 pt 1

and paste this code into the ‘Head’ section of your site’s web pages. The ideal spot for the code is just before the closing </head> tag (‘A’ below). If you use WordPress or another CMS (Content Management System), you can do this in your ‘header.php’ template file:

Setting Up Google Tag Manager to Track Events & Goals on Your Website Step 5 pt 2

if your site is pure HTML, then you will need to add this code to the same area of your web pages, you’ll just need to do it for each page on your website.

5. Now copy the second snippet of code from Tag Manager (B):

Setting Up Google Tag Manager to Track Events & Goals on Your Website Step 5 pt 1

and paste this code just after the opening <body> tag (B) in your ‘header.php’ template file (depending on your CMS) or into all of your static HTML pages:

Setting Up Google Tag Manager to Track Events & Goals on Your Website Step 5 pt 2

6. Click ‘OK’ in Tag Manager, then click ‘Variables’ in the left menu:

Setting Up Google Tag Manager to Track Events & Goals on Your Website Step 6

7. Under ‘User-Defined Variables’, click ‘NEW’:

Setting Up Google Tag Manager to Track Events & Goals on Your Website Step 7

8. Give your new Variable a new title – call it ‘Analytics’ (A):

Setting Up Google Tag Manager to Track Events & Goals on Your Website Step 8

9. Click the ‘Variable Configuration’ area (‘B’ above), then scroll down a bit and choose ‘Google Analytics Settings’ (‘A’ Below):

Setting Up Google Tag Manager to Track Events & Goals on Your Website Step 9

10. Go to your Analytics account and load up the dashboard for the site you are working on. At the bottom left, click ‘ADMIN’:

Setting Up Google Tag Manager to Track Events & Goals on Your Website Step 10

11. In the ‘Property’ column click ‘Tracking Info’ (A), then, click ‘Tracking Code’ (B):

Setting Up Google Tag Manager to Track Events & Goals on Your Website Step 11

12. Highlight and copy the ‘Tracking ID’ (A):

Setting Up Google Tag Manager to Track Events & Goals on Your Website Step 12

13. Go back to Tag Manager and paste the ‘Tracking ID’ into the corresponding field (A), then click ‘SAVE’ (B):

Setting Up Google Tag Manager to Track Events & Goals on Your Website Step 13

14. Now click ‘CONFIGURE’ in the ‘Built-In Variables’ section:

Setting Up Google Tag Manager to Track Events & Goals on Your Website Step 14

15. From here you can activate all built-in variables available. Here are the ones I recommend activating:

Setting Up Google Tag Manager to Track Events & Goals on Your Website Step 15

Under ‘Clicks’ (A):
Click Element
Click Classes
Click ID
Click URL
Click Text
Under ‘Forms’ (B):
Form Element
Form Classes
Form ID
Form URL
Form Text

16. Close the ‘Configure Built-In Variables’ tab (C above).

And there it is – a (hopefully) simple step-by-step guide showing you how to create a Google Tag Manager Account and install it to your website.

The next section covers how to create Triggers in Tag Manager:

Creating Triggers and Tags in Tag Manager

In this section I will work toward answering the question: How do I create triggers and tags in Google Tag Manager?

Triggers are an important step toward tracking a variety of ‘events’ on your website. An event is an action a visitor to your site makes, such as clicking a phone number, a submit button on a contact form, etc…

Here are the steps to create a basic trigger:

1. Login to your Tag Manager account here: https://tagmanager.google.com/

2. Go to the account you created in Section 1.

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

Creating Triggers and Tags Step 3

4. Click the ‘NEW’ button (A), then click anywhere in the ‘Trigger Configuration’ box (B):

Creating Triggers and Tags Step 4

5. You will see several options in a list – I suggest you experiment and play around with some of these after you’ve set up the basic tags I am showing you here.

Click on ‘All Elements’:

Creating Triggers and Tags Step 5

6. Click the ‘Some Clicks’ radio button:

Creating Triggers and Tags Step 6

7. Now open your website and find the element you would like to track. In this case I am going to track when someone clicks on an image link on my website.

You’ll need to use a modern browser for the following – Chrome is best.

Right-click (cmd click on Mac) on the link, then click ‘Inspect’:

Creating Triggers and Tags Step 7

8. In the inspector you can see I’ve added a class to the image called ‘android-download’ (A above).

9. Now go back to Tag Manager and change the first drop down (A) to ‘Click Classes’, make sure the second drop down says ‘contains’ (B) and enter the class of the element you want to track in the third field (C):

Creating Triggers and Tags Step 9

Give your trigger a new title (D above), then click ‘SAVE’ (E).

10. Now click the ‘Tags’ option in the left menu (A) and click the ‘NEW’ button (B):

Creating Triggers and Tags Step 10

11. Click anywhere in the ‘Triggering’ box (A):

Creating Triggers and Tags Step 11

12. Click on the trigger you just created (if you have created several tags, choose the appropriate trigger for the tag you are creating):

Creating Triggers and Tags Step 12

13. Now click anywhere in the ‘Tag Configuration’ box:

Creating Triggers and Tags Step 13

14. Choose the ‘Universal Analytics’ tag:

Creating Triggers and Tags Step 14

15. From here, click the drop down under ‘Google Analytics Settings’ (A) and choose ‘{{Analytics}}’, then click on the drop down under ‘Track Type’ (B) and choose ‘Event’:

Creating Triggers and Tags Step 15

16. Give your tag an appropriate title (A), then under the ‘Event Tracking Parameters’, enter some text that makes sense for what you are trying to track (B). When you’re done, click ‘SAVE’ (C):

Creating Triggers and Tags Step 16

That is how to create a basic Trigger and Tag in Google’s Tag Manager. In the next section I will explain how to test the Tag using ‘Preview Mode’ and also how to use Preview Mode to help you quickly set up more tags.

Testing Tags and Using Tag Manager’s ‘Preview Mode’ to Set Up New triggers

In this section 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 Section 1 and used in Section 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.

In the next section I’ll walk you through how to make your Tags live, connect them to Goals, and test them in Analytics.

Using Tags to Trigger Events and Goals in Analytics

In this final section I will show you how to setup Goals in Analytics so you can track Events on your website.

1. Login to your Tag Manager account here: https://tagmanager.google.com/

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

3. Click on the ‘Tags’ option in the left menu:

tracking events and goals 1

4. Now login to your Analytics account and load up the Account/Property for the website you are working on and click on the ‘ADMIN’ link at the bottom left:

Tag Manager Pt4: Step 4

5. In the far right column (VIEW Column), click on ‘Goals’:

Tag Manager Pt4: Step 5

6. Click ‘New Goal’:

Tag Manager Pt4: Step 6

7. Give your Goal a name (A) – I usually name it the same as or close to the Tag I have set up in Tag Manager. In this case I am going to call my Goal ‘Android Download’:

Tag Manager Pt4: Step 7

Then you tick the ‘Event’ option under ‘Type’ (‘B’ above), and click ‘Continue’.

8. Back in Tag Manager, click the title of the corresponding Tag:

tracking events and goals 6

9. Now click anywhere in the ‘Tag Configuration’ table:

tracking events and goals 7

10. When you look at the Analytics Goal settings next to the Tag Configuration table, you’ll see they correspond to each other:

tracking events and goals 8

11. Just copy and paste the values from the Tag Configuration into the corresponding fields in the Analytics Goal. So, copy the value in the ‘Category’ field in Tag Manager and paste it into the ‘Category’ field in Analytics. Do this for all fields:

tracking events and goals 9

12. For the ‘Value’ field, you must change the dropdown from ‘Greater Than’ to ‘Equals to’:

tracking events and goals 10

Then click ‘SAVE’ in Analytics.

13. You’ll see your goal in the list now. Next, click on the ‘Real-Time’ icon in the left menu:

tracking events and goals 10a

14. And choose ‘Events’:

tracking events and goals 11

15. Load your website in another tab or browser and you should see yourself as a visitor on the site in the ‘Right now’ area:

tracking events and goals 12

16. Now click the element on your website that triggers the Tag we created in the previous tutorial. In this case it’s the ‘Android Download’ button:

google play button

17. Back in Analytics, you can see the Event has been triggered:

goal set up

18. Under the ‘Real-Time’ menu at the left, click on ‘Conversions’ and you’ll see a similar page. You should also see a corresponding Goal triggered:

conversions

You don’t have to setup Tags to be Goals to track them as Events. If you only want to track events, skip setting up the goals and the Events will be tracked.

So there you go – now you know to track Events and Goals in Analytics using Tag Manager!

Trigger Analytics Property ID and Remarketing Tags Using Tag Manager

In this section I will show you how to use Tag Manager for Google Analytics and AdWords Remarketing. Using Tag Manager to track these things will prevent you having to add multiple snippets of code to your site and will speed up your Analytics and AdWords setup.

Please Note: I will refer you to the other Tag Manager tutorials above for certain aspects of the setup.

Here are the steps to follow to setup Analytics with Tag Manager:

1. If you haven’t setup Tag Manager on your site, please follow the steps in this tutorial first, then return to this lesson.

2. Login to your Tag Manager account here: https://tagmanager.google.com/

3. Go to the Tag Manager account you want to work with.

4. Click on the ‘Tags’ option in the left menu

5. In Part 1 of my this Tag Manager tutorial, you setup an ‘Analytics Variable’. Now you can use that variable to track page views and collect Analytics data for your website.

6. Click ‘NEW’ and make the title ‘Page Views’. Then, click anywhere in the ‘Triggering’ field:

click anywhere in the ‘Triggering’ field

7. Click on the ‘All Pages’ trigger:

Click on the ‘All Pages’ trigger

8. Now click anywhere in the ‘Tag Configuration’ field:

Click on the ‘All Pages’ trigger

9. And choose ‘Universal Analytics’:

choose ‘Universal Analytics’

10. Click the dropdown under ‘Google Analytics Settings’ and choose {{Analytics}}:

Click the dropdown under ‘Google Analytics Settings’ and choose {{Analytics}}

11. Click ‘SAVE’

Now we will add the Remarketing Tag. If you don’t need to add this tag, just skip to step 25 and finish the tutorial.

1. Finding the Remarketing Tag ID for your AdWords campaign is a whole other process – here is a good resource for setting up your Remarketing Campaign (which you’ll need to do before proceeding):

https://support.google.com/adwords/answer/3210317

2. Once you’ve setup a Remarketing Campaign, you should be given a code to add to your website. Rather than do that, just find and copy the Conversion ID (circled below):

copy the Conversion ID

3. Now follow steps 6 thru 8 above – NOTE: make the title ‘Remarketing’ rather than ‘Page Views’ in Step 6.

4. After you’ve clicked the ‘Tag Configuration’ field, choose the ‘AdWords Remarketing’ Tag:

choose the ‘AdWords Remarketing’ Tag

5. Now paste your Conversion ID into the Conversion ID field:

paste your Conversion ID into the Conversion ID field

6. You can generally leave the ‘Conversion Label’ blank – you will likely know if/when you need to fill that field. We will leave it blank.

7. Click ‘SAVE’.

8. Now click the ‘SUBMIT’ button at the top right, give your submission a Version Name and click ‘PUBLISH’

9. You should have installed the Tag Manager codes to your site already (in the section one of this Tag Manager tutorial). Now you can remove all old Analytics codes (and Remarketing codes) from your site – Tag Manager will trigger all of those from now on.

10. You can test your site to make sure everything is working by using ‘Tag Assistant’ in Google’s Chrome browser. Follow the link above to install it and learn how to use it.

If you follow these steps, you will shorten the amount of time you spend setting up Analytics and Remarketing for AdWords on your site.

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.

Back To Top
×Close search
Search