HTML5 Video

HTML5 Video Tracking Using GTM

This demo uses a video Gutenberg block. Having a built-in video block is super handy for website owners who want to self-host their videos (as opposed to using YouTube, Vimeo, etc.).

Behind the scenes, Gutenberg generates an HTML5 video tag to embed a video in a post/page.

The not so good news is there isn’t a native way for Google Analytics to track HTML5 video play events. Yes, even in this day and age where video pretty much rules.

But, the good news is there is a way to track these events without starting from scratch. You’ll need to be pretty comfortable with Google Tag Manager though ;-).

To see the video play events in real time:

  1. Open Omnibug in your dev console.
  2. Open your GA Realtime > Events report in a separate window.
Google Analytics HTML5 Video Tracking Realtime Report
Google Analytics HTML5 Video Tracking Realtime Report

The HTML5 Video

Ashtabula Swiper Slider Plugin Teaser Video

Next Steps

1) I just added support for tracking video events by user ID. The tests results aren’t in yet. Please stay tuned.

Support for user ID tracking is live as of 28 October 2020.

HTML5 Video Tracking by User ID
Left: MonsterInsights Logged-in Users report with custom login name filter. Right: Google Analytics custom report showing video events by user ID.

2) I also want to port this GTM solution to a Universal Analytics implementation. This will most likely be in the form of a WordPress plugin. Stay tuned.

The WordPress plugin version is done and available on GitHub. See the live demo page.

Learn

Want to learn how to set this up? Check out the complete how-to guide on Dev.

What about YouTube videos? You can test-drive my new GA4YT plugin that tracks YouTube video events (including logged-in user tracking).

Credits

This solution is based on Julius Fedorovicius’ article, HTML5 Video Tracking Recipe for Google Tag Manager posted on Analytics Mania.