Setting up Google Tag Manager click tracking for buttons without links

Posted in: Code on January 19th, 2015

Over the last week I have been updating my resume in preparation to start the job hunting process. Being a bit of a geek, I also wanted to make sure I had a lovely online resume I could use to send some targeted traffic to, via Facebook and Twitter ads. However, when I tried to setup tracking for the button that triggered the popup overlay, I discovered that the Google Tag Manager tag that listened for link clicks wasn’t firing.

Essentially the issue was that there was not an actual url assigned to the anchor element as it was using # as a placeholder ( href="#" ). This means it won’t count as a link click in the eyes of Google Tag Manager, and since the rule was using gtm.linkClick, the rule didn’t fire and the event was not tracked.

What was the solution?

Turns out it was pretty simple. I just created another listener which listened to all clicks. Then I had to tweak my other rules so there weren’t any conflicts, and create a new tag that listened specifically for clicks on an element that had the class btn (one of the utility classes I just added to my WordPress theme). Here is a step by step, with screenshots…

Setup a new tag which listens for all clicks and fires on all pages.

Creating the new tracking tag
Creating the new tracking tag

Create a new firing rule that fires on when {{event}} equals gtm.click and when {{element classes}} contains btn.

Setting up the firing rule for gtm.click
Setting up the firing rule for gtm.click

Create a new tag with Tag Type Universal Analytics, Track Type Event and add the ButtonClick firing rule I just created. I categorized these as Button Clicks, set the action as Click and used label {{element text}} | {{element url}} | {{url}}. This automatically sets the label with the text of the element (eg, Buy Now), the URL of the element (eg, http://examplepage.com/buynow) and the URL of the current page (eg, http://examplepage.com/product1). Below is a screenshot of how the labels appear in Google Analytics. Finally, I set non-interaction to False as I figure if someone triggers my popover form they are interacting with my site, therefore, I don’t want that session to be counted in the bounce rate.

Setting up the rule parameters.
Setting up the rule parameters.
Event labels in Google Analytics
Event labels in Google Analytics

Finally, I went to preview and debug mode to ensure the Google Tag Manager tags were firing properly. They were working perfectly, so I created a version and published! Voila!

I’m now able to see when people are clicking on my buttons and (hopefully) contacting me about the job of my dreams!

Share This:

Leave a Reply