In this article, learn how to track clicks on your website in Google Analytics 4 (GA4) using Google Tag Manager (GTM) and CSS selectors. I often use this method for measuring the number of clicks on links and buttons. Especially outbound links on landing pages of digital marketing campaigns in order to measure how many people coming from digital advertising campaigns clicked on the call(s)-to-action. However, you could track clicks on any on-page element that’s targetable by CSS. Click tracking is a great way to measure tangible results.

In this quick start guide, I’ll cover:

• Enabling GTM click event variables
• Adding a GTM click event trigger using CSS selectors
• Creating a GTM GA4 event tag using your click event trigger
• Testing and previewing the GTM tag
• Verifying a successful event log in GA4

Assumptions

You have Google Analytics 4 set up and installed on your website via Google Tag Manager. If not, follow this guide from Google to configure your GA4 tags in Tag Manager.

Quick Start Guide

1. Enable GTM Click Variables.
2. Create a new GTM Trigger for your click(s).
3. Add the Trigger to a new GTM Tag.
4. Test and preview the tag.
5. Confirm event output in GA4.

Open the container for the website you’re working with inside Google Tag Manager. That should drop you on the Workspace screen, as seen here.

Next, check if your GTM click variables are enabled. To do so, navigate to the Variables screen.

If click variables are already enabled, you’ll see them here. For the purpose of this tutorial, you only need to enable Click Element, but it doesn’t hurt to have more. On my screen, I’ve highlighted the click events in red.

If you DO NOT see click variables here then you need to enable them.

To enable click events:

• Click the Configure button (top-right, above the variables)
• From the configuration options pane, click the checkbox for the items listed below “Clicks” to enable each type.

That’s all for Variables.

Next, it’s time to create a new Trigger. From the left-hand menu, navigate to Triggers.

Create a new Trigger by clicking the “New” button at the top right of the Triggers list.

Before you go any further, give your new Trigger an appropriate name. In the example, I’ve named mine “CTA Link Click”, however, you can name it anything you want that makes sense for you.

Next, click on the Trigger Configuration to “Choose a trigger type to begin setup.” The type of trigger you want to choose is called “All Elements“.

After selecting All Elements as your trigger type you’ll be presented with the next screen where you can choose which clicks the trigger fires on.

Here for the “This trigger fires on” option, select Some Clicks. This will expand another row of option fields.

• Set the first option to Click Element.
• Set the second option to matches CSS selector.
• Set the third option to your unique CSS selector.

The CSS selector you enter should identify the button or link element you want to track clicks for. For example, you could track a button with an id attribute of id=”cta-btn” by entering #cta-btn or a link inside of a div with a class of .my-link-container by entering div.my-link-container > a. As long as your CSS selector points to the on-screen element you want to track clicks for it should work, but you’ll get to test the event before making it live after you create a new GTM Tag that uses the trigger. You’re almost finished.

Here’s a Google Chrome browser extension to help you pinpoint the right CSS selector if you’re unfamiliar with CSS or having trouble. And here’s a CSS selector reference guide if you need a primer or a quick refresher.

Click the Save button to save the trigger. Now, you’re ready to put it all together as a new GTM Tag.

Navigate to the Tags screen from the left-hand navigation.

Create a new GTM Tag by clicking the New button (top right).

Similar to creating a new Trigger, when you create a new Tag you need to give it a name. Name it something that makes sense for you and your use case. In my example, I’ve named the new tag Product CTA Link Click.

Next, click on the Tag Configuration “Choose a tag type to begin setup” box because you need to set up the tag’s configuration options. At this screen, choose the tag type Google Analytics: GA4 Event.

This brings up a screen for you to:

• Select Configuration Tag – Choose your GA4 variable from the select menu.
• Name your event – can be anything, separate words with underscores.
• Add Event Parameters – built-in values you can choose from in the next step.

After you give your event a name, click on Event Parameters to expand the section.

Next, click the Add Row button to add a parameter. You’ll see a row with 2 fields.

The first field is your custom parameter name. This can be whatever label you’d like (separate words with underscores like in the example). The second field is the value that gets filled in.

Click on the gray-plus-icon at the end of the second field to see a list of value options.

In my GTM Tag, I’m measuring “Click Text”, “Click URL“, and “Page Path“. Click Text associates the literal link or button’s text (i.e. “Click Here” or “Subscribe”) and lets you know which text appealed to the person who clicked. Click URL associates the value of the link’s href attribute and lets you know where the person traveled to after their click. And, Page Path lets you know the relative path of the page on your website the person was on when they clicked.

That’s all for Tag Configuration.

Next, assign a Triggering value for the tag. Choose the GTM Trigger you just created. It will be labeled here with the name you gave it earlier. My GTM Trigger was called “CTA Link Click”.

After selecting your Trigger, go ahead and click Save. You’re finished setting up the new GTM Tag.

Testing and Previewing New GTM Tags

Now after your new GTM Tag has been created and before you publish the changes, you’re able to test and preview the new tag.

• Click the “Preview” button at the top-right of Google Tag Manager.
• Connect with your website, using the URL of a page where the new Tag will fire.
• Click the link or button that should fire the tag.
• Pull up Google Tag Manager’s debugging page (it’s already open at this point).
• Examine the “Click” action in the latest Summary and confirm your new tag fired.

You should see a screen with info like this:

TIP: To view the actual values passed by the Tag, click the radio button at the top right, next to Values, to toggle from Names to Values.

Confirm Event in Google Analytics 4

Now, you can confirm the event was logged in Google Analytics 4. After your new GTM Tag is firing and you’ve tested it by clicking on it from your website, you can open the Google Analytics’ Realtime Overview report and see that it was logged.

By clicking into the logged event you will be able to see the specific details of the event parameters you added. Notice how the Event Parameter Key values here in GA4 match the event parameter names you assigned in GTM. That’s how you know which pieces are your custom data points.

Publishing the GTM Tag

If everything is working and looks good then the last step is publishing the changes from Google Tag Manager. Publishing activates your new GTM Tag on your live website, so everyone’s clicks can be measured in addition to the ones you made while testing in debug mode.

Back in Google Tag Manager, click the Submit button at the top right of the page. Give your change a meaningful title and description, so you’ll know what you did at this threshold if you need to review the logs in the future. And finally, click that beautiful blue Publish button.

Now, your changes are live and you’re done setting up Google Tag Manager to track specific clicks on your website using CSS selectors, so you’re able to measure user engagement from your Google Analytics 4 account.