The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Event Tracking

Next ►
►

Event tracking in Google Analytics allows you to measure user interactions with content that can be tracked independently from a web page or a screen load. Downloads, mobile ad clicks, gadgets, Flash elements, AJAX embedded elements, and video plays are all examples of actions you might want to track as Events.

Key Concepts

  1. Events: User interactions with content that can be tracked independently from a web page or a screen load.
  2. Event Category: The name you supply for the group of objects you want to track.
  3. Event Action: A string that is uniquely paired with each category, commonly used to define the type of interaction.
  4. Event Label: An optional string to provide additional dimensions to the event data.
  5. Event Value: An integer that you can use to provide numerical data about the user event.

Setting Up Event Tracking

Step 1: Modify the Tracking Code

To set up event tracking, you need to modify the Google Analytics tracking code on your website. Here is an example of how to set up an event tracking code:

<!-- Standard Google Analytics tracking code -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXX-X');
</script>

<!-- Event tracking code -->
<script>
  document.getElementById('download-button').addEventListener('click', function() {
    gtag('event', 'download', {
      'event_category': 'button',
      'event_label': 'Download PDF',
      'value': 1
    });
  });
</script>

Explanation

  • Standard Google Analytics tracking code: This is the basic setup for Google Analytics.
  • Event tracking code: This code listens for a click event on an element with the ID download-button and sends an event to Google Analytics with the following parameters:
    • event: The type of interaction (e.g., 'download').
    • event_category: The category of the event (e.g., 'button').
    • event_label: Additional information about the event (e.g., 'Download PDF').
    • value: A numerical value associated with the event (e.g., 1).

Step 2: Verify Event Tracking

After setting up the event tracking code, you can verify that events are being tracked correctly by using the Real-Time reports in Google Analytics.

  1. Go to your Google Analytics account.
  2. Navigate to Real-Time > Events.
  3. Perform the action you are tracking (e.g., click the download button).
  4. Check if the event appears in the Real-Time Events report.

Practical Example

Let's say you want to track when users play a video on your website. Here is how you can set up event tracking for that:

<!-- Standard Google Analytics tracking code -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXX-X');
</script>

<!-- Event tracking code for video play -->
<script>
  document.getElementById('video-player').addEventListener('play', function() {
    gtag('event', 'play', {
      'event_category': 'video',
      'event_label': 'Homepage Video',
      'value': 1
    });
  });
</script>

Explanation

  • Event tracking code for video play: This code listens for a play event on an element with the ID video-player and sends an event to Google Analytics with the following parameters:
    • event: The type of interaction (e.g., 'play').
    • event_category: The category of the event (e.g., 'video').
    • event_label: Additional information about the event (e.g., 'Homepage Video').
    • value: A numerical value associated with the event (e.g., 1).

Exercise

Task

Set up event tracking for a form submission on your website. The form has the ID contact-form.

Solution

<!-- Standard Google Analytics tracking code -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXX-X');
</script>

<!-- Event tracking code for form submission -->
<script>
  document.getElementById('contact-form').addEventListener('submit', function() {
    gtag('event', 'submit', {
      'event_category': 'form',
      'event_label': 'Contact Form',
      'value': 1
    });
  });
</script>

Explanation

  • Event tracking code for form submission: This code listens for a submit event on an element with the ID contact-form and sends an event to Google Analytics with the following parameters:
    • event: The type of interaction (e.g., 'submit').
    • event_category: The category of the event (e.g., 'form').
    • event_label: Additional information about the event (e.g., 'Contact Form').
    • value: A numerical value associated with the event (e.g., 1).

Common Mistakes and Tips

  • Incorrect Element ID: Ensure that the ID used in the event listener matches the ID of the HTML element.
  • Event Not Firing: Verify that the event listener is correctly set up and that the action is being performed.
  • Real-Time Reports: Use Real-Time reports in Google Analytics to verify that events are being tracked correctly.

Conclusion

Event tracking is a powerful feature in Google Analytics that allows you to measure user interactions with your content. By understanding and implementing event tracking, you can gain deeper insights into how users interact with your website, which can help you make data-driven decisions to improve user experience and achieve your business goals.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved