Google Tag Manager Video Tracking Guide: Beyond Youtube

Updated: March 29th, 2025

Tracking pageviews is far from enough to understand what website visitors are doing on your site. You should also consider other interactions, such as clicks, views of particular elements, video interactions, etc.

In today’s landscape of video players, the most popular embedded video player is Youtube (I have no stats to support this; just saying this based on what I’ve seen on other websites). But what if your website uses a different player (like Vimeo or a generic HTML5 player)?

That’s not a problem because you can track them with GTM.

I’ll show you how to track videos with Google Tag Manager. I’ll cover YouTube video tracking, Vimeo video tracking, and several other players as well. At the end of the article, I will also share ready-made GTM templates/recipes.

Here’s what you will learn in this article

• So, what’s the plan?
• Chapter 1. How to track Youtube videos with GTM
  • Step 1. Create a Youtube Video Trigger
  • Step 2. Enable built-in Youtube video variables
  • Step 3. Create a Google Analytics 4 tag
  • Step 4. Test the setup
• Chapter 2. Track Vimeo video player with GTM (custom solution)
  • It all starts with identifying the video player
  • Step 1. Create a variable “Is Vimeo player present on a page”
  • Step 2. Vimeo Auto-Event Listener
  • Step 3. Data Layer Variables and a Custom Event Trigger
  • Step 4. Create a GA4 Tag
  • Step 5. Test the setup
  • The entire process, in a nutshell
• Chapter 3. Six GTM Video Tracking Recipes
• Final words

So, what’s the plan?

First, we’ll look at the most common video tracking example in Google Tag Manager: Youtube video trigger. Then, I’ll show you how it’s done with a video player that GTM does not support by default – Vimeo.

And finally, I’ll also give you some ready-made solutions (recipes) designed for various embedded video players.

Ready? Let’s go.

Chapter 1. How to track Youtube videos with Google Tag Manager

If you are in a hurry, I have created a ready-made Youtube video tracking recipe. Download it, import, configure it (according to instructions), and it will automatically start tracking Youtube videos on your website in no time.

But if you want to understand the ins and outs of YouTube video tracking, then continue reading.

Here are the steps you need to complete to track YouTube videos with Google Tag Manager.

Why would you want to configure YouTube tracking with GTM and GA4 if GA4 already offers built-in functionality? Well, GA4’s built-in YouTube video does not work on all websites, so sometimes, you might need to customize it.

Here’s how you can track YouTube videos with Google Tag Manager:

1. Create a YouTube video trigger
2. Enable built-in video variables in GTM
3. Create a Google Analytics 4 event tag
4. Test the setup and publish.

Let’s take a closer look at each step individually.

Step 1. Create a YouTube Video Trigger

It all starts with a trigger. In Google Tag Manager, go to Triggers > New > Trigger Configuration and choose Youtube Video, then enter the following settings:

You can change the Percentage threshold to anything you like; just separate them with a comma. Also, you can enable Pause, Seeking, and Buffering tracking. I typically track Start, Complete, and Progress (e.g., user watched 25% of the video).

Also, even though the Add JavaScript API support to all YouTube videos is an Advanced setting, I enable it by default because it increases the chance that YouTube video tracking will work.

Step 2. Enable built-in YouTube video variables

In Google Tag Manager, go to Variables > Configure and enable all video-related variables.

Step 3. Create a Google Analytics 4 tag

In this tutorial, I presume that you have already installed Google Analytics 4 via Google Tag Manager (and you have a Google Tag). If not, read this tutorial first.

Now, it’s time to send the YouTube video data to Google Analytics. In Google Tag Manager, go to Tags > New > Google Analytics > Google Analytics: GA4 Event and enter the following settings.

It seems like a lot is happening. Let me explain:

• I recommend following the same naming convention for video tracking used in Enhanced Measurement. In the previous steps, I had only mentioned three details to capture – the start/ completion of the video and the percentage of video watched.
• All the event parameters that I have included are optional. If you think that some of them are not valuable, go ahead and remove them. I (once again) decided to follow the naming convention of Enhanced Measurement.

In the triggering section, I select the previously created YouTube video trigger.

Step 4. Test the setup

Once you have completed all previous steps, it’s time to test. Enable the Preview and Debug mode, and navigate to the section of the page with the video player.

First, you should start seeing YouTube Video events in the preview mode. If you don’t see them, read this troubleshooting guide.

Click one of them and check whether your Google Analytics tag has fired.

If yes, confirm this by navigating to Google Analytics 4 DebugView to check if the events have registered there.

Note: If you want to use these details in your GA4 reports, don’t forget to register parameters as video_percent or video_title as custom dimensions because, for some reason, they are still not available by default.

Chapter 2. How to track Vimeo video player with Google Tag Manager (custom solution)

You might think, “YouTube tracking looks simple, but I have a different embedded video player on my website. What will work in my case? The built-in YouTube video tracking in Google Tag Manager won’t work. Instead, you need to find a custom solution.

It all starts with identifying the video player

Before worrying about the actual tracking, you must first identify what kind of video player it is. While it may be evident with most video players, this may differ with some.

If your case is the latter, do this. In your browser, open developer tools (in Chrome, that’s F12 (on Windows)) and then go to the Elements tab. Then click this button.

Now, click on the player. Now try to browse and locate some clues mentioning the player provider’s name. For example, in this case, the player that I’m inspecting is the JW player.

If you can’t find the name, it is probably an HTML5 video player.

Once you identify the name of the video player, just google [ video player name ] tracking with Google Tag Manager, and you should find some guide or tutorial.

Let’s imagine that, in our case, we see the “Vimeo” logo at the corner of the embedded video player.

Step 1. Create a variable “Is Vimeo player present on a page”

We will need to add lengthy code to the container to track Vimeo players with Google Tag Manager on a page. Loading that code on every page is not optimal and will affect the page loading speed, which is why we need to activate that code ONLY on those pages when the Vimeo player is embedded.

To do that, first, we need to create a Custom JavaScript variable and paste the following code:

function () {
  for (var e = document.getElementsByTagName("iframe"), x=0; x < e.length; x++) {
    if (/^https?:\/\/player.vimeo.com/.test(e[x].src)) {
      return true;
    }
  }
  return false;
}

If the page has a Vimeo player embedded in it, this variable will return true.

Then, create a Pageview trigger and use that Custom JavaScript variable in it. If the Vimeo player is present, this trigger will be activated. If there is no Vimeo player, that trigger will remain silent.

Check it in Preview and Debug mode, and you should get something like this.

Step 2. Vimeo Auto-Event Listener

Now, it’s the Vimeo Listener’s turn. A listener is a function (or a bunch of functions) built to keep looking for certain interactions on a page. In this case, the listener will be looking for Vimeo player interactions. If it spots one, it will make that data visible in the Preview and Debug mode.

Create a Custom HTML tag and paste the following code. The original code was created by Bounteous, but to make it more convenient for GA4, I have modified the code (a bit).

<script type="text/javascript" id="gtm-vimeo-tracking">

;(function(document, window, config) {

  'use strict';

  // The API won't work on LT IE9, so we bail if we detect those UAs

  if (navigator.userAgent.match(/MSIE [678]\./gi)) return;
  config = cleanConfig(config);

  var handle = getHandler(config.syntax);
  if (document.readyState !== 'loading') {
    init();
  } else {
    document.addEventListener('DOMContentLoaded', function() {
      init();
      document.addEventListener('load', init, true);
    });
  }

  function init() {
    var videos = filter_(selectAllTags_('iframe'), isVimeo);
    if (!videos.length) return;
    loadApi(function() {
      forEach_(videos, listenTo);
    });
  }

  function isVimeo(el) {
    return el.src.indexOf('player.vimeo.com/video/') > -1;

  }

  function loadApi(callback) {
    if (isUndefined_(window.Vimeo)) {
      loadScript('https://player.vimeo.com/api/player.js', callback);
    } else {
      callback();
    }
  }

  function listenTo(el) {
    if (el.__vimeoTracked) return;
    el.__vimeoTracked = true;
    var video = new Vimeo.Player(el);
    var percentages = config._track.percentages;
    var eventNameDict = {
      'play': 'play',
      'pause': 'pause',
      'complete': 'ended'
    };
    var cache = {};
    video.getVideoTitle()
      .then(function(title) {
        forEach_(['play', 'pause', 'complete'], function(key) {
          if (config.events[key]) {
            video.on(eventNameDict[key], function() {
              handle(key, title);
            });
          }
        });
        if (percentages) {
          video.on('timeupdate', function(evt) {
            var percentage = evt.percent;
            var key;
            for (key in percentages) {
              if (percentage >= percentages[key] && !cache[key]) {
                cache[key] = true;
                handle(key, title);
              }
            }
          });
        }
      });
  }

  function cleanConfig(config) {
    config = extend_({}, {
      events: {
        'play': true,
        'pause': true,
        'complete': true
      },
      percentages: {
        each: [],
        every: []
     }
    }, config);
    forEach_(['each', 'every'], function(setting) {
      var vals = config.percentages[setting];
      if (!isArray_(vals)) vals = [vals];
      if (vals) config.percentages[setting] = map_(vals, Number);
    });
    var points = [].concat(config.percentages.each);
    if (config.percentages.every) {
      forEach_(config.percentages.every, function(val) {
        var n = 100 / val;
        var every = [];
        var i;
        for (i = 1; i < n; i++) every.push(val * i);
        points = points.concat(filter_(every, function(val) {
          return val > 0.0 && val < 100.0;
        }));
      });
    }
    var percentages = reduce_(points, function(prev, curr) {
      prev[curr + '%'] = curr / 100.0;
      return prev;
    }, {});
    config._track = {
      percentages: percentages
    };
    return config;
  }

  function getHandler(syntax) {
    syntax = syntax || {};
    var gtmGlobal = syntax.name || 'dataLayer';
    var uaGlobal = syntax.name || window.GoogleAnalyticsObject || 'ga';
    var clGlobal = '_gaq';
    var dataLayer;
    var handlers = {
      'gtm': function(state, title) {
        if (state.indexOf('%') === -1 && state.indexOf('play') === -1) {
          dataLayer.push({
            event: 'video',
            video_provider: 'vimeo',
            video_action: state,
            video_title: title.toLowerCase(),
            video_percent: undefined
            });
        } else if (state === '0%'){
          dataLayer.push({
            event: 'video',
            video_provider: 'vimeo',
            video_action: 'start',
            video_title: title.toLowerCase(),
            video_percent: undefined
          });
        } else if (state.indexOf('play') === -1) {
          dataLayer.push({
            event: 'video',
            video_provider: 'vimeo',
            video_action: 'progress',
            video_percent: state,
            video_title: title.toLowerCase()
          });
        }
      },
      'cl': function(state, title) {
        window[clGlobal].push(['_trackEvent', 'Videos', state, title]);
      },
      'ua': function(state, title) {
        window[uaGlobal]('send', 'event', 'Videos', state, title);
      }
    };
    switch(syntax.type) {
      case 'gtm':
        dataLayer = window[gtmGlobal] = window[gtmGlobal] || [];
        break;
      case 'ua':
        window[uaGlobal] = window[uaGlobal] || function() {
          (window[uaGlobal].q = window[uaGlobal].q || []).push(arguments);
        };
        window[uaGlobal].l = +new Date();
        break;
      case 'cl':
        window[clGlobal] = window[clGlobal] || [];
        break;
      default:
        if (!isUndefined_(window[gtmGlobal])) {
          syntax.type = 'gtm';
          dataLayer = window[gtmGlobal] = window[gtmGlobal] || [];
        } else if (uaGlobal&& !isUndefined_(window[uaGlobal])) {
          syntax.type = 'ua';
        } else if (!isUndefined_(window[clGlobal]) && !isUndefined_(window[clGlobal].push)) {
          syntax.type = 'cl';
        }
        break;
    }
    return handlers[syntax.type];
  }

  function extend_() {
    var args = [].slice.call(arguments);
    var dst = args.shift();
    var src;
    var key;
    var i;
    for (i = 0; i < args.length; i++) {
      src = args[i];
      for (key in src) {
        dst[key] = src[key];
      }
    }
    return dst;
  }
  function isArray_(o) {
    if (Array.isArray_) return Array.isArray_(o);
    return Object.prototype.toString.call(o) === '[object Array]';
  }
  function forEach_(arr, fn) {
    if (Array.prototype.forEach_) return arr.forEach.call(arr, fn);
    var i;
    for (i = 0; i < arr.length; i++) {
      fn.call(window, arr[i], i, arr);
    }
  }
  function map_(arr, fn) {
    if (Array.prototype.map_) return arr.map.call(arr, fn);
    var newArr = [];
    forEach_(arr, function(el, ind, arr) {
      newArr.push(fn.call(window, el, ind, arr));
    });
    return newArr;
  }
  function filter_(arr, fn) {
    if (Array.prototype.filter) return arr.filter.call(arr, fn);
    var newArr = [];
    forEach_(arr, function(el, ind, arr) {
      if (fn.call(window, el, ind, arr)) newArr.push(el);
    });
    return newArr;
  }
  function reduce_(arr, fn, init) {
    if (Array.prototype.reduce) return arr.reduce.call(arr, fn, init);
    var result = init;
    var el;
    var i;
    for (i = 0; i < arr.length; i++) {
      el = arr[i];
      result = fn.call(window, result, el, arr, i);
    }
    return result;
  }
  function isUndefined_(thing) {
    return typeof thing === 'undefined';
  }
  function selectAllTags_(tags) {
    if (!isArray_(tags)) tags = [tags];
    return [].slice.call(document.querySelectorAll(tags.join()));
  }
  function loadScript(src, callback) {
    var f, s;
    f = document.getElementsByTagName('script')[0];
    s = document.createElement('script');
    s.onload = callCallback;
    s.src = src;
    s.async = true;
    f.parentNode.insertBefore(s, f);
    function callCallback() {
      if (callback) {
        callback();
        s.onload = null;
      }
    }
  }
})(document, window, {
  'events': {
    'play': true,
    'pause': false,
    'complete': true
  },
  'percentages': {
    'every': 25,
    'each': [0, 90]
  }
});

/*
 * v1.0.1
 * Created by the Google Analytics consultants at http://www.lunametrics.com
 * Written by @notdanwilkerson
 * Documentation: https://github.com/lunametrics/vimeo-google-analytics/
 * Licensed under the MIT License
 * Modified by Julius Fedorovicius at https://www.analyticsmania.com
 */
</script>

Don’t forget to assign the previously created Window Loaded Trigger:

Checkpoint! Let’s see what we’ve created so far:

• We started with creating a Pageview Trigger, which checks whether there is a Vimeo video player embedded in the web page (thanks to a Custom JavaScript variable).
• A Vimeo Auto-Event Listener (as a Custom HTML tag) fires when the Pageview Trigger mentioned above activates. Every time a Vimeo player interaction occurs, the listener will dispatch a Data Layer event with the following data:
  • Event Name: video (this value never changes)
  • video_action (play, progress, or complete)
  • video_percent
  • video_title
  • video_provider
• If you want to test this now, enable the Preview and Debug mode, navigate to the embedded Vimeo player, and try interacting with it. You should start seeing video events on the Preview mode’s left side.

Step 3. Create Data Layer Variables and a Custom Event Trigger

Google Tag Manager does not recognize Data Layer events (as triggers) or other data (as variables) by default. So if you wish to transfer some information to other tools (e.g., Google Analytics), you need to “teach” GTM to fetch certain information (with the help of Data Layer Variables).

After configuring them, it’s time to create a Custom Event Trigger. Vimeo Auto-Event Listener sends all interactions as Data Layer events under “video”.

dataLayer.push({
event: "video",
  ...
});

So the next thing you should do is to create a Custom Event Trigger which listens to ALL video events. Later, we will assign it to Google Analytics 4 Tag.

In GTM, go to Triggers > New > Custom Event and enter the following settings:

Step 4. Create a Google Analytics 4 Event Tag

Last but not least, Google Analytics. Now you need to send an event and pass the corresponding data. Create a new tag, select Google Analytics > Google Analytics: GA4 Event as Tag Type, and enter all three Data Layer variables.

Every time a video event is created, Google’s servers will receive a GA4 Event, with actual data dynamically replacing the default values in all three variables. The event name will highlight the status of the video.

Step 5. Test test test

As with all Google Tag Manager deployments, we need to test it. Enable GTM Preview and Debug mode, go to a page with an embedded Vimeo player, and click Play. If configured correctly, this will trigger a video event in Preview and Debug mode’s event stream. Click it and see whether the GA4 tag has fired.

Also, don’t forget to check Google Analytics DebugView reports. You can access them by navigating to Admin > DebugView.

The entire process, in a nutshell

• We created a Custom JS variable that returns true if the page has a Vimeo player embedded.
• Then we created a Pageview Trigger that triggers when it detects the embedded Vimeo video player in the web page (thanks to the Custom JavaScript variable)
• Then, we created a Custom HTML tag (a Vimeo Auto-Event Listener). And it will fire on all pages where the Vimeo player is embedded. Important: even if you haven’t interacted with the player yet, that tag will still be fired.
• Every time a Vimeo player interaction occurs, the listener will dispatch a Data Layer event with the following data:
  • Event Name: video (this value never changes)
  • video_action (play, progress, or complete)
  • video_percent (works only with progress events)
  • video_title
• You have created Data Layer Variables and one Custom Event Trigger (for the video event).
• Finally, you created a Google Analytics 4 tag that fires on the video event and will send the values of those 3 Data Layer Variables to Google Analytics.

Chapter 3. Six Google Tag Manager Video Tracking Recipes

Believe it or not, but the flow that I have described in the Vimeo player tracking section applies to a bunch of other non-Youtube video players:

• HTML5 Video player (supports various players). The listener is created by David Vallejo.
• JW Player. The listener is created by Pat Grady and David Vallejo.
• Vidyard
• Wistia. A solution created by the team of Bounteous.

Since most GTM Recipes are created by distinct authors, their naming convention is also diverse. So I unified them a bit.

They will be using GA4’s naming convention (e.g., parameters such as video_title, video_provider). All recipes will send video_progress and video_complete events. Some recipes will send video_play (while others will use video_start). That’s because some recipes send video_play every time a visitor hits play in the same video (even though he/she clicked pause several seconds ago). To avoid duplicate video_start events, I went with video_play sometimes.

Maybe I will find more time in the future to fix this.

Feel free to download any of these Google Tag Manager Recipes and start tracking video players in no time. Didn’t I tell you that Google Tag Manager Video Tracking was pretty easy?

HTML5 Video Tracking Recipe

Tracks interactions of the HTML5 video player (play, pause, etc.)
Get the recipe

JW Player Tracking Recipe

Tracks interactions of embedded JW player (play, pause, complete, etc.).
Get the recipe

Vidyard Tracking Recipe

Automatically tracks interactions of the embedded Vidyard player (play, pause, etc.).
Get the recipe

Vimeo Tracking Recipe

Tracks interactions of the embedded Vimeo player (play, pause, etc.).
Get the recipe

Wistia Tracking Recipe

Automatically tracks interactions with embedded Wistia videos.
Get the recipe

YouTube Tracking Recipe

Automatically tracks interactions with embedded YouTube video players on your site.
Get the recipe

I’ve noticed that the HTML5 recipe doesn’t play well with others (well, at least some of them). Sometimes, it overtakes all interactions, and other video listeners stop working. So ensure that HTML5 auto-event listener does not fire on the same page as the JW player, etc.

Everything else should be fine. If you notice any bugs, please let me know.

Video tracking with Google Tag Manager: Final words

When it comes to video tracking with Google Tag Manager, the first thing that comes to mind is the tracking of embedded YouTube videos.

I don’t blame you since this is the world’s most popular video hosting platform.

But if you are dealing with a non-youtube video player, that is still possible with some custom solutions.

In this blog post, I’ve explained how you can track YouTube and non-youtube videos embedded on your site.

To save you some time, I’ve also included a bunch of recipes you can download, import, configure, and start tracking videos in minutes. Just download any of them, import them to your GTM account, and start tracking videos in the blink of an eye.

All these Google Tag Manager video tracking solutions follow the same principle, so once you master one, you’ll conquer all of them.