How to Set up Event Tracking in Google Analytics 4

Event tracking is a powerful way to measure user behavior on your website or app. By tracking events, you can learn what actions users are taking, how they are interacting with your content, and where they are dropping off. This information can be used to improve your marketing campaigns, website performance, and user experience.

In this article, we will show you how to set up event tracking in Google Analytics 4. We will cover everything from creating events to adding parameters. By the end of this article, you will be able to track user behavior on your website or app and use this data to improve your digital marketing strategy.

Table of Contents:

1. What are Google Analytics 4 Events?
2. Types of Events that Google Analytics 4 Automatically Tracks by Default
3. How Does Google Analytics 4 Event Tracking Work
4. How to Set up Custom Event Tracking Manually in GA4
5. How to Set up Custom Event Tracking with Custom Parameters in GA4
   • How to Set up Event Tracking in Google Tag Manager
6. How To Implement Custom Event Tracking By Using dataLayer.push() Method
7. How Do You Know if Google Analytics 4 Event Tracking is Working?
8. Final Thoughts

What are Google Analytics 4 Events?

If you are unfamiliar with GA4 events, it is basically a way to track user actions on your website. It is like a virtual detective that follows your website visitors around and takes notes on what they do. The beauty of GA4 events is that you can customize them to track the exact actions that matter to you. Whether it is button clicks, video views, or even form submissions, GA4 is the ticket to unlocking the secret to your website’s success.

Types of Events that Google Analytics 4 Automatically Tracks by Default

Google Analytics 4 (GA4) automatically tracks several events by default without any additional configuration. These events include:

• click
• file_download
• form_start
• form_submit
• page_view
• scroll
• session_start
• user_engagement
• video_complete
• video_progress
• video_start
• view_search_results

It also collects the following parameters by default:

• page_location
• page_referrer
• page_title
• screen_resolution
• language

However, these default events and parameters may not be enough for comprehensive tracking. This is where custom event tracking comes in.

How Does Google Analytics 4 Event Tracking Work?

Google Analytics 4 event tracking allows you to measure specific interactions or occurrences on your website or app. When a user performs an action, such as clicking a link, submitting a form, or watching a video, GA4 sends a request with detailed information about the event. This information is then processed and aggregated to generate meaningful reports and insights.

There are two types of events in GA4:

• Automatically collected events are events that GA4 tracks by default; these events include things like page views, session starts, and user engagement
• Custom events are events that you define; you can use custom events to track any type of interaction that you want to measure

When you track an event in GA4, you provide the following information:

• Category: This identifies the general type of event, such as “click,” “form submission,” or “video play”
• Action: This identifies the specific event that occurred, such as “click on the ‘Contact Us’ button,” “submit the ‘Contact Us’ form,” or “watch the ‘About Us’ video”
• Label: This provides additional information about the event, such as the value of a purchase or the number of seconds a video was watched
• Parameters: These are optional pieces of information that you can add to an event; parameters can be used to provide more detailed information about an event, such as the user’s location or the device they are using

How to Set up Custom Event Tracking Manually in GA4

One of the most powerful features of Google Analytics 4 (GA4) is the ability to create custom events based on other events that meet certain criteria. This can be done by navigating to the Events page in GA4 and clicking the “Create Event” button in the top right corner.

In the popup dialog, you can set the criteria for when your new custom event should fire. For example, you could create a “newsletter_sign_up” event that fires when the page_view event occurs, and the page_location parameter contains “newsletter-confirmation” in the URL. This means that GA4 will track a custom event whenever a user visits a page with “newsletter-confirmation” in the URL, even if they did not actually sign up for the newsletter.

You can also turn this custom event into a conversion, which means that it will be counted as a conversion in your GA4 reports. This can be helpful for tracking the effectiveness of your marketing campaigns and identifying the pages on your website that are most likely to lead to conversions.

Creating custom events with custom parameters is another advanced technique that can be used to track more granular data in GA4. We will discuss it in detail below.

How to Set up Custom Event Tracking with Custom Parameters in GA4

In GA4, you can define as many event parameters as you want. The big advantage is that you get highly customized event tracking with lots of data. Configuring custom event tracking in Google Analytics 4 (GA4) requires several steps. To track events with custom parameters in GA4, you need to start by adding custom dimensions. And there are two ways to do that:

• gtag
• gtag

We will first discuss gtag-based implementation.

1. Go to Admin > Property > Custom definitions



2. Next, click the Create custom dimensions button and enter the dimension name and event parameter

Let’s assume that you want to track clicks on your main navigation menu. In this 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.

An example use case for this setup is to change the anchor text of menu clicks and track which ones attract more clicks. According to GA4 documentation, you should trigger a gtag event when somebody clicks on your menu items. Please, see the example code below.

The “menu_clicks” event name can be anything you want, and it will have three parameters. You can use this approach if you don’t have Google Tag Manager and prefer gtag implementation.

You can use custom parameters to pass additional values to predefined events. For example, sign_up event. The GA’s documentation states that it supports only one parameter called “method”. It can be email, social login, etc.

Now let’s set up the same event tracking using the GTM tag.

How to Set up Event Tracking in Google Tag Manager

You will need to create a new Javascript variable in GTM that returns clicked anchor’s parent tag class name as in GTM there is no built-in way to get parent DOM element attributes.

1. Go to Variables > User-Defined variables and click the New button; in the popup dialog, choose Custom Javascript



2. Copy and paste this code into it



This code returns the parent class attribute of a clicked element when there is a parent with class ‘.menu-item’, or it returns an empty value if there is no such parent element.

You can use this to ensure you only detect clicks on menu item links.

3. Create a new trigger in GTM that fires on all clicks on elements with a parent li with a class “menu-item”
4. Navigate to triggers and click the New button in the top right corner
5. Select Clicks > Just Clicks from the popup dialog



6. Select Some Link Clicks > Configure it to fire on clicks where the parent element class contains the string “menu-item”



7. Navigate to Tags and add the GA4 Event tag



8. Fill in the event name “main_menu_clicks” and add custom parameters event_category, event_action, and event_label



9. Choose Click Text and Click URL variables for event action and label



10. Select the trigger of Menu Clicks you created before, and save the tag



11. Publish changes and debug to ensure when you click on your menu items, the event is triggering with all parameters set correctly

How To Implement Custom Event Tracking By Using dataLayer.push() Method

If you prefer custom coding and have GTM, you can use the datalayer.push() method. In this case, use the code below on your website section.

//Click event listener to menu items with the ‘.menu-item’ class
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
});
});
});
});

How Do You Know if Google Analytics 4 Event Tracking is Working?

It is also important to check if you see an event log with the same parameters in GA4 debug view. It may happen that GTM will fire, but because of misconfiguration, it will not be passed to GA4.

If you have gtag implementation, you should enable debug mode. To do that, install the Chrome extension or add one line of code to your GA4 configuration.

gtag(‘config’, ‘G-12345ABCDE’, { ‘debug_mode’:true })

Remember to always debug and make sure that all custom parameters pass as expected.

Final Thoughts

Event tracking in Google Analytics 4 opens up a whole new world of insights for your analytics journey. Of course, GA4 may have a learning curve compared to the trusty old Universal Analytics, but it’s worth the effort!

We understand that event tracking can be a bit complicated at first. That’s where we come in. Our analytics team will guide you through the event tracking adventure in GA4. Whether you need tips, implementation support, or tailored solutions, we will be happy to help you.

Reach out to us today, and let’s rock your data like never before!