HTML5 Video Tracking by User ID Using Google Tag Manager

NOTE: This works with Google Analytics Universal Analytics. This does not work with GA4.

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 ;-).

I know this stuff has been done before. But, I've added a twist. I'm going to show you how to find out which logged-in WordPress users are watching your HTML5 videos.

Oh, be sure you've enabled user ID tracking for your Google Analytics property.

Let's get to it!

Don't Reinvent the Wheel

Luckily, we don't have to start from 0. We'll kick things off by using Julius Fedorovicius’ HTML5 Video Tracking Recipe for Google Tag Manager.

You'll want to follow Julius' instructions in his article. In step 3, I chose his recommendation to use the Google Analytics Settings variable.

Now that that's over, we can dig into the fun stuff—adding support for user ID tracking.

User ID Support Show & Tell

Here's what my Google Analytics Settings look like.

It's a bit of a workhorse. Meaning it's doing 3 things for me:

1. Pulling in my GA tracking code so that the imported HTML5 Video Player recipe knows which property to send the stats.
2. Defining the user ID data layer variable that will store the WordPress logged-in user ID to send to GA during video events.
3. Setting up the user ID custom dimension that grabs the user ID (see above) and maps it to the user ID custom dimension I've defined for my property.

The Glue

This is the data layer variable that glues everything together.

Since we have the user ID data layer variable, we can add it to the GTM tag JavaScript source code that we imported earlier. You'll want to add it everywhere you see a GA event being set up.

Here's what you should have.

The Last Piece.

You're almost there.

You're probably asking yourself, "How the heck do I get this user ID in the first place?"

The answer is: From WordPress of course!

Add this code to your child theme's functions.php file, create a plugin for it, or use a code snippets plugin that supports PHP.

function get_current_user_vid_tracking () {
  if( ! ( is_page( 'html5-video' ) ) ){
    return;
  }

  $current_user = wp_get_current_user();

  if ( ! ( $current_user instanceof WP_User ) ) {
    return;
  }

  $user_ID = $current_user->ID;

  ?>
  <script>
    let cmeUserID = '<?php echo $user_ID; ?>'; // Set the user ID using signed-in user_ID.
  </script>
  <?php
}
add_action( 'wp_head', 'get_current_user_vid_tracking' );

I do an upfront check for my HTML5 video test page. You'll want to tweak that if test or remove it if you don't need it.

Pulling it All Together

Assuming that you:

• Saved and published your GTM changes,
• Inserted your PHP code, and
• There aren't any coding errors

When you visit a page on your site that has an HTML5 video, you'll see something like this in the GA Realtime report.

Here's an example Google Analytics custom report showing HTML5 video events grouped by the user ID custom report.

You're probably noticing the funky user ID. That's the internal WordPress user ID, and we're using this cryptic number because of PII protection.

Not so helpful, eh? But this is WordPress. So, to make life a bit easier, you can add a custom user ID column to your WordPress user admin page. I've got a super teenie plugin that does this for you.

You'll get something like this if you use this plugin or another similar plugin.

---

Extras

See a live demo here.

NEW!

There's now a standalone WordPress plugin (GA4HTML5VID) that works completely without Google Tag Manager and still supports user ID tracking.

---

Credits

The HTML5 Video Tracking Recipe is originally from David Vallejo.

Comments

[steveadamsfixedit]

Im a newbie to GTM...please forgive me! I'm trying to implement this with the video.js player and I'm having some difficulty since I followed another GTM recipe here:wcg.de/fileadmin/masterTemplate/Re...

Might you be able to provide integration advise? Specifically, where to join in the cme Data Layer Variable to the custom java script?

[mark l chaves]

Hello @steveadamsfixedit ,

If I understand your question, you should be able to follow the instructions in The Glue section of the article above (as an example) to send your user ID variable to GA.

I assume you would add it to the WCG code where they call dataLayer.push() in their eventToDataLayer() function.

Does that make sense?

Thanks!

[Paschal]

Thank you for this.

[mark l chaves]

You are very welcome. Thanks for reading :-)