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. The Playing, Pausing and completing the video, log the events to the console. Add your API key and uncomment the Kissmetrics javascript API calls to send data to Kissmetrics instead.

Wistia

Wistia’s Embed Code

🚧

If you expand the “Embed Type” box, you can expand the Advanced Options and switch to using the Wistia API rather than the iFrame method. Copy/paste this into your page.

711711

Add KM Tracking

Now below this, let’s add our tracking calls.

function loadKMTrackableVideo (wistia_object, videoName) {
  // Add tracking to 'play', 'pause', and 'end' events.
  wistia_object.bind("play", function() {
    _kmq.push(['record', 'Played Video', {'Played Video Name':videoName}]);
  });
  wistia_object.bind("pause", function() {
    _kmq.push(['record', 'Paused Video', {'Paused Video Name':videoName}]);
  });
  wistia_object.bind("end", function() {
    _kmq.push(['record', 'Finished Video', {'Finished Video Name':videoName}]);
  });
}
// TODO: The only piece of the code to modify is the video name.
loadKMTrackableVideo(wistiaEmbed, "Sample Wistia Video");

❗️

The last line loadKMTrackableVideo(wistiaEmbed, "Sample Wistia Video"); is the piece you need to modify:

  • wistiaEmbed refers to the wistiaEmbed object. This does not have to change unless you are embedding several Wistia videos on the same page.
  • “Sample Wistia Video” refers to the name of the video. This will be appended to the event that is logged in KM.

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>