Tracking Videos

Events Recorded
Properties Recorded
Vimeo
- Vimeo’s Embed Code
- Add KM Tracking
Wistia
YouTube
- YouTube’s Embed Code
- Add KM Tracking

Below are examples of using the YouTube, Vimeo, and Wistia 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

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.
Load their JavaScript mini-library, called Froogaloop.

This is what your full embed code might look like:

<!-- Load the video with the API enabled -->
<iframe id="player1" src="http://player.vimeo.com/video/7100569?player_id=player1&api=1" width="540" height="304" frameborder="0" webkitallowfullscreen></iframe>

<!-- Load Froogaloop, Vimeo's JS API -->
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

Add KM Tracking

Now below this, let’s interact with their JS to set up the events:

<script type="text/javascript">
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}]);
  });
});
</script>

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.

Wistia Embed

Add KM Tracking

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

<script type="text/javascript">
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");
</script>

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.

Wistia Embed Shepherd

Wistia has also provided access to a JavaScript library they call the “Embed Shepherd”. This helps simplify getting pointers to all embedded Wistia videos.

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',
    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>