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

1. Events Tracking in GA4

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. 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. This guide will help you understand how to set up default and custom events, use parameters for detailed insights, and monitor these events effectively.

---

2. Default Events

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

1. Page views (page_view): Tracks every time a page is viewed.
2. Scrolls (scroll): Captures when users scroll to the bottom of a page.
3. Outbound clicks (click): Records clicks on links that lead away from your domain.
4. Site search (view_search_results): Tracks search results within your site.
5. Video engagement (video_start, video_progress, video_complete): Monitors video interactions.
6. 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 analytics. 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.

---

3. Custom Events

So why would anyone need additional capabilities beyond the normal events in Google Analytics 4? While GA4’s default events—like page views, clicks, and scrolls—cover the basics, they don’t always tell the full story of how users interact with your site or app.

To dig deeper and tailor insights to your unique goals, custom events step in as a game-changer. Below are some pointers that highlight the benefits and shed light on what custom events are, why they’re essential, and when they come into play.

3.1 Unlocking Deeper Engagement Insights

Custom events let you see beyond surface-level stats. For example, tracking how users engage with a quiz or a video series can reveal what keeps them hooked—or what makes them bounce. This level of detail helps you tweak your content or features to boost engagement and retention.

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

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

---

4. Defining the Custom Event

Custom events in GA4 allow you to track specific interactions relevant to your business goals. 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. Here’s how to set them up:

4.1 Creating the Event in GA4

1. Access the Events Section: Navigate to the Events section in your GA4 property.
2. Create Event: Click on Create Event and then Create again on the next screen.
3. 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".

4.2 Modifying the Event Code

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

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

---

5. Parameters

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

5.1 Automatically Collected Parameters

These include details like :

1. page_location
2. page_referrer
3. screen_resolution

offering useful context without the extra efforts and configuration.

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

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

---

6. How to track Button Click (Event Tracking) with GTM

Assume you want to track clicks on a "Contact Us" button using Google Tag and you've already have one proper GA4 installation using GTM in your site.

1. 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).

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

3. Publish the Container:

• Ensure your GTM container is published to start tracking the event.

---

7. How to track Button Click (Event Tracking) without GTM

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.

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.

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

---

9. Testing Your Implementation

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

1. 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.
2. Debugging: Use the GA4 DebugView to monitor detailed event data. Enable debug mode by adding ?debug_mode=true to your URL while testing.

---

10. Monitoring and Analyzing Events

Once events are being tracked, you can analyze them in Google Analytics 4:

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