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 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?

    • Michelle Thai

      Sorry for the slow response @disqus_ie8WL3Q6Cr:disqus. Did you figure out a solution? I imagine every audio file you’ve embedded should have something unique tied to it, e.g. the audio file name or ID, that you could add to your trigger.

  • 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??

    • Michelle Thai

      Thanks @hemanshubelani:disqus for your comment. I’m not aware of issues with mobile but I will investigate further.

  • 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?

    • Michelle Thai

      Hi there Jovanna, sorry for the slow reply. It shouldn’t matter if a submission leads to another page or not. If you’re still having issues, could you email me what you’re seeing at michelle@mediacause.org?

  • 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

      • Michelle Thai

        Sorry for the slow response, @disqus_FBrq9M8Gme:disqus. I agree with @thetechmob:disqus’s response – I would set up the events a & b as goals in GA. Then use the Acquisition view to see the conversion rates for both goals.

  • Megha Nagpal

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

    • Michelle Thai

      Thanks for the comment and feedback @megha_nagpal:disqus. Is there anything in particular you’re trying to track with Google Tag Manager, that’s not a button?

  • Yuki Kuan

    HI, i’m facing problem in inserting the code. I followed the step but still cant find my code fire on the button. Can i know what are you variables?

    • Michelle Thai

      Hi Yuki, the variable I used was Click Text, and for that I put “ADD YOUR NAME”, which was the text that was on the button. What variable are you using? Please feel free to email me a screenshot at michelle@mediacause.org and i’ll try to help you out.

      • Yuki Kuan

        Hi Michelle, I manage to figure out whats wrong with the tag, apparently my site button- click text was undefined and therefore i cant follow 100% your way. So i twist a little and manage to get the button tracked. Thanks for the reply and good post.. really helps alot!

  • Justin Farrell

    Hello Michelle,

    I have tried creating a goal using this method in google analytics and it doesn’t seem to read. When I test the tag it works perfectly. Would you mind explaining a little further about creating a goal out of an event?

  • Ram Charan

    every click will get tracked what about form submissions ?

    • Michelle Thai

      While you’re in preview mode you would trigger your form submission by clicking it and holding command + clicking, you should hopefully see a unique click ID or click text. You’ll want to use that for your trigger.

    • Michelle Thai

      Hi Ram, it looks like Tag Manager has a new trigger specifically for Form Submissions. Please see my reply to Arza for details.

  • Anita Patil

    How to track the number of events in google analytics,which has been triggered?

    • Tiago Roberto da Silva

      custom reports in analytics (total events)

    • Michelle Thai

      Hey Anita, sorry for the slow reply. Go to Behavior in the main menu on the left > Events > Overview or Top Events to see how many times your events have been triggered.

  • Shuai Yang

    In the last step, How to add event as a GA goal?

    • Yes, how do we do that?

      • Michelle Thai

        Hey Shuai and Feras. Sorry for the slow reply. To add an event as a GA goal..

        1. Go to Admin in your GA property
        2. Click Goals (in the 3rd column) > Create a new goal or replace an existing one
        3. For Goal Setup, choose Custom
        4. For Goal Description, label it something you’d recognize (e.g. Subscribed or Clicked XYZ Button). For “Type”, choose Event
        5. For Goal Details, specify your events here. Note, you don’t have to specify all 4 fields. At the minimum, specify your category. Make sure you’ve toggled Yes for “Use the Event value as the Goal Value for the conversion” if you’re using a value.
        6. Save.

        Please note that events that occurred prior to you creating this goal will not be recognized as a goal completion.

  • Christie Mcpherson

    awesome post. Thanks to this i finally managed to figure out why my event wasn’t firing

  • Ian Andrew

    This was incredibly helpful, thank you.

  • What is the difference between GA even tracking and GTM event tracking. I’m confused a lot between these two. Do I need to configure trackings in GA or GTM?
    2. I’ve a wordpress website on which there is an HTML widget which has Google community embed code into it. I want to track how many people clicked on that Google widget on my website (in order to get enrolled on my G Community). But I’ve found that in spite of proper GTM implementation, when I click on that widget, no event is being generated in GTM preview mode. Although when I click on some link in the main page of the website, event is properly recorded by GTM preview mode.

    Hope I was able to make myself clear.

    • Michelle Thai

      Hi Bathinda, there isn’t a difference between GA event tracking and GTM event tracking. You set the events using GTM, and it will appear in GA. Did you remember to publish your changes in GTM? Some people forget that.

      • Thanks very much for your polite and clear response.

        But you happen to missed the 2nd part of my question, which seems to be more important than first (particularly now, when 1st has been answered :).

        • Michelle Thai

          Hi Bathinda, regarding your 2nd question, have you double checked that you are sending your events to the proper Google Analytics property? You would go to GTM Tags > Select your tag > Look at the GA property you have under Google Analytics setting.

  • Michelle, thank you this was helpful. But let’s say user omits a mandatory field on the form, and clicks on the submit button. This will be counted as an event, even though a form hasn’t been submitted. How do you work around this? My guess is that you need to satisfy both conditions; click on the button and landing on the correct page?

    • Michelle Thai

      Hi Arza, I’m checking with a few coworkers. I’ll get back to you soon.

    • Michelle Thai

      Hi Arza, it looks like Google Tag Manager released a new trigger that you can use for form submissions. Instead of using the trigger type called Clicks > All Elements, you would use the one called “Form Submission” under user engagement. When you create that trigger, you’ll want to check “Check Validation” so the trigger only occurs when someone successfully submits the form. Choose Page URL as your filter. Here, you’ll want to paste the URL where the form is located.

      https://uploads.disquscdn.com/images/7204119235e1a17fe22e8f2008c44e863aed983efa23984b8ab985a5501287ca.png

  • I think you saved my life by sharing this post. That’s exactly I was looking for.
    Thank you Michelle for your help.

  • Thanks

  • Sebastian Hehn

    Best and clearest post about this topic. It was really helpful. Thank’s a lot!

  • Adam

    None of this works because my form submission loads a new page and there isn’t enough time to read the DOM element before the new page loads???

    • Michelle Thai

      Did you try step 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. \

      Alternatively, instead of using the trigger type called Clicks > All Elements, you would use the one called “Form Submission” under user engagement. When you create that trigger, you’ll want to check “Check Validation” so the trigger only occurs when someone successfully submits the form. Choose Page URL as your filter. Here, you’ll want to paste the URL where the form is located.