Google Tag Manager: Tracking Button Clicks with GTM

Why track button clicks in Google Tag Manager?

Google Tag Manager is a very powerful tool, that enables marketers and web developers to tag actions on a website in a single web-based interface. Sometimes an action that a marketer needs to tag is as simple as clicks to a button. Depending on the site's business, a button click could be the main conversion action (i.e. an affiliate link) or it could be an engagement micro-conversion (i.e. open a video). In either case, a marketer would want to track a button, and thankfully Google Tag Manager makes it easy to do so.

 

How to track button clicks in Google Tag Manager

In order to track button clicks in Google Tag Manager, we need to create a trigger that fires whenever that button is clicked. How do we do that?

First we identify the button(s) you're looking to track. Then we right-click on the button and select inspect element. We’ll then see the html code associated with the button we clicked on.

This example does not have an id or class attribute, so we need to use other variables to properly track it.

In the code, find an attribute that is either unique to the single button that you're tracking or uniform across the many buttons that you're looking to track. If you're tracking a single button, it's best to use the id of the button if there is one, since id is an attribute that is unique to a single element on a page. If not, other characteristics may be used such as the text on the button in combination with the path or full URL of the page where the button resides. You can use Tag Assistant in order to verify that the elements you want to use are in fact correct. If you're tracking multiple similar buttons, it's best to use the class of these buttons if it is the same across these buttons, but not inclusive of other buttons that you don't want to track at this time. We are tracking a single button in this case, so we’ll use Click Text and Click URL in order to create our trigger.


In GTM, create a new trigger

Select the type Click - All Elements. Then select the "Some Clicks" radio button under This trigger fires on, and then select the firing condition. This particular trigger will fire on all clicks when the Click Text equals CONTACT US, and the Click URL contains #contact-form. Then name your trigger and save it.


Apply this trigger to a tag. You can add a blank HTML tag to your container and apply this trigger if you want to QA before sending false-positive data to GA or other platforms.

How do I QA my button click trigger?

In Google Tag Manager, go to Tag Assistant by clicking the Preview button near the top-right of the interface.

Then enter the URL of a page with your button in Tag Assistant, and then click on the button that you created the trigger for on your site. Did your tag show up in the “Tags Fired” section? If so, then your button click trigger works. If not, then you may need to go back to step 2 above and try another attribute. Also make sure that if your condition uses "equals," that your attribute appears exactly in GTM as it does in the site code.

Our blank tag has successfully fired.

Our blank tag has successfully fired.

If you need help with implementing click tracking or updating your entire Google Tag Manager container, don't hesitate to contact us via the chat or form below. We do full GTM audits, implementations, and customizations.