gerry leo nugroho

Posted on May 15 • Edited on Aug 7

Event Tracking and Parameters: Setting up custom events and parameters in Google Analytics 4

#google #analytics #tutorial #beginners

Photo by 1981 Digital on Unsplash

Event tracking in Google Analytics 4 (GA4) is a powerful way to monitor user interactions on your website. Unlike Universal Analytics, GA4 offers enhanced flexibility with events, allowing you to customize tracking to fit your specific needs. This guide will help you understand how to set up default and custom events, use parameters for detailed insights, and monitor these events effectively.

Events Tracking in GA4

In GA4, events are central to tracking user interactions. Unlike the predefined event structure in Universal Analytics, GA4 events do not require categories, actions, or labels, offering more customization and flexibility.

Default Events

GA4 automatically tracks several standard events once the property is set up, providing a foundational layer of user interaction data:

Page views (page_view): Tracks every time a page is viewed.
Scrolls (scroll): Captures when users scroll to the bottom of a page.
Outbound clicks (click): Records clicks on links that lead away from your domain.
Site search (view_search_results): Tracks search results within your site.
Video engagement (video_start,video_progress,video_complete): Monitors video interactions.
File downloads (file_download): Logs when files are downloaded from your site.

These default events require no additional configuration, giving you immediate insight into user behaviors, so why would anyone be needing additional capabilities beyond the normal events, following are some of the pointers that may highlight the benefits.

Enhancing User Experience

Tracking default events can help identify how users interact with your site, allowing you to enhance the user experience. For instance, understanding scroll patterns and video engagement can guide content placement and multimedia use.

Conversion Tracking

For businesses focused on conversions, default events like page_view and click on outbound links are essential. They help you understand the user journey and identify potential drop-off points, enabling you to optimize conversion funnels.

Custom Events

Custom events in GA4 allow you to track specific interactions relevant to your business goals. Here’s how to set them up:

Defining the Custom Event

First, identify the user action you want to track, such as a button click on a key page. This ensures that the data you collect aligns with your business objectives.

Creating the Event in GA4

Access the Events Section: Navigate to the Events section in your GA4 property.
Create Event: Click on Create Event and then Create again on the next screen.
Define the Event: Specify the existing events it’s based on and any conditions or additional parameters. For example, tracking a "Sign Up" button click can be based on the click event with conditions like event_label="sign_up_button".

Modifying the Event Code on Your Website

Depending on your setup, you might need to modify the event tracking code. Using Google Tag Manager (GTM) can simplify this process:

Create a New Tag: In GTM, create a new tag for the event.
Set Trigger Conditions: Define trigger conditions that match your criteria (e.g., button ID or class).
Configure Parameters: Name the event and specify parameters in the tag configuration.

Why & When to Implement Custom Events

Custom Events for Detailed Insights

Implement custom events when you need detailed insights into specific user interactions not covered by default events. This is particularly useful for tracking conversions, understanding user engagement with specific site elements, and optimizing marketing campaigns.

Event Tracking for User Segmentation

Custom events are valuable for segmenting users based on their interactions. For instance, tracking clicks on different promotional buttons can help you understand which campaigns are most effective, allowing for more targeted marketing efforts.

Parameters

GA4 allows adding parameters to events, providing additional context and detail about the events. There are two types of parameters:

Automatically Collected Parameters

These include details like page_location, page_referrer, and screen_resolution, offering useful context without extra configuration.

Custom Parameters

Custom parameters are user-defined and tailored to your specific tracking needs. For example, for a "Sign Up" event, you might include parameters such as method (e.g., social sign-in, email sign-up) or promotion_code.

To add custom parameters:

Edit Parameter Reporting: In the Events section of GA4, click on an event name.
Add Custom Parameter: Click Edit parameter reporting and add your custom parameter name and description.

Example: Tracking a Button Click

Assume you want to track clicks on a "Contact Us" button using Google Tag Manager:

In Google Tag Manager:
- Create a new tag and choose GA4 Event.
- Select your GA4 configuration tag.
- Name the event (e.g., contact_us_click).
- Add parameters if needed (e.g., button_text, page_title).
Set the Trigger:
- Create a new trigger for the button click.
- Configure the trigger to fire on clicks of the "Contact Us" button using CSS selectors, ID, or other attributes.
Publish the Container: Ensure your GTM container is published to start tracking the event.

Setting Up GA4 Event Tracking Without Google Tag Manager

Install the GA4 Global Site Tag

First, ensure that you have the GA4 global site tag (gtag.js) installed on your website. This code snippet should be placed in the <head> section of your HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Your Website</title>
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-XXXXXXXXXX');
  </script>
</head>
<body>
  <!-- Your website content -->
</body>
</html>

Replace G-XXXXXXXXXX with your GA4 Measurement ID.

Add Event Tracking Code

Next, add the event tracking code directly to the specific element or interaction you want to track. For example, to track clicks on a "Contact Us" button:

<!DOCTYPE html>
<html>
<head>
  <title>Your Website</title>
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-XXXXXXXXXX');
  </script>
</head>
<body>
  <!-- Your website content -->
  <button id="contact-us">Contact Us</button>

  <script>
    document.getElementById('contact-us').addEventListener('click', function() {
      gtag('event', 'contact_us_click', {
        'event_category': 'engagement',
        'event_label': 'Contact Us Button',
        'value': 1
      });
    });
  </script>
</body>
</html>

In this example:

The gtag('event', 'contact_us_click', {...}) function call sends an event to GA4.
The event name is contact_us_click.
Additional parameters like event_category, event_label, and value provide more context about the event.

Customizing Parameters

Customize the parameters based on your tracking needs. For example, if you want to capture the button text dynamically, modify the code as follows:

<script>
  document.getElementById('contact-us').addEventListener('click', function() {
    var buttonText = this.innerText;
    gtag('event', 'contact_us_click', {
      'event_category': 'engagement',
      'event_label': buttonText,
      'value': 1
    });
  });
</script>

Testing Your Implementation

After adding the tracking code, test your implementation to ensure events are correctly recorded in GA4:

Real-Time Reports: Go to the Realtime section in GA4 and trigger the event (e.g., click the "Contact Us" button). You should see the event appear in real-time.
Debugging: Use the GA4 DebugView to monitor detailed event data. Enable debug mode by adding ?debug_mode=true to your URL while testing.

Monitoring and Analyzing Events

Once events are being tracked, you can analyze them in GA4:

Events Section: Navigate to the Events section to see all tracked events and their details.
Analysis Hub: Use the Analysis Hub to create custom reports and analyze user behavior in depth.

By directly embedding the GA4 event tracking code into your website's HTML, you can effectively track specific user interactions without using Google Tag Manager. For further details on implementing and optimizing GA4 tracking, refer to the official Google Analytics Help Center.

DEV Community