8 mins
31 January 2023
Event tracking, or action tracking, usually refers to the monitoring of interactions on a website beyond a simple web page load. Event tracking provides data on how visitors are engaging (or not engaging) with a website, making it possible to fine-tune SEO and PPC marketing campaigns to maximum effect.
Conversion tracking is a form of event tracking that refers specifically to an action representing either a transaction or a significant step towards one, like registering on a customer database or opening an account.
GA4 makes this process even more streamlined than ever. Below are a few helpful pointers on how to get up and running. If you feel it’s a bit overwhelming, we’d be happy to quote to set it up for you. Go Up is an SEO agency with a whole wealth of experience in setting up and optimising the conversion tracking process in Google Analytics 4.
Google Analytics 4 automatically tracks a wide range of events without requiring any additional configuration. These events are particularly relevant for web property tracking and include:
Furthermore, GA4 collects default parameters such as page location, page referrer, page title, screen resolution, and language. However, these default events and parameters may not fulfil the requirements for comprehensive tracking. This is where custom event tracking comes into play.
Let’s delve into the process of setting up custom event tracking in GA4.
When you perform an action on a website or app, GA4 sends requests that contain detailed information about your activity. These requests, known as events (previously referred to as “hits” in Universal Analytics), are received by GA4, which then processes the data by aggregating and organising it to generate meaningful reports and insights.
First and foremost, let’s explore one of the most powerful aspects of GA4: the ability to create custom events by leveraging other events that meet specific criteria.
To begin the process, navigate to the Events section in GA4 and locate the “Create Event” button in the top right corner. Click on it.
A popup dialog will appear. Click on “Create.”
Within the dialog, you can establish criteria for triggering your new custom event.
For instance, let’s say we want to create a “newsletter_sign_up” event based on the “page_view” event when the “page_location” parameter contains “newsletter-confirmation” in the URL. (As mentioned earlier, GA4 automatically tracks these events by default.)
Please note that the specifics of your newsletter thank-you page URL might differ.
Moreover, you have the flexibility to convert this event into a conversion and track sign-ups accordingly. The best part is that you don’t need coding skills to make this magic happen.
This feature can be utilised in various scenarios. However, if you encounter a situation where it’s still insufficient to meet your needs, you may have to set up events with custom parameters.
In the following sections, we will discuss advanced techniques for configuring custom events.
Unlike Universal Analytics, which only allows the tracking of events with four predefined parameters (Event Category, Event Action, Event Label, and Event Value), GA4 offers more flexibility by allowing you to define as many event parameters as you need.
While this provides highly customised event tracking with abundant data, it no longer offers the plug-and-play simplicity of UA. Configuring custom event tracking in Google Analytics 4 requires several steps.
To track events with custom parameters in GA4, you must first add custom dimensions, and there are two ways to achieve this: gtag-based implementation and GTM-based implementation.
Let’s begin with the gtag-based implementation. If you prefer the GTM-based approach, you can skip this section and refer to the later instructions provided.
To implement the gtag-based approach, follow the step-by-step guide outlined below.
Adding Custom Dimensions in GA4
According to GA4 documentation, you should trigger a gtag event when a user clicks on your menu items (assuming the links are within the <li> HTML tag with the class .menu-item). Here’s an example code snippet:
<script>
document.addEventListener('DOMContentLoaded', function() {
var menu_anchors = document.querySelectorAll('.menu-items a');
//Click event listener for each anchor element
menu_anchors.forEach((anchor) => {
anchor.addEventListener('click', (event) => {
gtag('event', 'menu_clicks', {
'event_category': 'Menu Clicks',
'event_action': anchor.href,
'event_label': anchor.textContent
});
});
});
});
</script>
Feel free to choose any desired event name instead of “menu_clicks” and make sure to provide the three parameters. This implementation suits situations where you don’t have Google Tag Manager and prefer the gtag approach.
You can also use custom parameters to pass additional values to predefined events, such as the “sign_up” event. According to GA’s documentation, only one parameter called “method” is supported, which can be anything you choose (e.g., social login, email, etc.). Here’s an example of adding a custom parameter to the “sign_up” event:
gtag("event", "sign_up", {
method: "Google"
});
By incorporating custom dimensions, you can include additional information, such as the sign-up subscription plan, by adding the “sign_up_plan” custom dimension:
gtag("event", "sign_up", {
method: "Google",
sign_up_plan: "basic"
});
Implementing these solutions requires basic JavaScript programming skills, which can be easily acquired with the assistance of resources available online.
To summarise, you can copy and paste the provided code snippet into your CMS code editor, and you’re good to go.
Now, let’s proceed to setting up the same event tracking using the GTM tag.
Assuming you have already installed GA4 via Google Tag Manager, we will continue with the steps from there.
You need to add custom dimensions following the steps explained earlier.
function() {
'use strict';
try {
var clickElement = {{Click Element}}; // clickable element DOM object
var clickParent = clickElement.closest('.menu-item'); // clickable element DOM object parent with class .menu-item
if (!clickParent) return '';
return clickParent.getAttribute('class'); // if the element exists, return the class attribute
} catch (err) {
return '';
}
}
This code retrieves the parent class attribute of the clicked element when it has a parent element with the class “.menu-item.” If there is no such parent element, it returns an empty value.
This ensures that only clicks on menu item links are detected, while other links on the page are ignored.
If you prefer custom coding and have GTM, you can use the dataLayer.push() method. In this case, you would need to add event_category, event_action, and event_label parameters in GTM as dataLayer variables.
On your website’s <head> section, you should use the provided code snippet:
<script>
document.addEventListener('DOMContentLoaded', function() {
const menuItems = document.querySelectorAll('.menu-item');
menuItems.forEach(function(menuItem) {
menuItem.addEventListener('click', function(event) {
// Link and anchor text of the clicked link
let link = menuItem.querySelector('a').href;
let anchorText = menuItem.querySelector('a').textContent;
// Trigger the custom event 'menu_clicks' using dataLayer.push()
dataLayer.push({
'event': 'menu_clicks',
'event_category': 'Menu Clicks',
'event_action': link,
'event_label': anchorText
});
});
});
});
</script>
To ensure everything is working correctly, it’s essential to check if you see an event log with the same parameters in the GA4 debug view. Sometimes GTM might fire, but due to misconfiguration, the data may not be passed to GA4.
In the case of the gtag implementation, you can enable debug mode by installing the Chrome extension or by adding the following line of code to your GA4 configuration:
gtag('config', 'G-12345ABCDE', { 'debug_mode': true });
Always remember to debug and verify that all custom parameters are passed as expected.
In conclusion, GA4 presents certain challenges and is not as straightforward as Universal Analytics. It requires a significant amount of time to learn and understand. However, it brings a plethora of new features that can elevate your analytics to an unprecedented level.
By customising event tracking, you gain a powerful skill that can even help you overcome some of the attribution model limitations that Google Analytics is sunsetting. For example, you can track users’ first visit source in a custom dimension.
Embrace the opportunities offered by GA4 and explore its capabilities to enhance your analytics efforts.
There is little point simply tracking events on a website. Often marketers can fall into the trap of gathering too much data thinking it will all “be useful eventually”. As a rule, event tracking is most useful when tied clearly to specific goals. A goal might be to increase sales by 10% or collect a certain number of new subscribers.
Everyone will have their own set of unique factors, but here are a few common ones not to be overlooked:
Add to Cart: This will let you know how many people are getting to the ‘add to cart stage’ of the sales journey. If these people are going this far, and then not completing the purchase, it might be a sign that your checkout procedure needs to be simpler or better designed. A user experience assessment might help you identify what you can do to improve this and see whether your ‘add to cart’ versus ‘checkout’ ratio improves.
Register: Keeping tabs on this will show you how many people are registering to your site each month, and will let you watch out for any monthly boosts or declines in registrations. You can then do some detective work to see what changes might have occurred on the site to prompt this change.
Subscribe to Newsletter: This is another great way to keep track of how users are interacting with your website. A subscription to your newsletter is a sign that the user had such a positive experience with your website and brand, that they can’t get enough. Again, follow the monthly statistics for this and watch out for any fluctuations.
Send to Friend: This should certainly be considered a conversion; you have persuaded someone to send a link to content on your site to a friend. It is a sign that, whatever you are doing or selling, is working.
Follow on Social Media: It is a good idea to track any buttons that will take users from your website to your Facebook, LinkedIn, Twitter or other social media platforms. Engagement via social channels is proof that your website has given visitors a positive experience with your brand. As with everything, track any fluctuations.
Event tracking is one of the most fundamental parts of any analytics regimen. Being able to directly follow the way that users interact with your website is not only informative of how people view your product and your site, but also paves the way for future optimisation based upon what is and is not working.
Related Topics
4 mins
OpenGoogle Analytics
Google Analytics is a free web service that provides comprehensive statistics and analytical tools for SEO and marketing purposes. Analytics monitors traffic to a website and collects data on how visitors interact with the site.
3 mins
OpenEngagement Rate
3 mins
OpenGoogle Fred Update