How to Set Up Click Tracking in Google Tag Manager | webFEAT Complete
Click
Mar 15

How to Set Up Click Tracking in Google Tag Manager

Reading Time: 7 minutes

I have to admit, I waited too long to learn about Google Tag Manger (GTM) and tracking the click of buttons, downloads, form submissions, etc. Now that I’ve learned about it and executed the implementation many times, I wanted to provide a resource you can refer to, until you’ve mastered it yourself.

It will help you learn from users to make strategic website adjustments, and provide data and attribution that you can showcase to clients. For business owners, CMO’s, Marketing Directors, etc. tracking can guide strategic digital marketing investments based on data, and show you exact ROI on your digital marketing investment.

Let’s get to it.

Installing Google Tag Manager

  1. https://tagmanager.google.com/
  2. Login if you’re not already
  3. Create an account (Fill in the information, it’s straightforward)
  4. Implement the head tag, and the body tag on your website. Check that they’re implemented correctly with the “tag assistant” toolbar extension for Chrome. In my experience, you don’t need to have the body code “immediately” after the opening body code as they instruct. So don’t stress! These two codes will allow you to fire other codes (google analytics, and set up tracking triggers).

WordPress Tip: If you’re installing with WordPress, your child theme options may offer a place to implement the code. You can also implement in appearance, editor. We’ve had issues in the past with codes dropping off from updates in there, so we prefer to use the child theme or an insert header/footer plugin.

Just like that, tag manager is installed.

Firing Google Analytics

Now that tag manager is installed. Let’s get rid of those excess tags. I’ll cover Google Analytics here.

  1. Add a new tag. There is a big button in your workspace allowing you to do this, or you can go to “tags” in the left hand nav, and add a new one
  2. For firing GA and click tracking, you’ll select “Google Analytics-Universal Analytics”
  3. Track Type is Page View
  4. The way I learned, you enable overriding settings, and enter your UA tracking ID that can be found in the Google Analytics settings, under property, tracking id, tracking info
  5. Save that tag
  6. Now that the tag is setup, you’ll need a trigger that will make the analytics code fire. So click “triggering” if you haven’t been prompted already, and select “All Pages”. This essentially says that the analytics code will be fired on all pages, whenever someone visits your website.
  7. Now click submit, make any notes on this update if you’d like (I would just say GA), and publish!
  8. Remove your old analytics code! If you leave it in there, there won’t be duplicate data, but you’ll have an unnecessary code that could cause conflicts, and it also is another element that needs to load when someone visits your site, which doesn’t help your page speed/load time

Tip: Don’t forget to submit/publish the changes you’ve made to the workspace! Otherwise, the changes aren’t made live.

GA Configuration GTM

Clicks You Can Track and How to Track Them

You can track pretty much anything, as long as it’s not embedded in a frame, pulling from another domain (happens with payment gateways sometimes).

I typically track clicks on:

  • ‘mailto:’ or ‘tel:’ links
  • Form submission buttons
  • If you have a multi-step form, the next/continue button on those forms
  • PDF downloads (brochures, spec sheets)
  • Add to Cart Buttons
  • Place Order Buttons
  • MORE

All you need to in order to track is a variable of some sort. You can view these in the preview function of tag manager, and as a backup plan, by inspecting the element with chrome dev tools. In order to add the variable you find in tag manager for the trigger, you’ll need to enable those variables. You can do this by clicking “Variables” in the left hand side navigation, clicking configure, scroll down to clicks, and click all 6 boxes (Click element, classes, ID, Target, URL, Text).

GTM Preview

Before we get into how you track, I want to cover one thing. When you set up these tags for click tracking, we’ll use the “Event” track type, instead of “Page View” like we did with GA. This will make some additional fields available, and these fields are specifically for tracking purposes and organization. When you go into analytics and look at the events overview (under behavior), you will have the option to break down the data by category, action, and label. So make them specific!

Category Action Label GTM

You can also enter these events as “Goals” using the category, action and label you choose. We’ll touch on this more later.

Let’s break click tracking down by what you’re tracking.

Buttons

Click preview in Google tag manager to enter preview mode. When you you go to a website in preview mode and have the Google Tag Assistant ext. installed, you can see what tags are firing, and all of the variables for each click. You then setup a tag, and associated event trigger. Your trigger should be on “all elements”, then set it up to work for some clicks. You’ll select a unique variable (see tip 2). In the example below, if I see that other buttons have different Click ID’s, it might be good to use this to track this button. So the trigger would be: all elements, some clicks, Click ID contains gform_submit_button_32.

GTM Preview Variables

Tip: Use CTRL + Click to open links in a new tab, so you can have time to look at the variables for your gtm.click. Each time you click, you’ll see in the summary section that a gtm.click will come up, and you can look at information associated with that click. Sometimes, the button will not prompt anything to happen. This is when I recommend utilizing dev tools.

Tip 2: Choose a unique variable, otherwise you may be tracking extra clicks that are not of interest! For example, if a button used to place an order has the same click class as a button that takes users to the contact us page, you’ll need to select a different variable to make sure the click tracking differentiates the two buttons with your tracking.

Mailto:, tel:, and .pdf

These are the easiest to track. You can simply use the “Click URL” variable.

You’ll setup a new tag, select GA, track type will be an event, run through that, override and enter your UA number. Then when setting up the trigger you can select all elements, or just links. Set the trigger to fire on some clicks, by click URL. If you want to track anyone that clicks any mailto: or tel: link, you just setup a tag and trigger for: click URL contains tel:, and then one for mailto:. With a PDF, you can do the same thing. In analytics you can setup secondary dimensions in the reports that let you see the pages the click came from, and the URL’s. If you’d like to have that all setup in tag manager, you’ll just need to setup a unique tag and trigger for each PDF click/download. If you want to track a specific PDF, you’ll just need to setup the trigger as: Click URL, equals, and then enter the specific PDF URL.

Click Trigger mailto:

Tip: A common error when setting this stuff up is selecting the wrong variable, or forgetting to submit/publish your workspace. If you’re testing using the preview function and your tags aren’t firing, check on these. Also, if you see a class and it says something like: ‘gform_1_2’ as a click class, you don’t need to include the apostrophe’s when setting up your trigger.

Tip 2: If you’re testing and utilized the above tip, and just can’t seem to track something, get a hold of Google’s Tag Implementation team. They will be able to help you resolve the issue, or come to the conclusion that something isn’t trackable.

Tip 3: Watch this video if you’re struggling to track, or if you want to refine your skills! Thank you Measureschool!

Goal Tracking with Events

Event tracking with the Category, Action, and Event is a little bit harder to interpret in Google analytics, as opposed to Goal Tracking. Fortunately, you can use Goal tracking, set that you’re tracking an event, then enter your Category, Action, and Event, and then your events will populate as goals, or conversions.

This will make your goals easier to interpret, and attribute, but it also has the benefit of importing into Google Ads if you’re running a campaign.

Event Goal Tracking in GA

Track Clicks and Impress Your Clients

All of our clients have goals and expectations for their campaigns. On a website, we should be able to track what aligns with our clients goals. If I have a client that is looking to drive more traffic to their website, get more people looking at their PDF brochures on certain products, and more request for quote forms filled out, click tracking allows us to track all of that. On top of that, we can trace it back to show the source of the traffic (search results, social media, ads, etc.) to show clients that SEO or PPC efforts are working, and maybe even identify other traffic sources that deserve an investment.

I’d love to hear about your experiences with GTM in the comments! If you’re still struggling, I’m happy to help. If this post helped you set some tracking up for your client, I hope you’ll share! Lastly, if I missed something or something in this post isn’t optimal, I’m always open to feedback and constructive criticism.

Thank you for reading!

 

 

About The Author

Ray is the SEO and Google Ads Manager at webFEAT Complete. He's passionate about improving the visibility of businesses online through their websites. When out of the office, he's probably traveling, eating or exercising.

7 Comments

  1. Justin Marshall
    March 16, 2019 at 9:06 am · Reply

    This is some grade A blogging work here Ray. Thanks for taking the time to research and detail all of this information! Sounds like Tag Manager has some really powerful features that And even more that haven’t even been discovered. Def gonna use this guide in the future.

    • Ray Cheselka
      March 17, 2019 at 10:46 am · Reply

      Justin, it’s my pleasure! Thank you so much for the kind words! I always want my posts to be helpful to others, and I’m glad you’ll be utilizing it!

  2. Harmony
    April 26, 2019 at 6:52 pm · Reply

    I can’t seem to find any element to use for tracking button clicks. The data layer info is mostly blank. The inspected element is followed by an .

  3. Harmony
    April 26, 2019 at 6:53 pm · Reply

    I can’t seem to find any element to use for tracking button clicks. The data layer info is mostly blank. The inspected element is div class = “small-btn” followed by an a href.

    • Ray Cheselka
      April 29, 2019 at 9:39 am · Reply

      Hi Harmony!
      Did you try creating this trigger: Click Classes equal small-btn ?
      If you’re still experiencing trouble, please send me an email and I’m happy to help: ray.cheselka at webfeatcomplete dot com.

  4. Robert Lodi
    May 2, 2019 at 12:52 pm · Reply

    Thank you Ray – this was incredibly helpful!

    • Ray Cheselka
      May 2, 2019 at 1:10 pm · Reply

      My pleasure, Robert! Thank you for reading and commenting!

Leave a reply

Your email address will not be published. Required fields are marked *