Tracking Videos
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.
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 thewistiaEmbed
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>