HTML5 Video Tracking by User ID Using Google Tag Manager
Tags: googleanalytics, webdev, wordpress
Published: 2020-10-30 06:42:12

---
title: HTML5 Video Tracking by User ID Using Google Tag Manager
published: true
description: How to track HTML5 video events by WordPress user IDs in Google Analytics using Google Tag Manager.
tags: googleanalytics,webdev,wordpress
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/37zxbz4pxxfd1j7o32wd.png
---

**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](https://support.google.com/analytics/answer/3123666?hl=en) 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](https://www.analyticsmania.com/google-tag-manager-recipes/html5-video/).

You'll want to follow Julius' instructions in [his article](https://www.analyticsmania.com/google-tag-manager-recipes/html5-video/). 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&mdash;adding support for user ID tracking.

## User ID Support Show &amp; Tell

Here's what my Google Analytics Settings look like.

![GTM Google Analytics Settings](https://dev-to-uploads.s3.amazonaws.com/i/m61q44y0co6k4kdbdjxw.png "GTM Google Analytics Settings")

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.

![GTM User ID Variable](https://dev-to-uploads.s3.amazonaws.com/i/y92ejjvb5b9h45xnlz29.png "GTM User ID Variable")

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.

![GTM Tag JavaScript Source](https://dev-to-uploads.s3.amazonaws.com/i/y6pc76gpbju2hi2so0e3.png "GTM Tag JavaScript Source")

## 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.

```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.

![Google Analytics Realtime Report](https://dev-to-uploads.s3.amazonaws.com/i/37zxbz4pxxfd1j7o32wd.png "Google Analytics Realtime Report")

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

![Custom report showing HTML5 video events grouped by the user ID custom dimension](https://dev-to-uploads.s3.amazonaws.com/i/xnls48kbpkpbk0zpqqxu.png "custom report showing HTML5 video events grouped by the user ID custom dimension")

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](https://support.google.com/analytics/answer/6366371?hl=en).

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](https://github.com/marklchaves/cme-user-id-column) that does this for you. 

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

![Custom user ID column](https://raw.githubusercontent.com/marklchaves/cme-user-id-column/main/cme-user-id-column-screengrab-1.png "Custom user ID column")

---

## Extras

[See a live demo here.](https://streetphotography.blog/html5-video/)

### NEW!

There's now a [standalone WordPress plugin (GA4HTML5VID)](https://streetphotography.blog/html5-video-plugin/) that works completely without Google Tag Manager and still supports user ID tracking.

---

## Credits

The HTML5 Video Tracking Recipe is originally from [David Vallejo](https://www.thyngster.com/tracking-html5-videos-gtm).