Google Tag Manager Event Tracking (Free Template)

Getting Started with Google Analytics Event Tracking in Tag Manager

UPDATED: 5/22/2020

Google Analytics event tracking gives you endless possibilities to track clicks, scrolls, form submits and many other behaviors as “events” that can get passed to your Google Analytics property for review. Implementing Google Analytics event tracking can be tedious, especially if you are using in-line event code snippets throughout the site (we wrote a whole blog post on traditional event tracking).

So why is event tracking through Google Tag Manager (GTM) so much better?

For starters, it significantly cuts down on development time. Once the initial <a href=”https://www.gravitatedesign.com/blog/google-tag-manager-setup-analytics/”>setup of Tag Manager</a> is completed, there is no more code to add to the site for tracking! Here are a few other reasons why event tracking through Tag Manager is the way to go:

1. Less code on-page.
   With conditional triggers, you can fire your event tags on certain pages so the event tracking code is not on every single page.
2. Easily track outbound link clicks.
   Create a link click trigger that fires on “some link clicks” where the Click URL does not contain your root domain. Pro Tip: Add the {{Click URL}} and the {{Page Path}} variable to the Action or Label of your event so you know what external URL was clicked and from which page of your website.
3. Create templates for all of your websites or client properties.
   By exporting the JSON file of your container in the admin settings, you can edit the dynamic fields, such as Analytics ID or domain name, in a text editor and import the container settings to another (more on this later).

Here’s the play by play for getting started with GTM event tracking:

1. Deploy Google Tag Manager to your website.

Add Google Analytics to Tag Manager, firing on all pages. If you prefer to keep Google Analytics outside of Tag Manager due to your gtag.js setup, Google Optimize speed, or for any other reason, just make sure that your events fire after your base analytics script loads.

 

2. Create Event Tracking Tags.

Make sure to think through how you would like to name your events by giving each parameter a name that makes sense for your tracking. See example below:

 

3. Fire Tags on Specified Triggers.

Once we have figured out what event parameters we want to send to Google Analytics we have to create conditions specifying when to send them. In our email click event example, we would fire the event trigger on all pages where a link is clicked with a URL that starts with “mailto:”

 

4. Preview, Debug, and Publish your container.

After confirming your event tag and triggers, we recommend putting Tag Manager in “Preview Mode” so you can debug and test your events with real-time tracking in Google Analytics. Once all of your events are firing correctly in your preview environment, you are safe to leave preview mode and publish your new Tag Manager container. Congratulations, you have now set up event tracking through Google Tag Manager!

 

 

Google Tag Manager Event Tracking Template:

Gosh Steven, is there a way that I can take use your event tracking setup instead of having to create all of the basic events myself?

Yes, yes you can. We have created a JSON export of what we consider to contain event tracking and Tag Manager basics (including a HotJar Tag). You will need to follow the following steps to get started:

1. Download our GTM Event Tracking Template.
2. Open the JSON file in a text/code editor (such as Atom) and follow the instructions closely at the top.
3. Import the JSON file (container template) to your new or existing GTM container
4. Override or merge the Tags into your container.
5. Preview, Debug, and Publish your GTM container.

How To Set up Google Tag Manager V2

1. Login to Google Tag Manager
2. Select Create Account
   1. Best practices would be for each business to have their own account, one business per account
   2. Name the account, most likely after the business name
3. After creating the account, you will need to create a container
   1. A container is for your website/app or multiple websites/apps. For example, if your website has two different domains, you would create a container for each domain
   2. Name your container after the domain
   3. Add the domains, this is optional but advised as you can add the actual domain here and a test or developers domain on it to test the tags on
   4. Click Create Container and Accept terms
4. After creating the container, you will see two Google Tags that will need to be added to all pages on your site, on as high in the <head> of the page as possible and one immediately after the opening <body> tag.
   1. If your site is a wordpress site the <body> tag is generally in the header file.

After adding the tag to your site, you will need to create tags and rules.

Creating a Tag and a Trigger: Adding Analytics through Google Tag Manager

To add an analytics tag through Google Tag Manager you will want to know a few things. One is that you want to have your UA number from your Universal/Google Analytics account and you want analytics to fire on all pages. To add analytics with Tag Manger:

1. Click New then select Tag
2. Name the tag “Google Analytics” (or Universal Analytics)
3. Select “Google Analytics” as product
4. Select “Universal Analytics” or “Google Analytics” as tag type depending on your code
5. Configure your tag by entering the UA number from your tracking script
   • You will need to add your UA number to multiple tags, so it would be easier to create a variable that includes your UA number so you don’t have to remember your UA number each time. I’ll walk you through this below.
6. Select “Page View” for tracking type
7. Enable Display Advertising Features
8. Set this to Fire on “All Pages”
9. Click save to save tag

To publish a tag to your site, begin by clicking the down arrow in the top right of the screen and select “create version” to create your first version. After creating a version, click on the down arrow again and select”preview” to view the tags on your site and I suggest clicking on “debug” so you can test each tag to ensure they are firing. This will open up your site with a window at the bottom showing what tags have been fired and what ones haven’t (see photo below). This is an amazing feature and I suggest using it before publishing any tags to your site just to ensure your tags are all firing.

How To Add your UA Number as a Variable in Google Tag Manager

Setting up your UA number as a variable will help you reduce the margin for errors when creating new tags.  To add your UA number as a variable in Google Tag Manager do the following:

1. Click on “Variable” in the left navigation
2. Scroll down below the “Enabled Built-In Variables” to the “User-Defined Variables” and select “New”
3. Name your variable “UA Tracking Code”
4. Select “Constant”
5. Configure variable by adding your UA number in the field
6. Click “Create Variable”

Now I’ll show you how to set up:

• Outbound Link Clicks
• Mobile Phone Clicks-to-Call
• Email Link Clicks
• File Downloads
• Internal Link Clicks

Outbound Link Clicks

Outbound link clicks are when a user clicks on a link that leaves the your website. Follow these steps, starting from your container overview page:

1. Click “New Tag” or “Add New Tag”
2. Name Tag by clicking the Edit Icon (pencil icon)
3. Choose your product by selecting “Google Analytics”
4. Choose your tag type by selecting Universal or Classic Google Analytics
5. Enter your Tracking ID or {{UA Tracking Code}}
6. Select Track Type by select “Event”
   1. Category to: Outbound Links
   2. Action to: Click
   3. Label to: {{click url}}
   4. Value can be left blank
   5. Non-Interaction hit can be false
   6. Click “continue”
7. Choose which option to Fire On
   1. Select “More”
   2. Create New Trigger by selecting “New”
      1. Name Trigger “Outbound Links”
      2. Select “Click”
      3. Configure “Trigger” to target “Just Links” and select continue
      4. Click “Continue”
8. Choose Enable When
   1. Page URL
   2. matches RegEx
   3. .*
9. Set Fire On to
   1. Click URL
   2. Does Not Contain
   3. YOURDOMAIN.COM
10. Click “Create Trigger”
11. Click “Create Tag”

Phone Clicks to Call

This will track anytime a user clicks on a phone number from a mobile device. Follow these steps, starting from your container overview page:

1. Click “New Tag” or “Add New Tag”
2. Name Tag by clicking the Edit Icon (pencil icon)
3. Choose your product by selecting “Google Analytics”
4. Choose your tag type by selecting Universal or Classic Google Analytics
5. Enter your Tracking ID or {{UA Tracking Code}}
6. Select Track Type by select “Event”
   1. Category to: Contact
   2. Action to: Phone
   3. Label to: {{click url}}
   4. Value can be left blank
   5. Non-Interaction hit can be false
   6. Click “continue”
7. Choose which option to Fire On
   1. Select “More”
   2. Create New Trigger by selecting “New”
      1. Name Trigger “Tel Links”
      2. Select “Click”
      3. Configure “Trigger” to target “Just Links” and select continue
      4. Set Enable When to
         1. Page Url
         2. Matches RegEx
         3. .*
      5. Set Fire On to Some Clicks
         1. Click URL
         2. Starts With
         3. Tel:
      6. Click “Continue”
      7. Click “Create Trigger”
8. Click “Create Tag”

Email Link Clicks

This will track anytime a user clicks on an email link on your website. Follow these steps, starting from your container overview page:

1. Click “New Tag” or “Add New Tag”
2. Name Tag by clicking the Edit Icon (pencil icon)
3. Choose your product by selecting “Google Analytics”
4. Choose your tag type by selecting Universal or Classic Google Analytics
5. Enter your Tracking ID or {{UA Tracking Code}}
6. Select Track Type by select “Event”
   1. Category to: Contact
   2. Action to: Email
   3. Label to: {{click url}}
   4. Value can be left blank
   5. Non-Interaction hit can be false
   6. Click “continue”
7. Choose which option to Fire On
   1. Select “More”
   2. Create New Trigger by selecting “New”
      1. Name Trigger “Email Links”
      2. Select “Click”
      3. Configure “Trigger” to target “Just Links” and select continue
      4. Set Enable When to
         1. Page URL
         2. Matches RegEx
         3. .*
      5. Set Fire On to Some Clicks
         1. Click URL
         2. Starts With
         3. mailto:
      6. Click “Continue”
      7. Click “Create Trigger”
8. Click “Create Tag”

File Downloads

This will track anytime a user clicks on a file to download that matches one of the predefined file types. If you want to track additional file types, simply add them to the list in step 22. Follow these steps, starting from your container overview page:

1. In the left navigation select Tags, Click “New”
2. Name Tag by clicking the Edit Icon (pencil icon)
3. Choose your product by selecting “Google Analytics”
4. Choose your tag type by selecting Universal or Classic Google Analytics
5. Enter your Tracking ID or {{UA Tracking Code}}
6. Select Track Type by select “Event”
   1. Category to: Downloads
   2. Action to: {{click element}}
   3. Label to: {{click url}}
   4. Value can be left blank
   5. Non-Interaction hit can be false
   6. Click “Continue”
7. Choose which option to Fire On
   1. Select “More”
   2. Create New Trigger by selecting “New”
      1. Name Trigger “File Downloads”
      2. Select “Click”
      3. Configure “Trigger” to target “Just links” and select continue
      4. Set Enable When to
         1. Page URL
         2. matches RegEx
         3. .*
      5. Set Fire On to Some Clicks
         1. Click URL
         2. Matches RegEx (ignore case)
         3. ^.*.(7z|aac|arc|arj|asf|asx|avi|bin|csv|doc|docx|exe|flv|gif|gz|gzip|hqx|jar|jpe?g|js|mp(2|3|4|e?g)|mov(ie)?|msi|msp|pdf|phps|png|ppt|qtm?|ra(m|r)?|sea|sit|tar|tgz|torrent|txt|wav|wma|wmv|wpd|xls|xml|z|zip)$
      6. Click “Continue”
      7. Click “Create Trigger”
8. Click “Create Tag”

Internal Link Clicks

This might not be needed for most sites, but it can help you identify the top clicked links on individual pages and it’s just more data in case you need it. Follow these steps, starting from your container overview page:

1. Click “New Tag” or “Add New Tag”
2. Name Tag by clicking the Edit Icon (pencil icon)
3. Choose your product by selecting “Google Analytics”
4. Choose your tag type by selecting Universal or Classic Google Analytics
5. Enter your Tracking ID or {{UA Tracking Code}}
6. Select Track Type by select “Event”
   1. Category to: Internal Links
   2. Action to: Click
   3. Label to: {{click url}}
   4. Value can be left blank
   5. Non-Interaction hit can be false
   6. Click “continue”
7. Choose which option to Fire On
   1. Select “More”
   2. Create New Trigger by selecting “New”
      1. Name Trigger “Internal Links”
      2. Select “Click”
      3. Configure “Trigger” to target “Just Links” and select continue
      4. Set Enable When to
         1. Page URL
         2. Matches RegEx
         3. .*
      5. Choose Fire On “Some Clicks” and set to when Click URL contains YOURDOMAIN.COM
      6. Click “Create Trigger”
   3. Click “Continue”Create New Trigger by selecting “New”
      1. Name Trigger “Javascript Void”
      2. Select “Click”
      3. Configure “Trigger” to target “Just Links” and select continue
      4. Set Enable When to
         1. Element URL
         2. does not match RegEx (ignore case)
         3. .*javascript:void.*
      5. Click “Create Trigger”
8. Click “Create Tag”

 

Google Tag manager was created to make it easier for marketers and their teams to add/edit/remove website tags without the help of a web developer. This includes conversion tracking, site analytics, re-marketing, event tracking, and more. While it isn’t a new feature from Google, it is something you should learn to use.