Today we will be tracking user interaction with videos on your website. Google Analytics 4 (GA4) automatically tracks video starts, completes, and progress using the Enhanced Measurement functionality. Once this is enabled in your GA4 property, these three video statuses will be tracked by default.
If you’d prefer to track other video events such as pause, seek, and buffer or a specific progress percentage threshold, this blog will help you with that. Google Tag Manager (GTM) has built-in variables and triggers to track different combinations of video events. We will go over all of the tracking options in GA4 and how to implement them using GTM. Here’s what we’ll cover:
Let’s go over the specific video tracking functionality we want to implement for this blog scenario. For this example, we want to track when a user starts, pauses, seeks, buffers, and completes a YouTube video on our website. We also want to track when our visitors reach certain video progress thresholds while watching a video, specifically: 25, 50, 75, and 95 percent.
For implementing video tracking in GTM we must first enable all of the built-in video variables. Here's how to do that:
Once our variables are enabled, we will now configure our video trigger. The OOTB YouTube trigger in GTM allows for us to track all of the following video events:
One way we can set up our video tracking trigger in GTM is by checking all of the event triggers listed in our scenario (i.e. start, pause, complete, progress percentages, etc.) and build one singular trigger. It will looking like this:
Video Tracking Trigger Setup | |
---|---|
Trigger Name: | YouTube Videos |
Trigger Type: | YouTube Video |
Capture: |
|
Advanced: | Add JavaScript API support to all YouTube videos |
Enable this trigger on: | Dom Ready (gtm.dom) |
This trigger fires on: | All videos |
Here is a screenshot of what it will look like in your GTM triggers:
The issue with this, is that GA4 will track every specific percentage threshold of each video status: starts, completes, pauses, seeks, and buffers, which could quickly become a large amount of events being fired in our GA4 property. Since we are looking at tracking so many different video events, we want to ensure we aren’t pushing any unnecessary events into our GA4 property and reporting. There are limitations in our GA4 property that can be found here.
According to Google, you can only modify up to 50 existing events and create up to 50 events based on existing events.
We’d recommend keeping your event naming conventions as simple as possible in your GA4 property. In the case of minimizing the amount of custom event names we will be creating, we can create two video triggers and implement two different tags:
Video Status: This tag will track the video start, pause, seek, buffer, and complete events.
Video Progress: This tag will track the specific percentage thresholds we want to track with every video interaction on our website (i.e. 25, 50, 75, and 95 percent).
The screenshot below shows the potential for multiple event names that can potentially fill your GA4 property because there are no naming constraints on the percentages. As you can see there can be several different versions of video_pause_{{video_percentage}} and video_seek_{{video_percentage}} depending on the specific time when people choose to make that interaction.
Having two different video tags will allow us to keep the naming of our percentage based events limited to only our video progress tag. We want to be mindful of the number of naming conventions we are using in our GA4 property as well as what our reporting will look like.
These two triggers will allow us to keep our GA4 reporting simple and as streamlined as possible.
The Video Status trigger will be responsible for tracking video start, complete, pauses, buffers, and seeks, without indicating a specific percentage threshold. The trigger configuration will look like this:
Video Status Trigger Setup | |
---|---|
Trigger Name: | Video Status |
Trigger Type: | YouTube Video |
Capture: |
|
Advanced: | Add JavaScript API support to all YouTube videos |
Enable this trigger on: | Dom Ready (gtm.dom) |
This trigger fires on: | All videos |
The Video Progress trigger will only track specific percentage thresholds a user reaches when watching a video on our website, outlined in our blog scenario: 25, 50, 75, and 95 percent.
Video Progress Trigger Setup | |
---|---|
Trigger Name: | Video Progress |
Trigger Type: | YouTube Video |
Capture: | Progress
|
Advanced: | Add JavaScript API support to all YouTube videos |
Enable this trigger on: | Dom Ready (gtm.dom) |
This trigger fires on: | All videos |
In order to accommodate for the two triggers we created, we will need to configure two corresponding video event tags.
Our Video Status tag will be fairly simple to implement. We would like our video events to be named accordingly: video_{{Video Status}}. This way only the start, complete, pause, seek and buffer statuses will be included in our reporting and won't include several different percentage thresholds, like we demonstrated in the first approach.
Video Status Tag Configuration | |
---|---|
Tag Name: | GA4 Event - Video Status |
Tag Type: | Google Analytics: GA4 Event |
Configuration Tag: | GA4 Configuration |
Event name: | video_{{Video Status}} |
Event Parameters: | |
Parameter Name: | Values |
video_current_time | {{Video Current Time}} |
video_duration | {{Video Duration}} |
video_percent | {{Video Percent}} |
video_provider | {{Video Provider}} |
video_title | {{Video Title}} |
video_url | {{Video URL}} |
video_visible | {{Video Visible}} |
The primary motivator for splitting our video events into two separate tags is to avoid having the percentage thresholds appear in the name of our Video Status events. We prefer to track only the specific percentages we outlined in our blog scenario and keep the status events of our video separate. In our Video Progress event tag, we will need to indicate the video status (in this case - progress) and the video percent in the name for easier reporting: video_{{Video Status}}_{{Video Percent}}.
Video Progress Tag Configuration | |
---|---|
Tag Name: | GA4 Event - Video Progress |
Tag Type: | Google Analytics: GA4 Event |
Configuration Tag: | GA4 Configuration |
Event name: | video_{{Video Status}}_{{Video Percent}} |
Event Parameters: | |
Parameter Name: | Values |
video_current_time | {{Video Current Time}} |
video_duration | {{Video Duration}} |
video_provider | {{Video Provider}} |
video_title | {{Video Title}} |
video_url | {{Video URL}} |
video_url | {{Video URL}} |
video_visible | {{Video Visible}} |
Be sure to test your new custom video tags in the Preview mode and debug mode in your GA4 property.
After loading your tag assistant, be sure to test every video status and ensure your video plays to completion. Here’s a screenshot of the debug mode with both the Video Status and Video Progress tags.
Allow 24 hours for your event data to populate into GA4 and don't forget to trigger all of the video events yourself so your GA4 reports have event data to compile during that time. The built-in reporting function can be found here:
Feel free to configure this page to show the specific event information you need in your reporting.
We hope this blog was helpful in configuring an array of video events on your website using GTM in conjunction with GA4 reporting. This is only one method in tracking video interactions on your website using the built-in capabilities of GTM. If you have a more complex GA4 or GTM configuration you need more insight on, please don't hesitate to reach out to our friendly analytics team. We are always happy to help!
Don't forget, July 1, 2023 Google Universal Analytics will be discontinued. The friendly folks at Fishtank are here to help your enterprise organization with your GA4 and Google Tag Manager needs. Reach out to our digital marketing team at [email protected] for all your Google Analytics and Google Tag Manager needs. Until next time, happy tracking!
Sign up to our bi-weekly newsletter for a bite-sized curation of valuable insight from the Sitecore community.