Mastering Video Player Tracking in Google Analytics 4 Using the Player’s API

Mastering Video Player Tracking in Google Analytics 4 using the Player's API
Estimated Reading Time: 8 minutes

Introduction

In today’s digital landscape, video content has become increasingly prevalent across various online platforms. As a website or app owner, it is crucial to understand how users interact with your videos on your site to optimize their viewing experience and drive meaningful insights. Google Analytics 4 (GA4) offers robust tracking capabilities, including the ability to track video players using the player’s API. In this blog post, we will explore how to implement video player tracking in GA4 using the player’s API, allowing you to unlock valuable data and make informed decisions about your video content.

Step 1: Determine the business questions you want to answer by tracking video

Depending on the API, you can get back just the basics (play/complete) or details of a video interaction (milestones, volume changes, etc). Determine based on the API support what you want to track. Keep in mind, however, that you are limited to 500 events per session and if you are a 360 customer you are charged for events sent to GA4, so use them judiciously. In other words, only track what you need to track, not just everything you can track.

Think about what business questions you may want to answer by tracking videos. Consider how this will join with other GA4 data. For example, is knowing that a particular campaign brought users to watch a certain video to the end something you would need to know? You may find out that the video platform/player itself may provide enough data for your needs without asking GA4 to track every video.

Step 2: Set up GA4

Before diving into video player tracking, make sure you have GA4 set up on your website or app. Create a GA4 property, obtain the Measurement ID, and add the GA4 tracking code to your website or app, following Google’s documentation.

Step 3: Set up Google Tag Manager (GTM)

To serve tags on your site, including video tracking tags, we recommend a tag management tool like Google Tag Manager. This should be set up on your site before moving on to the next section. 

Step 4: Look for pre-existing code for your video player

See if there are any tag manager containers/code you can use for the video player you are interested in. This will make your life much easier than having to decode the player’s API. They can also be used as examples for working with new APIs.

For Vimeo, we will use an example from Analytics Mania: https://www.analyticsmania.com/google-tag-manager-recipes/vimeo-ga4/

Step 5: Integrate the player’s API

The video player’s API is an essential component for tracking video in GA4. It provides methods to capture various events and user interactions associated with video playback. While video player events can be captured using GTAG, we will look at capturing them via GTM. We do this because Tag Manager allows easier configuration and integration with both GA4 and other tags that may need to consume video tracking information.

To integrate the player’s API, you’ll need to follow these steps. We will look at Vimeo tracking as an example:

  • Load the video player’s API: You need to load in the player’s API code in order to utilize tracking on the site. This is usually a link to a JavaScript file.
    • Note: you can also include your event tracking inside the call to this API, using a custom HTML tag in Tag Manager.
    • For Vimeo, this looks like the following:
      function init(){
      try{
      var player=document.getElementsByTagName(“iframe”);
      for (i = 0; i < player.length; ++i) {
      var url=player[i].getAttribute(“src”);

      if(/player\.vimeo\.com\/video/.test(url)){ // vimeo iframe found
      if(!player[i].hasAttribute(“id”)){ // id attribute missing
      player[i].setAttribute(“id”,”vimeo_id_”+i); // add id attribute
      }
      var urlUpdated=false;
      if(!/api=/.test(url)){ // check to see if api parameter is in src attribute url=updateUrl(url,”api”,1);
      urlUpdated=true;
      }

      if(!/player_id=/.test(url)){ // check if player_id is in src attribute url=updateUrl(url,”player_id”,player[i].getAttribute(“id”));
      urlUpdated=true;
      }
      if(urlUpdated){ // repopulate src attribute with added parameters player[i].setAttribute(“src”,url)
      }
      videoLabels[player[i].getAttribute(“id”)]=player[i].getAttribute(“src”);
  • This block of code looks for a Vimeo video on your site, appends a call to the API and adds a player ID attribute, all necessary for tracking.

  • Track video player events: The player’s API provides event listeners to track user interactions with the video player. Common events include video starts, pauses, completes, progress, and other custom events. Use these event listeners to capture relevant data and send it to the datalayer where it can be consumed by multiple tags.
    • For Vimeo, this looks like the following:
      function onPlay(data){
      try{
      var t = data.data.duration – data.data.seconds <= 1.5 ? 1 :(Math.floor(data.data.seconds / data.data.duration * 4) / 4).toFixed(2); dataLayer.push({
      event: “video”,
      video_action: “play”,
      video_url: ‘https://vimeo.com/’ + getLabel(data.player_id),
      video_percent: data.data.percent.toFixed(2) * 100,
      video_title: _playerTitle[getLabel(data.player_id)].toLowerCase()
      });
      }
      catch(err){
      }
      }

Step 6: Define Custom Events

While the player’s API captures default video player events, you can also define custom events to track specific actions or behaviors within the video player. This flexibility allows you to collect more granular data based on your unique requirements. To define a custom event, use the datalyer.push function to send an event with a specified name and relevant parameters. These events can include user interactions like seeking, volume changes, or any other specific actions you want to track. In other words, you can pass anything supported by the API that is relevant for your use case. Again, just track what you need to track, not everything that can be tracked.

Once you have defined your events, build GA4 tags to capture these events and send them to GA4. These may be separate tags for each event, or one tag with an event parameter. Below, we see an example of a tag capturing multiple events with the same parameters:

Make sure to trigger your tag based on the trigger event supported by your API code in Step 4.

Step 7: Test and publish your GTM container

Once you have set up your event tags, test your container. You should see your GA4 events fire for each corresponding video event. What if they don’t fire? Check the following:

  • Are you using the proper event called out in your API code to fire your tags?
  • Is your API code set up to push events to the datalayer?
  • Are you using the proper API code for your video player? Note that most players will have their own API/need their own tag manager code to be collected.

Once your tags are working as expected, publish your container. You will then see data in GA4 within 24 hours assuming people are viewing your videos.

Step 8: Utilize GA4 video analytics reports

Once you have integrated the player’s API and set up video tracking, GA4 provides powerful video analytics reports to analyze user engagement and optimize your video content. Some essential reports include:

  • Acquisition: See how users are getting to your site and its videos. See how marketing campaigns drive video engagement.
  • Engagement and retention: Understand how users engage with your videos by analyzing metrics like video starts, completion rates, drop-off points, and average watch time.
  • Audience behavior: Explore audience segmentation and behaviors using demographic data, device information, or other user attributes. Identify patterns and preferences to tailor your video content accordingly.
  • Conversions and goals: Track conversion events associated with video plays, such as form submissions, purchases, or sign-ups. Measure the effectiveness of your videos in driving desired user actions.
  • Funnel analysis: Analyze the user journey by creating funnels to identify where users drop off or take specific actions within the video player. Optimize the user experience to improve engagement and conversion rates.

For example, here is a report by title and URL that shows source/medium information for video completes:

Conclusion

Tracking video players in GA4 using the player’s API opens up a world of insights and opportunities to enhance your video content strategy. By implementing the steps outlined in this blog post, you can gain a deeper understanding of how users interact with your videos and make data-driven decisions to improve engagement, retention, and conversions. Leverage GA4’s powerful video analytics reports to optimize your video content and create impactful experiences for your audience.

Do you have questions about video player tracking?

Our team of experts is here to help whenever you need us.
Facebook
Twitter
LinkedIn
Email
Originally Published: August 1, 2023
August 1, 2023

Other Articles You Will Enjoy

Maximizing Data Accuracy: How to Implement Referral Exclusion in Google Analytics 4

Maximizing Data Accuracy: How to Implement Referral Exclusion in Google Analytics 4

Introduction In the world of digital analytics, accurate and reliable data is crucial for understanding user behavior, optimizing marketing strategies, and driving business growth. …

4-minute read
Pro Tip: How to Identify Unique Interactions in Google Analytics 4

Pro Tip: How to Identify Unique Interactions in Google Analytics 4

As more users continue to access and leverage Google Analytics 4 (GA4) Standard Reports and Exploration Reports, one thing that they might start to…

5-minute read
Top 4 Considerations When Comparing Google Analytics 4 to Universal Analytics

Top 4 Considerations When Comparing Google Analytics 4 to Universal Analytics

In today’s digital landscape, understanding user behavior is crucial for businesses to optimize their online presence and drive growth. Google Analytics has been a…

5-minute read
Best Practices for Defining and Using Event Parameters in Google Analytics 4

Best Practices for Defining and Using Event Parameters in Google Analytics 4

Introduction Google Analytics 4 (GA4) has introduced a new way to track and measure user interactions on your website or app. Instead of events…

5-minute read
Navigating the Shift: Understanding the Impacts of Transitioning from Universal Analytics to Google Analytics 4

Navigating the Shift: Understanding the Impacts of Transitioning from Universal Analytics to Google Analytics 4

2022 marked a significant shift in the digital analytics landscape. Google announced that Universal Analytics would stop processing hits in July 2023 (July 2024…

3-minute read
Event Tracking in Google Analytics 4: How to Set Up & Optimize Your Data

Event Tracking in Google Analytics 4: How to Set Up & Optimize Your Data

There are a few out-of-the-box events that Google Analytics 4 (GA4) tracks but custom events require a bit more configuration. GA4 events are freeform…

8-minute read
Google Analytics 4 Explore Reports: Spilling the Tea on How to Set Yourself Up for Success in Google Analytics 4

Google Analytics 4 Explore Reports: Spilling the Tea on How to Set Yourself Up for Success in Google Analytics 4

As more users continue to access and leverage Google Analytics 4 (GA4) reporting features, there seems to be one question that is living rent…

16-minute read
Cross-Device Tracking in Google Analytics 4: How to Identify Users Across Multiples Devices

Cross-Device Tracking in Google Analytics 4: How to Identify Users Across Multiples Devices

Google introduced a new and improved way of tracking the user journey across multiple devices in Google Analytics 4 (GA4). In other words, cross-device…

5-minute read
How to Use Data Exploration Reports in Google Analytics 4 to Uncover Hidden Insights and Opportunities

How to Use Data Exploration Reports in Google Analytics 4 to Uncover Hidden Insights and Opportunities

Introduction Now that we have migrated away from Universal Analytics, you may be wondering to yourself, “How can I use Google Analytics 4 (GA4)…

7-minute read

Get Your Assessment

Thank you! We will be in touch with your results soon.
{{ field.placeholder }}
{{ option.name }}

Talk To Us

Talk To Us

Receive Book Updates

Fill out this form to receive email announcements about Crawl, Walk, Run: Advancing Analytics Maturity with Google Marketing Platform. This includes pre-sale dates, official publishing dates, and more.

Search InfoTrust

Leave Us A Review

Leave a review and let us know how we’re doing. Only actual clients, please.