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 the page with the button (GTM tells you to add it to all pages). This is the only time you need backend access.

Summary

  • Create and test a generic click trigger
  • Filter the click trigger to the button you want to track
  • 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. Excuse mine for having two:
  27. BONUS! 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 is a tech enthusiast with a big passion for sustainability and poverty alleviation. Prior to Media Cause, Michelle worked with several celebrity foundations with tech start-up GlobalMojo, including the Jamie Oliver Food Foundation and the Avril Lavigne Foundation. She currently volunteers with Power to the People to bring solar electricity to rural villages in Nicaragua. Michelle holds a BS in Marketing Communications from Emerson College and currently resides in the SF Bay Area.

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