It might seem simple, but there is actually a wealth of information behind the clicks on your website that you ought to know. Learning how to track button clicks will get you closer to understanding how your visitors interact with your website. For instance, you can know what your audience is interested in and what CTAs work best for them just from a button click. In this article, we will show how to track button clicks in Google Analytics 4 through simple, broken-down steps (with screenshots!) that you can immediately implement. Let's dive in!
---
Looking for help or support on Google Analytics 4?
---
But first, if you find video tutorials easier to follow, do check out our tutorial from XYZ Lab's Youtube Channel below. Good luck!
Topics Covered:
What you need to get started with tracking button clicks in GA4
Before we get started with tracking button clicks, there are a few accounts you need to set up first:
1. Google Analytics 4
Google Analytics 4 is the newest version of Google Analytics. It allows you to track the entire customer journey across your website and apps and provide insights into their activities. To upgrade from Google Universal Analytics to GA4, you can follow Google's tutorial here.
2. Google Tag Manager
Google Tag Manager allows you to install tracking pixels on your website. To set up a Google Tag Manager account, you can go to tagmanager.google.com and follow the instructions there to create an account.
Now that you've got the two covered, let's dive into the actual tutorial on how to track button clicks on your website!
Step 1: Install GTM to your website
First up, you need to install a Google Tag Manager container tag on the back of all your website pages (like a Google Analytics tag). To do so, follow these steps:
1. Access the new container you're working with
2. Click on Admin
3. Click on Install Google Tag Manager
4. Copy the script and install it on all your website pages*
Depending on the website technology (e.g. WordPress, Wix, Shopify), some websites would not ask for the full tracking code, but will only require the Google Tag Manager Container ID. To find the container ID, you can go to Admin > Container Panel and it will be at the top of the second column.
Step 2: Enable Enhanced Measurement
The new version of Google Analytics has a new feature that is called "Enhanced Measurement" which allows you to track events by default. In order to enable this feature, you can do the following:
1. Click on Admin
2. Click on Data Streams
3. Click on your property
4. An option for Enhanced Measurement will show up. Click on the Settings icon.
5. A list of events that can be tracked by default will show up. Click on the toggle to enable the options and click Save.
We recommend you to enable all the options for default tracking so you don't have to set up events for these activities. But, if you want to track a specific action that is not specified on this list, you can follow the steps ahead!
Step 3: Enable GTM Variables
Let's say you want to track a specific button on your website (like a CTA button or an anchor, etc) or a specific action in your website. To do that, we need to get started with Google Tag Manager.
1. Access Google Tag Manager
2. Click Variables
3. Click Configure
4. Scroll down and find Clicks. Enable all the options that are relevant to Clicks (all Clicks variables)
5. Submit and publish the changes
Now we are ready to set up the tag for the specific event we want to track.
Step 4: Set up Tag and Event
To start, we need to set up 2 things: a tag and a trigger. A tag defines where the event will live, which in this case is the GA4. A trigger defines when the event is going to send information back to Google Analytics.
Setting up a Tag:
1. Click Add a new tag
2. Name the tag as the event you'd like to track
3. Click on Tag Configuration
4. Select Google Analytics: GA4 Event
5. Insert the Event Name
This event name is what will show up in your GA4 account when the tracked event is activated and recorded. In our example, we are tracking the MARKETING AUTOMATION button that is an anchor to the website's section about Marketing Automation.
6.1. Click on Configuration Tag. Select GA4 from the dropdown*
6.2. *If you are a new user, you will need to manually insert the property ID / Measurement ID of your GA4 account.
To find your Measurement ID:
Go to your Google Analytics 4 account
Go to the Admin panel
Select Data Streams
Click on the Data Stream you want to use
Copy your Measurement ID
Navigate back to your Google Tag Manager account
Input the Measurement ID in the Measurement ID column
Setting up a Trigger:
1. Click on Triggering
2. Click Plus symbol to add a trigger
3. Name the trigger
The trigger defines when this event will send information back to GA4. It is an internal name for ourselves to understand our own Tag Manager. In our example, it is the MARKETING AUTOMATION button.
4. Click on Trigger Configuration
5. Choose Trigger Type
Think about what you want to track for the event. If you want to track clicks, you can select Click (All Elements).
There is an option for us to track All Clicks or Some Clicks. However, we need to know first which click we want to track and its parameters (which we will discuss further below). So, for now, we will select All Clicks.
6. Save the tag
This should be how your completed tag looks like. Note that the trigger for this event is still incorrect (as it still tracks All Clicks instead of Some Clicks that we actually want to track).
Now, to understand what exactly we want to track and define the parameters, we have to first preview the tag manager.
Step 5: Preview the Tag
1. Click Preview
2. A new tab will automatically open from Google Tag Assistant
3. Insert the URL of the page we want to get data from
4. Click the Start button
5. The Tag Assistant will open the page with a connected Debugger on it
Step 6: Preview the Button
1. Click the buttons on the page
In our example, we will click on the MARKETING AUTOMATION button.
2. Navigate back to Tag Assistant
The Tag Assistant page will show the sequence of the actions (i.e. which buttons are being clicked).
2. Click Variables
The variables are what make the click unique and act as an identifier of the specific button that was clicked. The variables that are shown are the variables that were enabled in Step 3: Enable GTM Variables. We are going to use the variables here to set up the trigger.
Step 7: Configure the Trigger
Now that we know the exact variables/parameters of the button click we'd like to track, we can configure the trigger using this information.
1. Navigate back to Tag Manager and navigate to Trigger
2. Select the Trigger you'd like to adjust
In our example, we are adjusting the Marketing Automation trigger.
3. Click the Pen symbol to edit the Trigger
4. Select Some Clicks
5. Navigate back to Tag Assistant Variables and copy Click Text
6. Navigate back to Tag Manager and select Click Text equals [Insert copied Click Text] from the dropdown
In our example, the Click Text is "MARKETING AUTOMATION".
7. Click the + symbol to add another parameter
8. Navigate back to Tag Assistant Variables and copy Click URL
9. Navigate back to Tag Manager and select Click URL equals [Insert copied Click URL] from the dropdown
10. Save the Trigger
This is how the completed Trigger Configuration should look like. This is how we define a unique click and tell the system that we want to track the specific click. The Tag will only send information back to Google Analytics when someone clicks on a button with the exact parameter we have set up.
In our example, we want to track exactly the clicks that have the text "MARKETING AUTOMATION" and the relevant URL. Hence, when someone clicks on the aforementioned button and lands at the specific URL, it will be recorded as a Marketing Automation Event in the GA4 as we have set up previously.
Step 8: Save the setup
After configuring the trigger and the tag, we can now finalize the setup of our tracker.
1. Check the setup of the tag and trigger
The trigger should be connected to the tag we built in Step 4: Set up Tag and Event. In our example, the Marketing Automation Tag is connected to the Marketing Automation Trigger we set up in Step 7: Configure the Trigger.
2. Submit the Container and publish the changes
Step 9: Verify that it is working
Onto the last step! We have to verify that the implementation of the event is correct and working. To do this, you can use the debugger on Google Analytics 4 or through the Tag Manager Preview. Let's take a look at both methods below.
Option 1: DebugView in Google Analytics 4
1. Navigate to DebugView in GA4
2. Refresh the website page
3. Click on the button you'd like to test
4. Navigate back to DebugView in GA4
We should be able to see if an event is registered. As in our example, you can see that the marketing_automation_anchor event is registered in the DebugView and thus works as expected. However, in order to verify further that the implementation is correct, it is better to do a second check through Google Tag Manager.
Option 2: Google Tag Manager
You can follow the same steps as Step 5: Preview the Tag.
1. Navigate to Google Tag Manager and click Preview at GTM
2. Insert the URL
3. Start the debugger mode
4. Click on the button we want to trigger
5. Navigate back to the Tag Manager
6. Select Link Clicks
7. Check if the tag is triggered (fired)
The tags that were fired are displayed here. In our example, there are a lot of other tags, but one of them is the Marketing Automation Event that we built in this tutorial. Through this, we can check that the event is correctly set up and is active. As such, onwards we will be able to see the specific event when it is triggered in our GA4 reports.
There you have it, a foolproof, straightforward way to set up your button tracking in Google Analytics 4 using Google Tag Manager. If you still have any doubts, do go back to the XYZ Lab Youtube tutorial. Now go and implement what you learned here to make your website work for you!