Blog

track button clicks with google tag manager

How to Track Button Clicks with Google Tag Manager

Tracking button clicks with Google Tag Manager can be helpful if you do not have access to your backend. It’s also helpful if you use plugins that do not give you the option to add tracking.

For Media Cause client, Global Down Syndrome Foundation, we wanted to track petition signatures. The petition uses a WordPress plugin called “SpeakOut! Email Petitions,” which does not allow for install tracking.

The solution: Track conversions (button clicks) with Google Tag Manager (GTM).

 

Before You Begin

Create a GTM account.

Install the GTM pixels on your website. At the very least, make sure it’s on the page with the button. This is the only time you need backend access.

 

Summary

1. Create and test a generic click trigger

2. Filter the click trigger to the button you want to track

3. Create an event tag based on the trigger

 

Steps

1. First, we want to create a generic click trigger. In GTM, go to Triggers > New.

2. Create a trigger called Generic Click Trigger:
How To Track Button Clicks with Google Tag Manager

3. Click on the Trigger Configuration box > select All Elements under Click > select All Clicks.

4. After you save, we now need to filter the clicks to our button.

5. We need to make sure GTM will track click variables, because they’ll be our filters. Go to Variables.

6. Click “Configure” under Built-in Variables:
How To Track Button Clicks with Google Tag Manager

7. Scroll down and check all the  checkboxes under Clicks:
How To Track Button Clicks with Google Tag Manager

8. Now, on the top right of the screen, click the down arrow next to the Publish button > click Preview.

9. In a new tab, open the page with the button on it. If you already have it open, refresh. You should see the GTM console at the bottom of the screen.

10. Notice the Summary on the left. Notice how many elements it has.  We are going to click the button to see what new elements show up in the Summary.
How To Track Button Clicks with Google Tag Manager

11. Fill out your form if you have one.

12. When you are ready to click your button, hold down your keyboard’s COMMAND button and click the button. The COMMAND key opens the link in a new tab.

13. In your original tab, the Summary should have new elements. My new one is gtm.click #5.

It might be hard to tell which new element was triggered by your button click. Click on the variables tab to see which gtm.click is the one for your button. For me, I can tell #5 is the correct one because the “Click Text” is ADD YOUR NAME, which matches the button. In a nutshell, these variables are associated with your button. Now, we want to filter our Generic Click Trigger using these variables.

How To Track Button Clicks with Google Tag Manager

14. Back in your GTM tab, go to Triggers > click on your Generic Click Trigger. Re-name it to what you want to track. I titled mine “Signed Research Funding Petition.”

15. Under Trigger Configuration, change All Clicks to Some Clicks. Then when it comes to the dropdown bar, I’m choosing Click Text and pasting the Click Text that the Variables box gave me:
How To Track Button Clicks with Google Tag Manager

If, for some reason, you don’t have anything for Click Text, you can also use Click Classes and copy the appropriate value.

16. Now we want to create our actual event tracking tags. Go to Tags > click New.

17. Name your tag. I named mine, “GA – Event – Signed Research Funding Petition”.

18. Click on the Tag Configuration box >  your Tag Type should be Universal Analytics. Put your Google Analytics ID. This can be found by going to Google Analytics > clicking your property > Admin > Property Settings > copy your Tracking ID. Copy the whole thing, including “UA-”

19. Choose Event as your Track Type.

20. Set your event tags. What events do you want to fire off when someone clicks the button?
How To Track Button Clicks with Google Tag Manager

21. Click the Triggering box. You should see the trigger you created. Mine is “Signed Research Funding Petition.” Choose that.

22. Now we want to test this out again but with the new event tag! Click Refresh to refresh our preview mode.

23. Refresh the tab you have open with your button.

24. Click on your button (remember to hold COMMAND so your current tab doesn’t change).

25. View the “Tag” tab and the button click should have triggered a gtm.click variable with your new tag:
How To Track Button Clicks with Google Tag Manager

26. Go into Google Analytics > Real-time > Events, and you should see it.

PRO TIP: You can then go on to add this event as a goal in Google Analytics, so you can see the conversion rates between different sources.

Tracking your conversions is key to success. If your organization needs help tracking goals and conversions, get in touch to see how we can help you.

Michelle Thai

michelle@mediacause.org

Michelle began her work with marketing for nonprofits as an intern for Californians for Justice, where she played a large role in event and grassroots campaign planning. Expanding her skillset, Michelle moved to GlobalMojo, where she helped execute user acquisition strategies for several foundations, including the Jamie Oliver Food Foundation and the Avril Lavigne Foundation.

  • Maria Ines Baradell

    I need to tell you this an amazing step-by-step. I rarely comment in blog posts, but this one was so helpful! Thank you for taking the time to explain it in detail.

    • Michelle Thai

      Thanks so much for taking the time to share your feedback, Maria!

  • Venkateswara Reddy Mule

    Thanks @Michelle Thai for post the good article
    can i do the same thing in Google Optimize A/B testing

    • Michelle Thai

      Hey Venkateswara, sorry for the delayed response. I have not tried tagging different buttons that were implemented via Google Optimize. I would imagine that if they had unique variables, e.g. different text, it should work. Did you already try it out? Let me know if it worked for you.

  • Steve Godlewski

    Great Post Thank You. Best one I have read. I do these then always forget how after a couple up then when its time for another I always forget how. This time I found your post and it was so much easier.

    • Michelle Thai

      Thanks for your comment Steve. I’m the same way – sometimes I need to go back to this blog post too!

  • Glynn Rieckhoff

    Love the post, easy to read, excellent step-by-step, really can’t go wrong. Thanks!

  • Paul McGee

    Thanks for the super clear explanation Michelle. I want to use this to track ‘plays’ of my audio files. The only problem is that when you click the play button, the click text says ‘play’. So while I can use that to trigger the tag, it triggers every time anyone plays ANY audio file on my website. And I have almost a hundred different ones. Do you have any idea if there’s a solution to this?

  • Hemanshu Belani

    Superb Article!!. I followed all the steps and its working fine on desktop. But mobile click are not being tracked in google analytics. Is there some other configuration for Mobile clicks??

  • Vasco Vasconcelos

    Thank you a thousand times for this post! I am a new follower as of right now!

  • preetishpanda

    Great post indeed! Made me comment on this blog 🙂

  • Jovanna

    Thank you for this step by step guide. I run in to an issue with the Submit button, GTM does not register as a click, in Preview Mode. Is it possible that the problem to be the fact that when the form is submitted the page refreshes and does not reroutes to another page? Can something be done on this or do I need to change the form?

  • Nate Morse

    Don’t forget to save your version of tag manager to see the tag appear in preview/debug 🙂

    • Maybe set it up as a Goal? and then look in Conversions>Goals

  • Megha Nagpal

    Nice post.Indeed very useful. Please share more examples.