Google Analytics is a powerful web analytics tool that can track all kinds of events. However, tracking certain specific actions such as clicks on specific links needs you to enable custom event tracking. In this tutorial, learn how to track clicks on links and buttons using Google Analytics and Google Tag Manager.
Google Analytics is a powerful tool to track activities on your web pages. By default, it tracks all page views and provides you with important metrics related to those page views, such as the location, time on page, bounce rate, etc.
But is that really enough? You may want to know how many people clicked a particular link or a button on a page.
You need to do a modified implementation of GA in order to track these other activities on your website, such as clicks on links or buttons, form filling, video play, etc. Let’s learn how to track link and button clicks using GA and Google Tag Manager.
- This tutorial assumes you are using Google Tag Manager (GTM) to implement GA and the code is already tracking page views. If you need help with this setup, check out the GTM help guide.
- You need to create a list of buttons or links you want to track. Also, these links should be uniquely identifiable, for instance, with a unique ID or class related to the link. You can also identify links based on the pages they appear in.
Let’s dive into the steps needed to implement this, shall we?
As the first step of enabling click tracking, you need to ensure that the click-related variables are enabled in Google Tag Manager. Go to your GTM Container Workspace, click “Variables” and then click “Configure”. Now, scroll down to find the click-related variables and enable them all, as shown in the following image 1.
Within your GTM Container, click the “Preview” button at the top right. This puts GTM in the Preview Mode as shown in image 2.
The Preview Mode allows you to see your GTM Preview & Debug pane. Simply open your website on a different tab on the same browser to see this pane, as shown in image 3.
As you can see the default GA tag has already fired. If you go to your GA dashboard and check the real-time visits, you can see this visit.
Note: Refresh the Preview mode button once to ensure that the settings are saved. Ensure that you do this after any modification on your GTM Container as it will ensure that the modifications are properly saved for preview.
Now we need to ensure that all clicks are accounted for. For this, we will create a trigger that is fired if anyone clicks on any link on your website.
Go to the Triggers section on GTM and click “New”. Put a name for your trigger and under Trigger Configuration, select the trigger type as “Click->All Elements”. You can also select “Just Links” option if you don’t want to track clicks on other elements, such as buttons.
Now, we need to have the trigger fire only for the one unique link that you want to track.
After your click trigger is created, refresh the Preview and we can check if the trigger is working properly. Go to the web page with a link and let the Preview pane load.
Note: Now, just click the link with the Ctrl key held down. This is to ensure that the click target opens in a new window and you can still see the Preview pane contents.
As soon as you click the link, you can see that a new “gtm.click” event has been fired in the Preview pane. In case of “Just Links” option in step 3, you will see “gtm.linkClick” as the name of the event.
Click on the “gtm.click” event and then click the “Variables” tab. You will see that all those click-related variables have been captured here with the values associated with them. You need to identify one variable that you can use to uniquely identify the link that you want to track.
For instance, in this case, the “Click ID” variable would be useful to identify this particular click. The value of the variable, as you can see, is “testlink” (without the quotes).
Note: Middle-button clicks cannot be tracked using this setup. So, anyone clicking the middle button to open the link won’t trigger the tag. I’ll publish another tutorial about tracking that soon.
Now we will configure the variable that uniquely identifies the click you want to track in GTM.
Get back to GTM Container Workspace and click the link-click trigger you created. Under Trigger Configuration, click “Click – All Elements” and then select the radio button “Some Clicks”. Here, you need to select the unique variable and value associated with that particular click. As you can see in image 6, I have selected “Click ID” as the variable and “testlink” as the value. The matching operator can be “equals”.
If you want to add additional conditions to the trigger, such as make it fire only on certain pages, you can add those conditions using the “+” button. After finishing the setup, click “Save” at the top and refresh the Preview Mode.
Now your trigger setup is complete. We have to now create the GA tag that fires and captures the data associated with the click.
Within GTM Container Workspace, click “Tags” and then click “New”. Name your tag and click “Tag Configuration” to select the appropriate tag. Choose “Universal Analytics” and under the “Track Type”, select “Event” instead of Page View.
All clicks are tracked as Events within GA. There are a couple of parameters that are mandatory for all Events; they are Category and Action. So, type in the Category of the event as “Click” and action can be the URL of the click, which can be implemented using the click variables. Simply click the variable “+” button and select Click URL as the action.
For the additional, optional parameters Label and Value, you can select additional variables or manually put in the data. For instance, for Label, you can select the “Click Text” as the variable.
The Value is ideally the value of the link click. For instance, if it’s a purchase link, the Value may be the revenue from the purchase.
Don’t forget to select the correct GA variable.
Once done with the Tag Configuration, save it and select the click trigger you have already created. Save the tag. Now the new click tracking tag should be visible among your tags.
Now we need to go to the web page and test whether the click tag is firing for the unique link you are tracking. Head over to the page where the link is and refresh the page. Any click you do on the page will automatically trigger the “gtm.click” event. Now, simply click the link with Ctrl key held down. Here, you should immediately see the name of the new click tracking tag being fired.
Other normal clicks anywhere on the page won’t fire the tag. Only the click on the specific button or link identified with the limiting variable we specified earlier will fire the tag.
Once you see that the tag is fired, you can double-check if the values are properly returned by going to GA real-time view. Go to GA and under Real-Time, click “Events”. You should see the new click event being tracked with the correct Event Category and Event Action. If you click the Event Category, you can see the Event Label also. In my case, the Event Action was the URL of the link and Event Label was the link text.
After you have verified that the tag is firing properly for the links you are tracking, you need to come out of the Preview Mode of GTM and publish the tag in the Container. Simply click the “Submit” button next to the “Preview” button to publish the latest changes.
In order to track button clicks also, the procedure is pretty much the same. Once the tag is implemented correctly, you can immediately see that it’s working properly through GA real-time dashboard. After about 24 hours, the events will be available in your Behavior section.