Tracking Videos

Below are examples of using the YouTube and Vimeo JavaScript Libraries in conjunction with Kissmetrics to record certain video events.

Events Recorded

  • Played Video
  • Paused Video
  • Finished Video

Properties Recorded

  • Played Video Name
  • Paused Video Name
  • Finished Video Name

Vimeo

Vimeo’s Embed Code

  1. Add the embed code to add the Vimeo video in an iFrame. Add api=1 as a query string to the URL of the iframe.

  2. Implement the Froogaloop library for tracking Vimeo Videos.

Add KM Tracking

var iframe = $('#player1')[0],  player = $f(iframe); // TODO: The only piece of the code to modify is the video name. 
var videoName = "Sample Video"; // Add listeners after the player is ready. 
player.addEvent('ready', function() 
    {  player.addEvent('play', function()
    {  _kmq.push(['record', 'Played Video', {'Played Video Name':videoName}]);  });  player.addEvent('pause', function()
    {  _kmq.push(['record', 'Paused Video', {'Paused Video Name':videoName}]);  });   player.addEvent('finish', function()
    {  _kmq.push(['record', 'Finished Video', {'Finished Video Name':videoName}]); 
        });
 });

📘

Multiple Video Vimeo Tracking:

You can track multiple Vimeo videos using the technique demonstrated in this example. This repository contains shows how to track 3 videos on a single page.

Youtube

YouTube’s Embed Code

First, you’ll need to embed your YouTube video using their iFrame API (which has the best compatibility with mobile devices). The code looks like this (remember to change out the videoId with the video you want to embed:

//The <iframe> (and video player) will replace this <div> tag.
<div id="player"></div> 
  <script type='text/javascript'>
    // This code loads the IFrame Player API code asynchronously.
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    
    // This function creates an <iframe> (and YouTube player) after the API code downloads.
    var player;
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'M7lc1UVf-VE', // Replace with the desired video ID
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
    }

    function onPlayerReady(event) {
      // Add hooks for what you want to happen when the player has loaded
    }
  </script>

Add KM Tracking

Once that’s done, you can add this block below the embed code.

<script type="text/javascript">
var _kmq = _kmq || [];
function onPlayerStateChange(event) {
  switch(event.data) {
    case YT.PlayerState.PLAYING:
      _kmq.push(['record', 'Played Video', 
                {'Played Video Name':player.getVideoData().title}]);
      break;
    case YT.PlayerState.PAUSED:
      _kmq.push(['record', 'Paused Video', 
                {'Paused Video Name':player.getVideoData().title}]);
      break;
    case YT.PlayerState.ENDED:
      _kmq.push(['record', 'Finished Video', 
                {'Finished Video Name':player.getVideoData().title}]);
      break;
    default:
      return;
  }
}
</script>