Google Tag Manager (GTM) can be used to track every click a user initiates on a website. Once the clicks are recorded in GTM, tags are then fired to your Google Analytics (GA) account to collect the information. With this data, GA can provide comprehensive reports on your site's visitor engagement.

If you haven’t connected your site to GTM or setup GA yet, please follow this article to set that up first. Note that this article assumes your GA account is the latest GA4 version of Google Analytics. Now that you’ve created an account and container for your site, you’re ready to get started.

In this tutorial, we will be testing clicks on an image, a button with a link and text with an external link. The following screenshots show how each element has been setup. To track image clicks in GTM, add an image to a container instead of using an image element.

Image Container:

Button:

Text Link:

Before you start tracking clicks in GTM, you’ll need to make sure your account is set up to collect the appropriate variables. These variables will allow us to filter out or identify the elements that we want to track.

In your dashboard, go into your site’s Workspace by clicking on your site name.

Once you're in the dashboard, you can look at the top to make sure you're in the appropriate account and container. Next, click on Variables and Configure to select the variables you want to collect.

You'll see that GTM is capable of tracking a wide variety of variables that deal with forms, videos, scrolling, just to name a few. For the purposes of this tutorial we will focus on tracking clicks. Select all variables under Clicks and the Page URL and Page Path under Pages. Then close the window.

In the Variables window, you can see a list of all of the built-in variables that your GTM account is going to track. Now it's time to test your button clicks by hitting Preview.

Enter the url of the website and page you would like to test. Then hit Connect.

GTM will confirm that you are connected to your test site and your site will open up in a new Tag Assistant window. Hit Continue to see the live data on your site.

You can start testing your clicks by going to GTM's preview of your test site.

Once the image of the panda has been clicked, you will see the live data in your Tag Assistant window. The summary on the left side of your dashboard shows the name and page of the site your are previewing, in this case "Home - Tracking Clicks". After the page loaded (#5 - Window Loaded), the image of the panda was clicked which was recorded as event #6 - Click. On the right, you'll see the Tags that were fired and not fired. In this case, the tag to GA4 (Google Analytics 4) was fired but the tag for Page 1 - Text Link was not fired because we haven't visited that page yet. We will go over Tags a little later in this tutorial.

Now select Click on the left and Variables on the right. Here we see that GTM is collecting data on all of the click variables that we had setup earlier. The Click Classes "component-inner media-4a39c94d media-5162eb39" is a unique identifier designated for the container that contains the image of the panda. The Page URL indicates the page that the image is on.

Next, if we go back to the GTM preview site, and click on the button with the email link, we will see these results. This click is classified as a Link Click, with a generic class name "pc-link block-link". The Click URL is the link that the button will link to, in this case, the link is "mailto:support@timesites.com" which will initiate an email. Again, the Page URL indicates the page that the button is on.

For this last test, we are going to switch to page 1 of the test site. Close out of the GTM debugging more by clicking the X in the top left corner and Stop debugging in the popup window.

In the Tag Assistant window, click on the 3 dots beside your site name and hit Edit.

Enter the entire URL for the page you want to test and hit Apply. After the window closes, hit > to the right of the 3 dots to connect to the new preview page.

Now, on this new preview page, if we click on the text link "When you click on https://timesites.com", we will see the following data.

Under Tags Fired, we see that the tag for our GA4 account and the Page 1 - Text Link have been fired. Again, we will go over Tags a little later in this tutorial.

Click on Variables to dig a little deeper into the data we are collecting. We see that the Link Click has the following variables:

Click Classes = "pc-link text-link", Click
Click Text = "When you click on https://timesites.com"

Click URL = "https://timesites.com/"

Page URL = "http://tracking-clicks-5225.timesites.io/page-1/"

With all of the data that GTM has collected with these 3 clicks, we can be confident that we can have all of the data we need to track and report the clicks.

Go back to the Google Tag Manager window by clicking on the browser tab, then select Triggers on the left side. Here you'll see the triggers that have been setup and the Variables that have been used to filter the clicks we want to track.

To understand how these triggers were setup, click on the New button in the upper right corner. Rename your trigger "Home Page - Email Link". Click on the Edit pencil to set up your filter variables.

Because this is an email link, we will select Just Links as the trigger type.

In order to be sure we are tracking the specific button on the corresponding page, we need to set up the filter variables. We'll start filtering by selecting Some Link Clicks. Then in the drop downs we can select Click Classes -> contains -> pc-link block-link. Recall that the class name "pc-link block-link" can be retrieved in the Tag Manager Preview Mode data stream that we collected earlier in this tutorial.

To add another condition, click on the + on the right.

The Click URL is the url that this element links to. In this case, it is to an email "mailto:support@timesites.com".

Finally, to ensure that we are only collecting this data on the home page, select Page Path -> Equal -> /. If you are collecting data from another page you can either use the path of the page such as /page-1 or you can use the entire url, Page URL -> contains -> http://tracking-clicks-5225.timesites.io/page-1/.

Now hit Save and finish setting up all of the triggers that you want to track.

We are now ready to setup our Tags that will be fired to Google Analytics.

Select Tags on the left side. The tag labeled GA4 is the tag that fires page views to Google Analytics. The other tags have been setup to fire a tag to GA every time one of the triggers have been activated. To see how we set this up click on New.

Let's label this tag GA4 and click on the Edit pencil.

Select Google Analytics: GA4 Configuration.

Enter your GA4 account Measurement ID (you can get this from your Google Analytics account) then click on the Edit button in the Triggering window.

Select All Pages . Your site will now fire a tag to GA every time the user visits a new page.

To setup the triggers on the individual elements, follow the same initial steps to setup a tag but this time select Google Analytics: GA4 Event.

You will then be prompted to fill out the following fields:

Configuration Tag = "None - Manually Set ID"

Measurement ID = Enter your GA Measurement ID

Event Name = Home Page - Email Link

Event Parameters = Create a name for the parameters that were set in your triggers as well as your corresponding parameter values.

In the Triggering section, select the trigger you want to tag. Hit Save in the top right corner.

You can now repeat these steps to create all the triggers and tags that you want to track. It's a good idea to go back to your Tag Manager Preview Mode to verify that the tags that you have setup are firing correctly.

Now that all of your variables, triggers and tags have been set up in GTM, your site is now ready to start sending data to GA.

Once you sign into your GA account, you'll be taken to your Reports Snapshots page. If you have multiple GA accounts, you can verify that you are looking at the correct site in the top left corner.\

The first thing we want to do is to configure the Event Parameters to match the tags that we had set up in GTM. Start by clicking the Configure icon (4th icon on left side), then click on Custom Definition to reach this window.

Here you'll see that we created a Custom Dimension for each variable that we used for the tags in GTM. To create a new custom dimension, click on the blue Create Custom Dimension button in the top right corner.

Fill in a Dimension Name and Description that is easy to understand. Select Event under Scope. For Event Parameter it is important that you copy the same Event Parameter that was setup in your tag in GTM. Keep in mind that this field is case sensitive.

Repeat these steps for all of the event parameters you want to track.

Note: It can take 24 -48 hours for your data to update in your GA account.

To view your data in GA, click on the Reports Icon in the top left corner.

From here you can look at the number of page views by going to Engagement -> Pages and Screens.

To view the tags that we setup in GTM, select Events under Engagement.

Here you'll see that the name of the tags that we setup in GTM are listed as Events in GA. You can drill down into the details of the event by clicking on the event itself.

The Event Parameters that we had just setup earlier appear here with its associated data.

Keep in mind that there are copious amounts of tracking variables that you can track with GTM and report in GA. This tutorial covers only the tip of the iceberg in terms of data collection.

We hope you found this tutorial helpful. Don't hesitate to reach out to our team if you have any questions.