-
Streams
-
Compute
- Overview
- Group By Ranges & Buckets
- Saved Queries
- Video Completion Funnel
- Data Explorer Guide
- Compute Pricing Guide
- Custom Ad Performance
- Session Timing Metrics
- Cohort Analysis
- Retention Analysis
- Funnel Analysis
- Creating a Funnel with an OR Condition
- Stripe Revenue Queries
- Create a Email Nightly Report
- Query Tuning
- Cached Queries
- Cached Datasets
- Paid Session Metrics
- User Engagement
-
Visualize
Video Tracking
Video tracking with Keen allows you to record data on plays and other watch, pause, or click engagements on various video platforms. This guide helps guide you through how to design a data model for video events. Using this data model, you can create insightful analyses and computations into overall counts of viewers, frequency per day, and percent watched.
Facebook Video Tracking
This example shows how to record Facebook Video Player usage stats with Keen. Make sure to include YOUR_FB_APP_ID, as well as YOUR_KEEN_PROJECT_ID and YOUR_KEEN_WRITE_KEY.
<html>
<head>
<meta charset="utf-8">
<script src="http://d26b395fwzu5fz.cloudfront.net/keen-tracking-1.0.5.js"></script>
</head>
<body>
<div id="fb-root"></div>
<script>
/*
Learn more about the Facebook Video Player API here:
https://developers.facebook.com/docs/plugins/embedded-video-player/api#control-reference
Learn more about keen-tracking.js here:
https://github.com/keen/keen-tracking.js
*/
window.fbAsyncInit = function() {
FB.init({
appId: 'YOUR_FB_APP_ID',
xfbml: true,
version: 'v2.6'
});
FB.Event.subscribe('xfbml.ready', function(msg) {
if (msg.type === 'video') {
trackEvents(msg.instance);
}
});
};
function trackEvents(player) {
var client = new Keen({
projectId: 'YOUR_KEEN_PROJECT_ID',
writeKey: 'YOUR_KEEN_WRITE_KEY'
});
// These flags can help with local development
Keen.debug = true;
// Keen.enabled = false;
client.on('recordEvent', console.log);
client.extendEvents(function(){
return {
browser: Keen.helpers.getBrowserProfile(),
player: {
'is-muted' : player.isMuted(),
'current-position' : player.getCurrentPosition(),
'duration' : player.getDuration(),
'volume' : player.getVolume()
}
}
})
player.subscribe('startedPlaying', function(e) {
client.recordEvent('video-interaction', { event_type: 'started' });
});
player.subscribe('paused', function(e) {
client.recordEvent('video-interaction', { event_type: 'paused' });
});
player.subscribe('finishedPlaying', function(e) {
client.recordEvent('video-interaction', { event_type: 'finished' });
});
player.subscribe('startedBuffering', function(e) {
client.recordEvent('video-interaction', { event_type: 'started-buffering' });
});
player.subscribe('finishedBuffering', function(e) {
client.recordEvent('video-interaction', { event_type: 'finished-buffering' });
});
player.subscribe('error', function(e) {
client.recordEvent('video-interaction', { event_type: 'error' });
});
}
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Your embedded video player code -->
<div class="fb-video"
data-href="https://www.facebook.com/WeRateDogs/videos/1134644986596723/"
data-width="500"
data-allowfullscreen="true"></div>
</body>
</html>
Youtube Video Tracking
This example shows how to record Youtube iFrame Player usage stats with Keen. Make sure to include YOUR_KEEN_PROJECT_ID and YOUR_KEEN_WRITE_KEY.
<html>
<head>
<meta charset="utf-8">
<script src="http://d26b395fwzu5fz.cloudfront.net/keen-tracking-1.0.5.js"></script>
</head>
<body>
<iframe id="youtube-iframe-player"
width="640" height="360"
src="https://www.youtube.com/embed/G5UBjF1z9hA?enablejsapi=1"
frameborder="0"
style="border: solid 4px #37474F"></iframe>
<script>
/*
Learn more about the Youtube iFrame Player API here:
https://developers.google.com/youtube/iframe_api_reference
Learn more about keen-tracking.js here:
https://github.com/keen/keen-tracking.js
*/
// Install YouTube SDK
var newTag = document.createElement('script');
newTag.src = 'https://www.youtube.com/iframe_api';
var firstTag = document.getElementsByTagName('script')[0];
firstTag.parentNode.insertBefore(newTag, firstTag);
function onYouTubeIframeAPIReady() {
var player = new YT.Player('youtube-iframe-player');
trackEvents(player);
}
function trackEvents(player) {
var client = new Keen({
projectId: 'YOUR_KEEN_PROJECT_ID',
writeKey: 'YOUR_KEEN_WRITE_KEY'
});
// These flags can help with local development
Keen.debug = true;
// Keen.enabled = false;
client.on('recordEvent', console.log);
client.extendEvents(function(){
return {
browser: Keen.helpers.getBrowserProfile(),
player: {
'is-muted': player.isMuted(),
'current-position': player.getCurrentTime(),
'duration': player.getDuration(),
'playback-quality': player.getPlaybackQuality(),
'volume': player.getVolume()
}
}
});
player.addEventListener('onStateChange', function(e) {
var state = e.data;
if (state === 1) {
client.recordEvent('video-interaction', { event_type: 'started' });
}
else if (state === 2) {
client.recordEvent('video-interaction', { event_type: 'paused' });
}
else if (state === 0) {
client.recordEvent('video-interaction', { event_type: 'finished' });
}
}, false);
player.addEventListener('onError', function(e) {
client.recordEvent('video-interaction', { event_type: 'error' });
}, false);
}
</script>
</body>
</html>
Video.js Video Tracking
This example shows how to record Video.js usage stats with Keen. Make sure to include YOUR_KEEN_PROJECT_ID and YOUR_KEEN_WRITE_KEY.
<html>
<head>
<meta charset="utf-8">
<script src="http://d26b395fwzu5fz.cloudfront.net/keen-tracking-1.0.5.js"></script>
<!-- VideoJS Assets -->
<link href="http://vjs.zencdn.net/5.8.8/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/5.8.8/video.js"></script>
</head>
<body>
<!-- VideoJS Player -->
<div>
<video id="video-player" class="video-js" controls preload="auto" width="640">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
</div>
<script>
/*
Learn more about the VideoJS API here:
http://docs.videojs.com/
Learn more about keen-tracking.js here:
https://github.com/keen/keen-tracking.js
*/
var video = videojs('video-player');
var client = new Keen({
projectId: 'YOUR_KEEN_PROJECT_ID',
writeKey: 'YOUR_KEEN_WRITE_KEY'
});
// These flags can help with local development
Keen.debug = true;
// Keen.enabled = false;
client.on('recordEvent', console.log);
/*
Simple VideoJS Plugin
*/
videojs.plugin('recordKeenEvents', function(client){
client.extendEvents(function(){
return {
browser: Keen.helpers.getBrowserProfile(),
player: {
'is-muted': this.muted(),
'current-position': this.currentTime(),
'duration': this.duration(),
'volume': this.volume()
}
}
}.bind(this));
this.on('play', function() {
client.recordEvent('video-interaction', { event_type: 'started' });
});
this.on('pause', function() {
client.recordEvent('video-interaction', { event_type: 'paused' });
});
this.on('ended', function() {
client.recordEvent('video-interaction', { event_type: 'finished' });
});
this.on('error', function() {
client.recordEvent('video-interaction', { event_type: 'error' });
});
});
video.recordKeenEvents(client);
</script>
</body>
</html>
HTML5 Video Tracking
This example shows how to record HTML5 Video Player usage stats with Keen. Make sure to include YOUR_KEEN_PROJECT_ID and YOUR_KEEN_WRITE_KEY.
<html>
<head>
<meta charset="utf-8">
<script src="http://d26b395fwzu5fz.cloudfront.net/keen-tracking-1.0.5.js"></script>
</head>
<body>
<!-- HTML5 Video Player -->
<div>
<button id="video-control">Play</button>
<br><br>
<video id="video-player" width="420">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
<script>
/*
Learn more about the HTML5 AV DOM Reference here:
http://www.w3schools.com/tags/ref_av_dom.asp
Learn more about keen-tracking.js here:
https://github.com/keen/keen-tracking.js
*/
document.addEventListener('DOMContentLoaded', function() {
var control = document.getElementById('video-control');
var player = document.getElementById('video-player');
control.addEventListener('click', function(){
if (player.paused) {
player.play();
}
else {
player.pause();
}
}, false);
trackEvents(player);
}, false);
function trackEvents(player) {
var client = new Keen({
projectId: 'YOUR_KEEN_PROJECT_ID',
writeKey: 'YOUR_KEEN_WRITE_KEY'
});
// These flags can help with local development
Keen.debug = true;
// Keen.enabled = false;
client.on('recordEvent', console.log);
client.extendEvents(function(){
return {
browser: Keen.helpers.getBrowserProfile(),
player: {
'is-muted': player.muted,
'current-position': player.currentTime,
'duration': player.duration,
'volume': player.volume
}
}
})
player.addEventListener('play', function() {
client.recordEvent('video-interaction', { event_type: 'started' });
}, false);
player.addEventListener('pause', function() {
client.recordEvent('video-interaction', { event_type: 'paused' });
}, false);
player.addEventListener('ended', function() {
client.recordEvent('video-interaction', { event_type: 'finished' });
}, false);
player.addEventListener('error', function() {
client.recordEvent('video-interaction', { event_type: 'error' });
}, false);
}
</script>
</body>
</html>
Vimeo Video Tracking
This example shows how to record Vimeo usage stats with Keen. Make sure to include YOUR_KEEN_PROJECT_ID and YOUR_KEEN_WRITE_KEY.
<html>
<head>
<meta charset="utf-8">
<script src="http://d26b395fwzu5fz.cloudfront.net/keen-tracking-1.0.5.js"></script>
<script src="https://player.vimeo.com/api/player.js"></script>
</head>
<body>
<iframe id="vimeo-player"
src="https://player.vimeo.com/video/76979871"
frameborder="0" height="360" width="640"
webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<script>
/*
Learn more about the Vimeo Player API here:
https://github.com/vimeo/player.js
Learn more about keen-tracking.js here:
https://github.com/keen/keen-tracking.js
*/
var iframe = document.querySelector('#vimeo-player');
var player = new Vimeo.Player(iframe);
trackEvents(player);
function trackEvents(player) {
var client = new Keen({
projectId: 'YOUR_KEEN_PROJECT_ID',
writeKey: 'YOUR_KEEN_WRITE_KEY'
});
var extend = Keen.utils.extend;
// These flags can help with local development
Keen.debug = true;
// Keen.enabled = false;
client.on('recordEvent', console.log);
client.extendEvents(function(){
return {
browser: Keen.helpers.getBrowserProfile()
}
});
player.on('play', function() {
getPlayerState(player, function(state){
client.recordEvent('video-interaction', extend(state, { event_type: 'started' }));
});
});
player.on('pause', function() {
getPlayerState(player, function(state){
client.recordEvent('video-interaction', extend(state, { event_type: 'paused' }));
});
});
player.on('ended', function() {
getPlayerState(player, function(state){
client.recordEvent('video-interaction', extend(state, { event_type: 'finished' }));
});
});
player.on('error', function() {
getPlayerState(player, function(state){
client.recordEvent('video-interaction', extend(state, { event_type: 'error' }));
});
});
}
function getPlayerState(p, cb){
p.getVolume().then(function(volume){
p.getCurrentTime().then(function(time){
p.getDuration().then(function(duration){
cb({
'is-muted': volume === 0,
'current-position': time,
'duration': duration,
'volume': volume
})
}).catch(handleStateError);
}).catch(handleStateError);
}).catch(handleStateError);
}
function handleStateError(err) {
console.log(err);
}
</script>
</body>
</html>
Video Completion Funnels
So far, we’ve shown you how to design a data model for video events. Using this data model, you can create insightful analyses and computations.
To see how to build a funnel query that shows the results of your video usage data, see our guide on the Video Completion Analysis. The follow-up compute guide shows how to use some simple math to determine “how much was seen” or or “how far” into the video did most viewers stay tuned.
Here’s a preview of a funnel built from our data that can help us understand, “How engaging was our video content?”
