Google Tag Manager: Tags & Triggers

Google Tag Manager (GTM) is an extremely powerful tool for your website, but it can be a bit confusing and intimidating for new users. This guide will hopefully cut through the confusion and teach you how to configure a few very versatile tags. Once completed you should have a general understanding of the capabilities of GTM and how you could implement tags on your website. The tags we'll create will be triggered by common interaction that would occur on most websites. This will allow you to easily replicate what you learn. The Interactions that will trigger the tags will be for:

• Pageviews: Anytime a user visits a page, a tag will be triggered. Which can be useful for launching 3rd party script, javascript code, or anything else that you would need to launch once a page loads.
• Clicks: Once a user clicks on an element, we will execute a tag. This technique can be used to push events to Google Analytics, to launch JavaScript and many other scenarios.
• Visibility: We'll create a tag that fires once a certain element becomes visible on the screen. This could be used to track popup modals or if a user reaches a certain section of the site like the footer.

What exactly is a Tag?

Tags are chunks of code that can be fired on a web page when a certain action is performed. These chunks of code could add extra HTML to your page, fire tracking pixel, send data to analytic platforms and much more. Here is a shortlist of tag types you could choose from:

What is a Trigger?

A trigger is used to listen for a specific event to happen on a webpage. We can assign tags to triggers, so when the event occurs the tag would launch. Here's a list of common triggers you could choose from:

Variables

A variable is a place to store data that can be accessed at a later time. In GTM variables store information that takes place in the current pageview. When using a GTM variable, the needed syntax is the variable name surrounded by curly brackets: {{Variable}}. We will use variables as the hook for creating triggers, to label our event, and other more advanced uses.

Out of the box, GTM only enables a handful of variables. We are going to have to enable a few built-in variables and create custom variables before we can proceed to build our tags and triggers.

Enabling Built-in GTM Variables

To enable the needed built-in variables click Variables in the left navigation. Then in the Build-In Variables section, click Configure.

You should now see a list of variables to choose from, we'll want to select all options in the Clicks and Visibility categories (listed below). Once the variables are enabled, click the on the top-left to return to the variables screen.

Create Custom Variables

Now we'll need to create a few new custom variables. The most important custom variable we'll create is for your Google Analytics Tracking ID. This variable will be used to pass data from GTM to Google Analytics. The other variables aren't exactly needed, but they will help you understand the concept of variables and how to utilize some of the different types. Let's begin:

GA Settings Variable: GA Tracking ID

How to create the GA Tracking ID variable:

1. Select New from the Variables view.
2. Name the variable GA Tracking ID.
3. Click the box labeled: Variable Configuration.
4. Select Google Analytics Settings.
5. Enter your Google Analytics Tracking ID.
6. The remaining settings can stay at their default state.
7. Select Save.

How to obtain your Google Analytics Tracking ID

1. Open Google Analytics in a new tab
2. Click Admin (bottom left)
3. Click Property Settings (middle pane)
4. You should now see your Tracking Id, it will look something like this: UA-123456789-1.

DOM Element Variable: H1 Tag

DOM Element Variable: This variable allows us to store the text from a DOM element or a DOM element's attribute. If there are multiple occurrences of the same DOM element, the variable will store the contents of the first instance of the element.

In this example we are going to pull out text from the <H1> and store it in a DOM Element Variable. This concept could be use for any other elements on your website. As a best practice, every page of your website should only contain a single H1 tag, so we won't have to worry about multiple occurrences of this tag.

1. Select New from the Variables view.
2. Name the variable H1 Tag.
3. Click the box labeled: Variable Configuration.
4. Variable Type: DOM Event.
5. Selection Method: CSS Selector.
6. Element Selector: h1.
7. Attribute Name: blank.
8. Select Save.

Auto-Event Variable: Name Attribute

Auto-Event Variable: Stores specified data from an element after the element performs an action (click, submit, etc).

This time we are going to store the value of the name attribute of a targeted element.

1. Select New from the Variables view.
2. Name the variable Attribute - Name.
3. Click the box labeled: Variable Configuration.
4. Variable Type: Auto-Event Variable.
5. Change the second Variable Type to: Element Attribute.
6. Attribute name: Name.
7. Select Save.

JavaScript Variable: Title Tag

JavaScript Variable: Is used to set a specific global JavaScript variable.

We are going to store the value of the <Title> tag in a variable using a JavaScript property.

1. Select New from the Variables view.
2. Name the variable Title Tag.
3. Click the box labeled: Variable Configuration.
4. Variable Type:JavaScript Variable.
5. Global Variable Name: document.title.
6. Select Save.

How to Trigger a Tag on Every Pageview

Many websites use 3rd party scripts for tracking or other various reasons. This is very common and easy to configure with GTM. In the example below, we'll fire a tag that will place the HotJar Script on every page of our site. There is actually a unique tag for HotJar that would make this process even easier, but I wanted to show you how the Custom HTML tag works. Either method will accomplish the same task.

Custom HTML Tag

1. Click Tags on the Left Navigation.
2. Click New (top-right).
3. Name your tag. example: HotJar Script
4. Click the box labeled: Tag Configuration.
5. Select Custom HTML.
6. Paste in your script or tracking pixel.
7. Click the box labeled: Trigging.
8. Select All Pages.
9. Click Add (top-right).
10. Click Save.

Unique Pageview Trigger

Above, we triggered a tag for all pages. Sometimes you'll only need to fire a tag on certain pages or exclude certain pages from the tag. To do that we will have to create a custom trigger. So follow the steps above to create your tag, but we'll need to deviate from step 8:

1. Create a new trigger by clicking the in the top-right corner of the trigger selection screen
2. Name your trigger.
3. Click the box labeled: Trigger Configuration.
4. Select Page View.
5. Select Some Page Views.
6. In the First Dropdown Select Page Path.
7. Select your Operator in the 2nd dropdown(contains, does not contain, etc).
8. Enter the desired path.
9. Click Save to save the Trigger.
10. Finally Save your Tag.

Testing Our Page View Tag

Google Tag Manager has a helpful debug tool that allows us to test our tags before publishing. To active the debug mode:

1. Click the Preview button located at the top-right of the Tag Manager dashboard.
2. You should now see the orange box indicating that you are in Preview mode.
3. Visit a page where the tag should fire and the debug window should appear at the bottom of the window.
4. If you configure the tag correctly you should see it listed under Tags Fired On This Page.
5. Once confirmed, return to the GTM dashboard and select Leave Preview Mode.

Google Analytic Events Triggered by Clicks

In this example we'll fire an event tag once an element is clicked. This is one of my most commonly used GTM configuration. Below is an example of the button we are going to track and the code associated with it.

<button type="button" class="btn btn-primary unique1234" name="GTM-Button">Fire Event</button>

1. Click Tags on the Left Navigation.
2. Click New (top-right).
3. Name your tag. example: TEST-GTM Button
4. Click the box labeled: Tag Configuration.
5. Select Google Analytics: Universal Analytics.
6. Tracking Type: Event.
7. You can configure the event to match your site's event naming convention. For this example we are going to use some of the variables we've previously created. The name attribute for the button will be assigned to the Action and the Label will contain the H1 tag for the page.
• Category: GTM TESTING
• Action: {{Attribute - Name}}
• Label: H1: {{H1 Tag}}
• Google Analytics Setting: {{GA Tracking ID}}
  View Event Configuration
  
8. Click the box labeled: Trigging.
9. Create a new trigger by clicking the in the top-right corner.
10. Name your trigger. ex TEST-GTM Button Click
11. Click the box labeled: Trigger Configuration.
12. Select All Elements under Click.
13. Select Some Clicks.
14. In the First Dropdown Select Click Classes.
15. Select your Operator. I'm going to use contains.
16. Enter the desired class. For our example it will be: unique1234.
17. Click Save to save the Trigger.
18. Finally Save your Tag.

Testing Our Tag in Preview Mode

1. Click the Preview button located at the top-right of the Tag Manager dashboard.
2. Visit a page where the tag should fire and the debug window should appear at the bottom of the window.
3. Click the element and you should see it fire in the "Tags Fired On This Page" section.
• If the page opens a new window, hold CTRL while clicking. This will open the link in a new window so you can view the fired tag.
4. Click on the triggered tag to view more details.
5. The data we configured for the event should be listed here (see below).
6. Once confirmed, exit preview mode.

Trigger Multiple Tags when an Element is Visible

For the final example, we are going to two Tags using a single Trigger. The trigger will fire once the user views 25% of the footer. This will indicate that they have reached the bottom of our page.

When our trigger is executed, an event tag will be triggered as well as some simple jQuery code.

Trigger: Element Visibility

This time we are going to start by creating our Trigger first.

1. Click Triggers on the Left Navigation.
2. Click New (top-right).
3. Click the box labeled: Trigger Configuration.
4. Select Element Visibility under User Engagement.
5. Selection Method: CSS Selector.
6. Element Selector: Footer. This is selecting <footer>.
7. When to fire this trigger: Once per page.
8. Minimum percent visible: 25.
9. I only want the tag to fire on this page so I'm going to configure the "This trigger fires on" setting.
• Page URL
• Contains
• /gtm-getting-started-tags-triggers/
10. Click Save to save the Trigger.

Tag: Google Analytics Event

1. Click Tags on the Left Navigation.
2. Click New (top-right).
3. Name your tag. example: TEST-GTM Event Bottom of Page
4. Click the box labeled: Tag Configuration.
5. Select Google Analytics: Universal Analytics.
6. Tracking Type: Event.
7. We'll create the tag like before except we'll use the Title Tag variable we've created above.
• Category: GTM TESTING
• Action: Bottom of Page
• Label: {{H1 Tag}}
• Google Analytics Setting: {{GA Tracking ID}}
8. Click the box labeled: Trigging.
9. Now select the trigger we previously configured.
10. Finally Save your Tag.

Tag: Custom jQuery

For our second tag, we are going to fire some simple jQuery to change the content of below:

You haven't visited the bottom of the page.

1. Click Tags on the Left Navigation.
2. Click New (top-right).
3. Name your tag. example: TEST-GTM jQuery Bottom of Page
4. Click the box labeled: Tag Configuration.
5. Select Custom HTML.
6. Add your script.
7. Click the box labeled: Trigging.
8. Now select the trigger we previously configured.
9. Finally Save your Tag.

Testing Our Tag in Preview Mode

1. Click the Preview button located at the top-right of the Tag Manager dashboard.
2. Visit a page where the tag should fire and the debug window should appear at the bottom of the window.
3. Scroll to the bottom of the page.
4. Both Tags should have fired.
• If you scroll to the bottom of my page, you'll see that the text above has changed. meaning the script has fired correctly.
5. Once confirmed, exit preview mode.

Submit Changes

Now that we have confirmed all of our tags are triggering correctly we can publish them. Simply select Submit next to preview on the top of the dashboard. Name your changes and give a brief summary of what you've created. Finally select Publish.

Conclusion

Hopefully this guide has helped you understand the capabilities of Google Tag Manager. There are many advanced techniques I plan to cover in future articles so please check back soon.