Track Clicks with Google Analytics 4 and GTM

If you are just starting to get a grip on Google Tag Manager, click tracking is probably one of the most demanded things you want to implement. There are many clickable elements on your website and you want to understand how website visitors are interacting with them.

In this blog post, we will take a look at how to track clicks with Google Analytics 4 and Google Tag Manager.

First, we will look at some automatic click-tracking capabilities in GA4, and then we will extend the list of tracked events with help of GTM.

By the way, if you are completely new (or just starting) with Google Analytics 4, download my free e-book below.

 

Ready? Let’s get started.

 

Table of contents

+ Hide table of contents +

• Video tutorial
• Why track clicks?
• Automatic click tracking in GA4 (Enhanced Measurement)
• Track custom clicks
• Register custom definitions
• Test your click tracking in Google Analytics 4
• Track button clicks
• Mark important clicks as conversions
• Final words

 

Video tutorials

If you prefer Youtube videos, here’s one from my channel. If you haven’t yet, consider subscribing to stay up-to-date with Google Analytics 4.

Looking for tips specific to Button Click Tracking? Here you go.

 

Why track clicks at all?

Think about this: what are the most common interactions you do on any website? It will *probably* be page views, scrolling, and clicking. You click links and buttons to navigate from one page to another, to reach a particular goal. Your website visitors do that as well.

That’s why it’s crucial to track such interactions – to better understand user/visitor behavior. Capture clicks, send their data to your analytics tool(s), like Google Analytics, and analyze the data.

Here are some of the popular uses cases for click tracking in Google Analytics 4:

• Button click tracking (say “Add to cart” button clicks)
• Outbound link clicks (track when a visitor clicks a link leading to an external resource (3rd party website))
• Contact link clicks (e.g. clicks email addresses or phone numbers)
• File downloads (when someone clicks a link that contains a file extension, e.g. .pdf, .docx, etc.)

In this blog post, we’ll take a look at how Google Analytics 4 is capable of automatically tracking outbound link clicks and file downloads. Then I will show you an additional example when you might want to track other clickable elements on a website (that are links). And if that is not enough, I will provide additional resources related to button click tracking.

 

Automatic click tracking in Google Analytics 4

When you configure a web data stream in Google Analytics 4, you have an option to use Enhanced Measurement. It is designed to help marketers get as many events in the reports as possible without the need to cooperate with developers or configure in Google Tag Manager.

If you go to Admin > Data Streams > Select the web data stream, the following window will open where you will see a section called Enhanced Measurement.

By default, this feature is enabled and will automatically track the following events:

• Page view (event name: page_view)
• Scroll (event name: scroll)
• Outbound link click (event name: click with the parameter outbound: true)
• Site search (event name: view_search_results)
• Video Engagement (events: video_start, video_progress, video_complete)
• File Download (event name: file_download)

If you want, you can disable/enable events individually and you can do that by clicking the gear icon in the Enhanced Measurement section and then clicking toggle buttons.

Also, some events can be customized additionally. Let’s take a quick look at those events that are related to clicks.

click. This is an event for the outbound link click (when a clicked link redirects a visitor to another domain. Together with this event, an additional parameter outbound (with value “true”) is sent. The event with this parameter means that there was an outbound link click. Together with this event, a bunch of other parameters is sent: link_classes, link_domain, link_id, link_url.

If your business operates on several domains, you can go to Tagging Settings (of that very same event stream) > Configure your domains and then enter the domains of your business. All the domains that are listed there will not trigger the outbound link click event.

file_download. This event is sent to GA4 when a link is clicked and that link contains one of the following file extensions: .pdf, .xls, .xlsx, .doc, .docx, .txt, .rtf, .csv, .exe, .key, .pps, .ppt, .pptx, .7z, .pkg, .rar, .gz, .zip, .avi, .mov, .mp4, .mpe, .mpeg, .wmv, .mid, .midi, .mp3, .wav, .wma. In other words, if the link opens/downloads a file. Currently, it is not possible to update the list with other extensions in the GA4 interface.

Once you select which events you wish to track, hit Save in the top right corner and then make sure that Enhanced Measurement is enabled (the toggle is blue).

From that moment, your Google Analytics 4 will start automatically tracking the events. Use DebugView to check if everything is captured properly.

But what if you want to track clicks on other elements (that are not file or outbound links)? Well, let’s move to the next chapter.

 

Track custom clicks with Google Analytics 4

Tip: If you want to learn more about how to track events with Google Analytics 4, read this extensive guide (that also includes a video).

Here’s an example (that I’ve already mentioned in several of my other event-related GA4 guides). Let’s say that I have a demo website and I want to track clicks in the menu bar.

Note: menu link click tracking trigger conditions differ on most websites (because of different click classes, IDs, etc.). Try to do your best to apply this example.

First, I need to create a trigger with correct conditions that distinguish any click from a menu link click. Enable Google Tag Manager’s Preview mode and try clicking any of the menu links on a website. Once you click the first link, you should see the Link Click event in the Preview mode’s left sidebar.

If you don’t see it, you should:

• have at least one Just Links GTM trigger activated on a page
• or have “File download” or “Outbound links” tracking enabled in your Enhanced Measurement Settings

Let’s say, that you don’t use Enhanced Measurement in GA4. In that case, we should create a link click trigger. Go to Google Tag Manager > Triggers > New > Just Links. Keep the trigger set on “All link clicks” and save the trigger.

By creating this trigger, we will enable the link-tracking functionality in Google Tag Manager.

Then go to Variables > Configure (in the “Built-in Variables” section) and enable all Click-related variables.

Refresh the preview mode (by clicking the Preview button once again).

Then go to your website and click any of the menu links. Actually, click at least two of them. Return to the preview mode and you should start seeing Link Click events in the preview mode. Click the first Link Click event and go to the Variables tab of the preview mode.

Then click on the second Link Click event. I am currently looking for some variable that I could use to distinguish a menu link click. I don’t want to fire my GA4 event tag on any link click. I want to fire it precisely on a menu link click.

After taking a closer look, I see that both links contain the same Click Classes value, site-nav__link site-nav__link–main. By the way, nav means “navigation” in this context. Great! I will use this in my Just Links trigger.

Go back to the list of triggers in your GTM container and click the previously created trigger for All Link Clicks. We’ll edit it and add a condition: Click Classes contains site-nav__link–main

Save the trigger. Now, it’s time to create a Google Analytics 4 event tag. Go to Tags > New > Google Analytics: GA4 Event. Select your existing GA 4 Configuration tag and then enter the event name. Its value is up to you. Any of the following options are perfectly fine:

• menu_click
• menu
• menu_item_click
• menu click
• etc.

These are just some of the examples. Since we are working with a custom event, we can name it whatever we want (as long as we follow the limitations of name length, for example).

In my case, I used menu_click event name. But this time, sending just the event name is not very useful. You’d probably want to know which exact menu items are clicked more often. How about we also send the name of the menu item and the URL?

We could do that by sending additional event parameters. Even though you could use parameters that are already mentioned in the documentation of the Enhanced Measurement (like link_url and link_text), let’s create two custom parameters (because I just want to show you how to configure them).

I am going to pass two parameters, menu_item_url and menu_item_name. I made these parameter names up and you can do it too. That’s what the flexibility of the data model offers.

To send custom parameters, you must expand the Event Parameters section in the Google Analytics 4 event tag and then click Add Row.

Enter the name of the first parameter. In my case, that is menu_item_url. In the Value field, I will insert a variable that returns a clicked URL. Luckily, GTM already offers such a variable, it’s called Click URL. Click the Insert Variable button and then select the {{Click URL}} variable.

Let’s add another parameter, menu_item_name. For that purpose, GTM offers another built-in variable, {{Click Text}}. Insert it as well. Since visitors of your website can translate your page, {{Click Text}} value will also change, hence you will see a more diverse list of collected values in your GA4 reports.

If you want to send more parameters, you are free to do that. You can send up to 25 custom parameters with a single event.

Assign the previously created Just Links trigger to this tag. Save the tag. Refresh the GTM Preview mode and click a couple of your menu items. Go back to the Preview mode and click those Link Click events. Check if the GA4 event tags for Menu Link Clicks have fired.

Now, you will need to go to Google Analytics 4 and check the DebugView. You will learn more about that in this blog post.

IMPORTANT: even though you will see your custom parameters in Real-time reports and DebugView in GA4, you will not be able to see them in other GA4reports. Unless you register those parameters as custom dimensions in Google Analytics. Read the next chapter of this blog post.

 

Register custom definitions

This applies to any event parameter that you send to Google Analytics 4. If you want to see/use them in things like Funnel reports, Exploration, see their reporting cards in standard reports, etc., you must register custom parameters in the GA interface.

In Google Analytics 4, go to All Events and then click Manage Custom Definitions. Since we sent 2 custom parameters with the menu link click, we must register them both here.

Click the Create Custom Dimensions button and then enter the name of the first parameter that you sent. In my case, that is menu_item_url. Save it.

Then register a second parameter (in my case, that was menu_item_name) and save it. By the way, I sometimes use the words “custom parameter” and “custom dimension” interchangeably. In general, custom metrics and custom dimensions are both grouped as custom parameters.

And now we wait. Within the next 24 hours, the custom parameters will start appearing in your Google Analytics 4 reports.

 

Test your click tracking in Google Analytics 4

Once you configure your custom events, it’s time to test them. The primary feature built for debugging GA 4 data is the DebugView section. You can find it at the bottom left corner of your GA4 interface. Click it.

That’s the place where your debugging should take the place. Do not mix this with the GTM Preview and Debug mode. They are two different beasts.

To enable the debug mode in GA4, you have several options (any of them will work):

• Enable the GA debugger Chrome extension
• Send a debug_mode parameter together with an event
• Have enabled Google Tag Manager’s Preview mode on a page that you’re debugging

But since we are working with Google Tag Manager, having the GTM Preview mode enabled automatically enables the debug_mode, thus the data will start appearing in the GA4 DebugView.

When you start seeing data in the DebugView, you can click on every individual event and then a list of parameters will be displayed.

Click on that parameter to see the value that was received by GA4. Now that is some granular debugging!

Also, make sure that you have selected the correct Debug device in the top left corner.

If multiple visitors have enabled the debug view (e.g. they all have enabled the Chrome extension), you will see multiple devices there and it might require some time to find yourself.

Anyway, once you start seeing data in DebugView, things will look like this.

Events are marked with blue icons, conversions with green. In your case, the menu_click event will be blue (not green).

IMPORTANT: Please ignore the fact that I treat menu_click events as conversions. This is just for demonstration purposes 

If you click the event, you will see the parameters that were sent together with an event. Click on the parameter to see its value.

Once you made sure that the data is coming in and it is displayed properly, you should submit your GA4 changes in the GTM container and publish it.

You can do that by clicking the SUBMIT button in the top right corner and then complete all the other steps that the user interface asks you to do.

After that, you should soon start seeing the new data coming in your real-time reports as well.

 

Track button clicks

On some websites, buttons are coded as simple links that just have a style of a button. But on other websites, they are coded as other elements (e.g. with HTML <button> element).

If that’s your case, the aforementioned examples will not help. Then you should refer to this blog post where one of the chapters specifically explains how to track button clicks). Even though the examples there are still related to Universal Analytics (the previous version of GA), you should be able to adapt.

 

Mark important clicks as conversions

Some clicks might be more important to your business than others, thus they should be configured in Google Analytics 4 as conversions. If you want to learn more about conversions (previously known as “goals”), here is a blog post (+ video) on how to do that.

 

How to Track Clicks with Google Analytics 4: Final words

And that’s the end of yet another Google Analytics 4 tutorial. This time, we learned how to track clicks with Google Analytics 4 (and obviously, Google Tag Manager). To sum up, the process looks like this:

• If you want to file downloads and outbound link clicks, then use the built-in feature of GA4, Enhanced Measurement.
• Want to track other link clicks? Create custom triggers in GTM and link them to GA4 event tags (like we did with menu link clicks)
• Want to track buttons (that are not links HTML-wise)? Use the All Element Clicks trigger in GTM (I have linked to another tutorial of mine with some examples).

Also, don’t forget to register click event parameters as custom definitions (if you plan to use them in your GA4 reports).