Call Us

Close

Say Hello

Please fill in the form below and one of our specialists will be in touch with you, alternatively contact us on:

    Whooosh!

    Your message has been sent successfully.

    We have received your enquiry and if it’s something we can help with, we’ll get back in touch with you as soon as possible.

    8 mins

    Event Tracking and Conversion Tracking in Google Analytics 4

    31 January 2023

    highlight 6

    What is event tracking and conversion tracking?

    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.

     

    Different Types of Events Automatically Tracked by GA4 By default

    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:

    • Click events
    • File download events
    • Form start events
    • Form submit events
    • Page view events
    • Scroll events
    • Session start events
    • User engagement events
    • Video complete events
    • Video progress events
    • Video start events
    • View search results events

    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.

     

    Setting up Custom Event Tracking in GA4

    Let’s delve into the process of setting up custom event tracking in GA4.

    Understanding How Google Analytics Event Tracking Works

    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.

    Manually Configuring Custom Event Tracking in GA4

    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.

    Configuring Custom Event Tracking with Custom Parameters in GA4

    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

    • Navigate to the Admin section, then select Property, and finally click on Custom definitions.
    • Locate the “Create custom dimensions” button and click on it. Create an event-scoped custom dimension by entering the dimension name and event parameter.
    • For example, let’s start with custom events tracking analogous to Universal Analytics, using custom parameters for Event Category, Event Action, and Event Label.
    • Suppose you want to track clicks on your main navigation menu. In that case, you can set the Event Category to “Menu Clicks,” the Event Action to the anchor link, and the Event Label to the anchor text.
    • One possible use case for this setup is to modify the anchor text of menu items and track which ones attract more clicks. This information can help optimise your navigation menu for improved user engagement and conversion rates.

    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:

    html
    <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:

    javascript
    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:

    javascript
    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.

    Setting Up Event Tracking in Google Tag Manager (GTM)

    • Create a new JavaScript variable in GTM that returns the class name of the clicked anchor’s parent tag. This is necessary because GTM lacks a built-in method to retrieve parent DOM element attributes.
    • Navigate to Variables > User-Defined Variables and click the “New” button in the top right corner. In the popup dialog, select “Custom JavaScript.”
    • Copy and paste the provided code into the custom JavaScript variable.
    javascript
    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.

    • Create a new trigger in GTM that fires on all clicks on elements with a parent <li> tag that has a class of “menu-item.”
    • Navigate to Triggers and click the “New” button in the top right corner.
    • From the popup dialog, select “Click – Just Links.”
    • Choose “Some Link Clicks” and configure it to fire on clicks where the parent element class contains the string “menu-item.”
    • Proceed to Tags and add the GA4 Event tag.
    • Choose the appropriate tag type.
    • Fill in the event name as “main_menu_clicks” or any desired name and add the custom parameters event_category, event_action, and event_label.
    • For event action and label, choose the built-in variables “Click Text” and “Click URL.”
    • Select the trigger “Menu Clicks” that we created earlier and save the tag.
    • Finally, publish the changes and use the debug mode to verify that the event is triggered correctly with all the specified parameters when clicking on your menu items.

    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:

    html
    <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:

    javascript
    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.

    Which events should your site be tracking?

    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.