One of the best ways to take advantage of Google Analytics’ powerful ability to track user interactions is to implement advanced click tracking via Google Tag Manager.
Advanced click tracking in GA4 can help you measure data to answer questions like:
“How many users on my website are clicking back to the homepage using the logo image link in the primary navigation?”
With out-of-the-box GA4 tracking, you could track the number of users who navigated to the home page from another page on the site, but not whether they did so via clicking the logo in the navigation vs. another link to the home page in e.g. the footer, but that is about as far as you could get. With the type of click tracking described below you can create a tag that fires an event to measure navigation clicks and narrow it down to image clicks vs. text link clicks via a CSS selector or parameters.
“Which of the 5 types of CTA we use on our site are the most effective at driving leads to our form?”
Using this method, you could create a custom event for all clicks on CTA buttons across your whole website, and include a parameter that pulls in the anchor text from each of these link clicks, allowing you to build a report in GA4 that shows you the most popular CTA text.
There are multiple ways of implementing this type of click tracking, but one of the simplest methods (in terms of the technical ability needed to implement it) is to use separate tags for each event, triggered by CSS selectors. With a few simple custom event tags and triggers deployed via Google Tag Manager, you can track user clicks on any element of your site and measure these clicks in Google Analytics 4.
However, if you are new to custom analytics tracking, this method can be a bit confusing. To help you get started, we have created a template (or “recipe”) for a Google Tag Manager container. You will need to customize the tags and triggers to fit your specific needs (see instructions below), but this should give you a good jumping off point to get you tracking all the things.
Get the Full Container Recipe Here
Tags Included:
- Google Analytics GA4 Configuration
- GA4 Event – Main Navigation Logo Click
- GA4 Event – Main Navigation Link Click
- GA4 Event – Footer Navigation Link Click
- GA4 Event – CTA Button Click
- GA4 Event – Blog Post Card Click
Triggers Included:
- History change
- Main Navigation Logo Click
- Main Navigation Link Click
- Footer Navigation Link Click
- CTA Button Click
- Blog Post Card Title Click
- Blog Post Card Image Link Click
Built-In Variables Included:
- Click Element
- Click Text
- Click URL
- Page Hostname
- Page Path
- Page URL
- Referrer
How to Set Up the GTM Container:
- Download the JSON file.
- In the Google Tag Manager Admin panel, click on “Import Container”.
- Choose the container file you downloaded.
- Under ”Choose Workspace”, click “New”.
- You have two choices for how to incorporate your new tags and triggers: “Merge” and “Overwrite.” If you already have items in your GTM container that you wish to keep, Choose “Merge”. If you are new to Google Tag Manager and have no existing tags or triggers in your container, or you want to remove the items currently in your container, choose “Overwrite” to start fresh.
- Once you’ve imported the container recipe, you can edit the tags to adjust (or add to) the parameters included, and edit the triggers to correspond to the specific CSS Selectors for the site elements you want to track. See below for a more in-depth guide for triggers.
How to adjust the triggers to fit your site element:
- Navigate to the “Triggers” tab in your GTM workspace.
- Click on the trigger you need to update.
- In another tab, open the site and find the element for which you want to implement click tracking. For example, let’s set up click tracking on the logo link in the main navigation on upbuild.io:
- Right click on the element and click “Inspect Element” (or the equivalent option in your browser), then “Copy”, then “Copy selector”.
- To test your CSS selector, switch to the Console tab of DevTools and use a document.querySelectorAll function. For this element, we used: document.querySelectorAll(“#wrapper-navbar > nav > div > a”). This pulled the correct element, so we can move on. If you do not see the element you’re trying to track in the NodeList (or if you see multiple elements and you only want to track one), adjust your selector and retest until you successfully pull the element you want. It can often take a few tries and some adjustment to get a selector that pulls the correct element. Often, a CSS selector is shared by more than one element on a page. To remedy this, you may have to “walk” down the document tree to a more specific element and copy that CSS selector that only applies to the element you want to track. Another option is to create a “trigger exception” in GTM, but this can become much messier if you have to use more than one, so it’s best to get the CSS selector as specific as you can the first time.
- Once you have a working selector, go back to your GTM tab and paste this into the CSS selector filter box to replace the placeholder text.
- Click “Save”.
- Before publishing your container, you will want to test your trigger(s) in Preview/Debug mode. On the front page of your GTM container Workspace, click “Preview” in the top right corner of the screen. Type in the URL for the page that the element you want to track lives on.
- Once the page loads, click on the element you want to track, and click over to the Tag Assistant tab in your browser and check to see if the Tag has been successfully triggered.
Success!
- Your final step is to publish the container and watch the data roll in! Keep an eye on the events tab in your GA4 property for the next few days, to make sure that this event shows up with real user data.
Iterate and Improve
Once you are tracking clicks using the method in this post, you can expand as you go, making changes or additions as your site or marketing goals change. That’s the beauty of custom events: they’re custom! Because you used CSS triggers to fire these events, it is also a good idea to check in regularly and ensure that no CSS changes to the site have broken tracking and that your events are still firing as expected.
