How to Track MP4 Videos with Google Analytics

While Google Analytics 4 (GA4) can automatically track embedded YouTube videos on your website, it won’t automatically track self-hosted HTML5 or MP4 videos that are embedded on your pages. To track these types of videos on your website, the best approach is to use Google Tag Manager.

We’re going to implement a solution that aligns with the automatic tracking that’s available with the Enhanced Measurement feature in Google Analytics. This allows you to automatically track video_start, video_progress, and video_complete events with the following parameters:

• video_current_time which shows the timestamp of where the viewer is in watching the video
• video_duration which shows the duration of the video in seconds
• video_percent is the percentage of the total duration that someone has watched
• video_provider this parameter is ‘youtube’ for embedded YouTube videos
• video_url which is for the URL of the video
• video_title for the title of the video

Okay, let’s cover exactly what you’ll need to track embedded videos. You can also watch our tutorial covering the steps:

Variables to Track Embedded Videos

We’re going to start by creating seven variables. The first variable will check to see if a video is embedded on the current page someone is viewing. We will use this to only fire our video tracking tag on pages that contain videos.

Variable name: HTML5 Video Check
Variable type: Custom JavaScript

function() {return document.getElementsByTagName('video').length > 0;}

Once created, this variable should look like this:

Next, we need to create six data layer variables that will capture all of the details as the embedded video is playing on your website. This will allow us to pass the percentage people have viewed, the name of the video, and other details to our Google Analytics tag.

Variable name: HTML5 Video Current Time
Variable type: Data Layer Variable
Data layer variable name: video_current_time

Here’s what this variable should look like:

You can then go on to create the following data layer variables. You will just need to adjust the value of the ‘Data Layer Variable Name’ for each one to capture the correct details.

Variable name: HTML5 Video Duration
Variable type: Data Layer Variable
Data layer variable name: video_duration

Variable name: HTML5 Video Percent
Variable type: Data Layer Variable
Data layer variable name: video_percent

Variable name: HTML5 Video Provider
Variable type: Data Layer Variable
Data layer variable name: video_provider

Variable name: HTML5 Video Title
Variable type: Data Layer Variable
Data layer variable name: video_title

Variable name: HTML5 Video URL
Variable type: Data Layer Variable
Data layer variable name: video_url

Triggers to Track Embedded Videos

Now that you’ve create the variables to capture information about your embedded videos, the next step is to configure two triggers. The first trigger we’re going to create will be used to add our video tracking tag to pages on our website that have a video embedded. This ensures we’re only adding the additional code when necessary.

Here’s the trigger we will use to check if a video is embedded on a page once it has loaded:

Trigger type: Page View - Window Loaded
This trigger fires on: Some Window Loaded Events
Condition: ‘HTML5 Video Check’, ‘Equals’, ‘true’

The trigger should look like this:

Now we need to create a second trigger. This trigger will be used to fire our GA4 event tag which will send data to Google Analytics. It will look for the video_progress, video_start, and video_complete data layer events to trigger our tag.

Trigger type: Custom Event
Event name: (video_progress|video_start|video_complete)
Use regex matching: Yes

Here’s what the trigger should look like:

The ‘Event Name’ is being cut-off in the image above, so make sure you enter the full value. It should be:

(video_progress|video_start|video_complete)

Tags to Track Embedded Videos

The final step is to create two tags. The first tag we’re going to create does all of the heavy lifting. It’s the code that will push events to the data layer and populate the variables we created when people watch our embedded YouTube videos.

Tag type: Custom HTML
Trigger: HTML5 Video Present

And here’s the code to add to the tag:

<script>(function() {function eventHandler(e) {var video = e.target;var videoTitle = decodeURIComponent(video.currentSrc.split('/').pop());var videoUrl = video.currentSrc;var videoProvider = 'embedded html5 video';var videoCurrentTime = video.currentTime;var videoDuration = video.duration;var pct = Math.floor(100 * videoCurrentTime / videoDuration);var percentMarkers = [10, 25, 50, 75];switch (e.type) {case 'timeupdate':for (var i = 0; i < percentMarkers.length; i++) {var marker = percentMarkers[i];if (pct >= marker && !video._progress_markers[marker]) {video._progress_markers[marker] = true;dataLayer.push({event: 'video_progress',video_percent: marker,video_title: videoTitle,video_current_time: videoCurrentTime,video_duration: videoDuration,video_url: videoUrl,video_provider: videoProvider});}}break;case 'play':if (!video._started) {video._started = true;dataLayer.push({event: 'video_start',video_percent: 0,video_title: videoTitle,video_current_time: videoCurrentTime,video_duration: videoDuration,video_url: videoUrl,video_provider: videoProvider});}break;case 'ended':dataLayer.push({event: 'video_complete',video_percent: 100,video_title: videoTitle,video_current_time: videoCurrentTime,video_duration: videoDuration,video_url: videoUrl,video_provider: videoProvider});break;}}var videos = document.querySelectorAll('video');for (var i = 0; i < videos.length; i++) {videos[i]._progress_markers = {};videos[i]._started = false;videos[i].addEventListener('play', eventHandler);videos[i].addEventListener('ended', eventHandler);videos[i].addEventListener('timeupdate', eventHandler);}})();</script>

Then we need to create a GA4 event tag this tag will collect all of the information as people play our embedded video and sent it to Google Analytics.

Tag name: Google Tag | GA4 | HTML5 Video Tracking
Tag type: Google Analytics: GA4 Event
Measurement ID: Ensure you add the measurement ID from your GA4 data stream
Event name: {{Event}}

You will also need to create the following event parameters:

video_title with a value of {{HTML5 Video Title}}
video_percent with a value of {{HTML5 Video Percent}}
video_current_time with a value of {{HTML5 Video Current Time}}
video_duration with a value of {{HTML5 Video Duration}}
video_provider with a value of {{HTML5 Video Provider}}
video_url with a value of {{HTML5 Video URL}}

Your tag should look something like this:

Finally, apply the ‘HTML5 Video Events’ trigger to your GA4 event tag.

You can now preview and test your container to ensure that your embedded HTML5 MP4 videos are correctly tracked on your website. Once you’re happy everything is working correctly you can publish your container.