Track button clicks with Google Tag Manager

  • google-tag-manager
  • google-analytics
  • ga4
  • click-tracking
  • key-events

Updated

Google Tag Manager (GTM) can send an event to Google Analytics 4 (GA4) whenever someone clicks a particular button or link: a Request a quote button, a phone number, an email address. You build it from three pieces: a trigger that recognizes the click, a tag that sends the event to GA4, and Preview mode to test it before you publish.

If you only need to count form submissions, you don't need Tag Manager. See Track form submissions in Google Analytics 4.

Before you start

  • Your site loads Tag Manager. Paste the container ID (GTM-…) into Google Tag Manager ID under Appearance → Customize → Scripts & Embeds → Analytics & Tracking. See Add tracking codes to your site.
  • GA4 loads through Tag Manager: the container has a Google tag with your Measurement ID (G-…) that fires on all pages. In that case, leave Google Analytics ID empty in the Customizer.

GA4 already tracks some clicks without any setup. With Enhanced measurement on (the default for a web data stream), it records clicks on links to other websites and file downloads such as PDFs. Use Tag Manager for clicks on your own site's buttons and links.

1. Turn on the click variables

  1. In Tag Manager, open Variables.
  2. Under Built-In Variables, click Configure.
  3. Under Clicks, check Click Element, Click Classes, Click ID, Click URL, and Click Text.

Your triggers can now check what was clicked.

2. Create a click trigger

Choose the condition that best identifies the click. The link's address is usually the most dependable.

  1. Open Triggers and click New.
  2. Choose Click - Just Links as the trigger type.
  3. Select Some Link Clicks and set a condition:
To track Condition
A button that goes to your quote page Click URL contains /request-a-quote/
Phone number taps Click URL starts with tel:
Email address clicks Click URL starts with mailto:
One specific button among several with the same link Click Element matches CSS selector .track-quote, .track-quote *
  1. Name the trigger, for example Click - Quote button, and save.

For the last row, give the button a class first: select it in the editor, open Advanced in the block sidebar, and add track-quote to Additional CSS class(es). The .track-quote * part of the selector also catches clicks on the link inside a block that puts the class on its wrapper.

If the element isn't a link (it has no address), use the Click - All Elements trigger type instead.

3. Create a GA4 event tag

  1. Open Tags and click New.
  2. For Tag Configuration, choose Google Analytics → Google Analytics: GA4 Event.
  3. Enter your Measurement ID (G-…).
  4. Set an Event Name in lowercase with underscores, such as quote_button_click, phone_click, or email_click.
  5. Optionally add Event Parameters, for example link_text with the value {{Click Text}}, to see which button was clicked.
  6. Under Triggering, choose the trigger from step 2.
  7. Name the tag and save.

4. Test in Preview mode

  1. Click Preview in Tag Manager and enter your site's address. Your site opens in a new tab with Tag Assistant connected.
  2. Click the button or link you're tracking.
  3. In Tag Assistant, select the click in the event list on the left. Your tag should be listed under Tags Fired.
  4. In Google Analytics, go to Admin → DebugView (under Data display). Preview mode sends events there, so you should see your event name within a few seconds.

If the tag doesn't fire, select the click in Tag Assistant and open Variables to see the actual Click URL, Click Classes, and Click Element values. Adjust the trigger condition to match them.

5. Publish the container

Nothing changes on your live site until you publish.

  1. Click Submit.
  2. Add a version name that says what you added, such as Quote button click tracking.
  3. Click Publish.

6. Mark it as a key event (optional)

To count the click as a lead, go to Admin → Key events in Google Analytics (under Data display), click New key event, and enter the exact event name from step 3.

On a Dirigible site

  • Tag Manager doesn't load while you're logged in as an administrator, so Preview mode won't connect. Use a private window, or turn on Track Admin Sessions in Scripts & Embeds → Analytics & Tracking while you test and turn it off afterwards.
  • If the GDPR Banner is on, accept cookies in the preview tab. Tag Manager waits for consent.
  • If Tracking Load Strategy is First Interaction, Tag Manager loads after your first scroll or click. Scroll the page once before you click the button you're testing.
  • When both Google Tag Manager ID and Google Analytics ID are filled in, Dirigible loads only Tag Manager. Set up GA4 inside your container.