Clicky has an API for tracking interactions with HTML5 and Flash video players, as well as HTML5 audio players. Most video services, such as Youtube and Viddler, include a Javascript API that their video player can talk to when users play, pause, seek, or finish a video. However, this Javascript API is usually optional and hence disabled by default. In order to track videos, you must embed them with the Javascript API enabled.

Here is an example of what you would see in your Content > Media report once you have set this up:




Libraries

If you have programming abilities, you can theoretically track video interactions from any service out there, as long it has an API and you can make it talk to our API. The problem is that every service's API is different, so it requires custom code to interact with our service. However, we have written some Javascript libraries for some of the more popular services out there, to make it as easy as possible to track video on your web site.

If you have HTML5 video on your site, or have video from any of the other services listed below, click one of them to learn how to track it. If you need/want to write your own code to talk to our API, skip to here.

NEW! Use our code generator page to generate video analytics code automatically.


HTML5 video and audio

Clicky's tracking code automatically detects when <video> and <audio> are present on the page, and injects an additional Javascript file into your site so that we can track them with no additional work on your part.

You used to have to add this extra file manually to your HTML, but not anymore!

If for some reason you need to manually include the file, you may still do so by placing the following code on your page (we recommend it be at the bottom next to our normal tracking code). In either case, Clicky will automatically find all <video> and/or <audio> elements on any page it's installed on, and interface them with our video API. It's like magic.

<!-- yes, the http: is intentionally missing -->
<script src="//static.getclicky.com/inc/javascript/video/html.js"></script>

JW Player

Here's an example of the bare minimum you need to track a single JWPlayer video on your web site:

<!-- include this javascript file on your web page -->
<!-- yes, the http: is intentionally missing -->
<script src='//static.getclicky.com/inc/javascript/video/jwplayer.js'></script>

<!-- this box will contain the video once the page has loaded -->
<div id="myvideo"></div>

<script type="text/javascript">
jwplayer('myvideo').setup({
	flashplayer: "http://your.domain.com/player.swf", 
	file: "http://your.domain.com/video.mp4",
	image: "http://your.domain.com/preview.jpg",
	events: {
		onReady: function(ev) {
			onJWPlayerReady('myvideo');
		}
	}
});
</script>

As with the Youtube example, you can see here that there are some color coded items that all must match each other. The orange item represents the HTML object the video will be inserted into. The red items are the URL and preview image for the JWPlayer instance itself.


Tracking multiple videos on one page

The code is designed to work with as many videos as you want all on a single page. All you have to do is add a few additional lines for each additional video. Note however that each video must have its own unique name in place of "myvideo". The example below shows what you could use if you had three unique videos on one page. We've highlighted the unique parts for each video so you can see how the "myvideo" values match up.

<!-- include this javascript file on your web page -->
<!-- yes, the http: is intentionally missing -->
<script src='//static.getclicky.com/inc/javascript/video/jwplayer.js'></script>

<!-- these boxes will contain the video once the page has loaded -->
<div id="myvideo1"></div>
<div id="myvideo2"></div>
<div id="myvideo3"></div>

<script type="text/javascript">
jwplayer('myvideo1').setup({
	flashplayer: "player.swf",
	file: "http://your.domain.com/path/to/video.mp4",
	image: "http://your.domain.com/path/to/preview.jpg",
	events: {
		onReady: function(ev) {
			onJWPlayerReady('myvideo');
		}
	}
});
</script>

<script type="text/javascript">
jwplayer('myvideo2').setup({
	flashplayer: "player.swf",
	file: "http://your.domain.com/path/to/video.mp4",
	image: "http://your.domain.com/path/to/preview.jpg",
	events: {
		onReady: function(ev) {
			onJWPlayerReady('myvideo2');
		}
	}
});
</script>

<script type="text/javascript">
jwplayer('myvideo3').setup({
	flashplayer: "player.swf",
	file: "http://your.domain.com/path/to/video.mp4",
	image: "http://your.domain.com/path/to/preview.jpg",
	events: {
		onReady: function(ev) {
			onJWPlayerReady('myvideo3');
		}
	}
});
</script>

Youtube

There are two methods to track Youtube videos. The original method we provided is overly complex and requires custom code for each individual video. The only good thing about this old method was that you can attach titles to the videos. The new method can't do titles, but the tradeoff for that is that it's fully automated, even with multiple videos on the same page, and it works with the default embed codes (iframes) that Youtube provides. We highly recommend the new method!

Automated tracking (new method)

Two files must be included on your web site in addition to our tracking code: jQuery, and our Youtube video Javascript file. If your site already has jQuery, then you only need to include the Youtube file.

My site does NOT have jQuery

<!-- include these two javascript files on your web page -->
<!-- yes, the http: is intentionally missing -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src='//static.getclicky.com/inc/javascript/video/youtube.js'></script>

<!-- embed your videos. they'll be tracked automatically! -->
<iframe width="420" height="315"
    src="http://www.youtube.com/embed/gE1ZvCnwkYk" frameborder="0" allowfullscreen></iframe>
<iframe width="420" height="315" src="http://www.youtube.com/embed/LC6dxgLk0GY" frameborder="0" allowfullscreen></iframe>

My site DOES have jQuery already

<!-- include this one javascript file on your web page -->
<!-- yes, the http: is intentionally missing -->
<script src='//static.getclicky.com/inc/javascript/video/youtube.js'></script>

<!-- embed your videos. they'll be tracked automatically! -->
<iframe width="420" height="315"
    src="http://www.youtube.com/embed/gE1ZvCnwkYk" frameborder="0" allowfullscreen></iframe>
<iframe width="420" height="315" src="http://www.youtube.com/embed/LC6dxgLk0GY" frameborder="0" allowfullscreen></iframe>


Manual tracking (old method)

This method requires Youtube's Javascript API, which is not enabled by default. To enable the Javascript API, you have to embed videos on your site using SWF Object. This is a fairly popular Javascript library that makes it very easy to automatically embed Flash objects onto your web site, and it automatically uses the appropriate code depending on the user's web browser.

<!-- include these two javascript files on your web page -->
<!-- yes, the http: is intentionally missing -->
<script src='//static.getclicky.com/inc/javascript/video/youtube.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'></script>

<!-- this box will contain the video once the page has loaded -->
<div id="myvideo"></div>

<!-- this code embeds the video in the 'myvideo' box above.
	replace 'VIDEO_ID' with the appropriate value! (more details below) -->
<script type="text/javascript">
swfobject.embedSWF("http://www.youtube.com/v/VIDEO_ID?enablejsapi=1&playerapiid=myvideo", 
	"myvideo", "425", "356", "8", null, null, { allowScriptAccess: "always" });
</script>

VIDEO_ID

The video ID is the random string of letters and numbers you see at the end of a Youtube URL. In the example URL below, the video ID is highlighted in red, and is what you would copy/paste into the code above to replace 'VIDEO_ID'.

http://www.youtube.com/watch?v=gE1ZvCnwkYk


"myvideo"

You may have noticed the the orange myvideo string in the code above in three different places. The reason we have done this is to highlight the fact that this value must be the exact same in all three places. You don't have to use "myvideo" as the string, but whatever you do use, it must be the exact same in all three places.


Tracking multiple videos on one page

The code is designed to work with as many videos as you want all on a single page. All you have to do is add two additional lines for each additional video - another "myvideo" box, and another swfobject.embedSWF line. Note however that each video must have its own unique name in place of "myvideo". The example below shows what you could use if you had three unique videos on one page. We've highlighted the unique parts for each video so you can see how the "myvideo" values match up:

<!-- include these two javascript files on your web page -->
<!-- yes, the http: is intentionally missing -->
<script src='//static.getclicky.com/inc/javascript/video/youtube.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'></script>

<div id="myvideo1"></div>
<div id="myvideo2"></div>
<div id="myvideo3"></div>

<script type="text/javascript">
swfobject.embedSWF("http://www.youtube.com/v/123?enablejsapi=1&playerapiid=myvideo1", 
	"myvideo1", "425", "356", "8", null, null, { allowScriptAccess: "always" });
	
swfobject.embedSWF("http://www.youtube.com/v/456?enablejsapi=1&playerapiid=myvideo2", 
	"myvideo2", "425", "356", "8", null, null, { allowScriptAccess: "always" });
	
swfobject.embedSWF("http://www.youtube.com/v/789?enablejsapi=1&playerapiid=myvideo3", 
	"myvideo3", "425", "356", "8", null, null, { allowScriptAccess: "always" });
</script>

Video titles

Youtube's API doesn't let access the title of the video, so the only way for us to track the title is if you declare them in a Javascript variable. This requires you to know the title of the video, or at least know what you want the title to show up as in your reports. This is not required, just a nice option to have.

Using the same example from above for tracking three seperate videos, we have added a small chunk of code to declare the titles we want tracked for each one. Notice once again that we have to use the same "myvideo" value as we use in the other places for each video:

<!-- include these two javascript files on your web page -->
<!-- yes, the http: is intentionally missing -->
<script src='//static.getclicky.com/inc/javascript/video/youtube.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'></script>

<div id="myvideo1"></div>
<div id="myvideo2"></div>
<div id="myvideo3"></div>

<!-- Declare the titles for each video here -->
<script type="text/javascript">
	var _ytmeta = {};
	_ytmeta.myvideo1 = { 'title': 'This is my title' };
	_ytmeta.myvideo2 = { 'title': 'This is my other title' };
	_ytmeta.myvideo3 = { 'title': 'This is yet another title' };
</script>

<script type="text/javascript">
swfobject.embedSWF("http://www.youtube.com/v/123?enablejsapi=1&playerapiid=myvideo1", 
	"myvideo1", "425", "356", "8", null, null, { allowScriptAccess: "always" });
	
swfobject.embedSWF("http://www.youtube.com/v/456?enablejsapi=1&playerapiid=myvideo2", 
	"myvideo2", "425", "356", "8", null, null, { allowScriptAccess: "always" });
	
swfobject.embedSWF("http://www.youtube.com/v/789?enablejsapi=1&playerapiid=myvideo3", 
	"myvideo3", "425", "356", "8", null, null, { allowScriptAccess: "always" });
</script>




Viddler

Viddler has partnered with us to add fully automatic video tracking to their service. It's just as easy as HTML5 tracking, in that you don't even have to include one single line of additional code on your site. Their Flash player looks at the Javascript code on the page and if it detects our tracking code, it automatically interfaces with our video API.

Therefore, if possible, we highly recommend using Viddler for your video embed needs, as it requires no additional work after embedding the videos on your web site.

Vimeo

Tracking Vimeo videos is similar to Youtube, except we need to declare a bit more data up front. One thing their API does not give us is the video ID or URL, so you need to declare the Vimeo video ID of each video you want tracked. This is because like all "content" items in your reports, videos are grouped by URL. So if you don't give us the ID, then all of your videos will be grouped together, and that's not terribly useful.

Here's an example of the bare minimum you need to track a single Vimeo video on your web site:

<!-- include these two javascript files on your web page -->
<!-- yes, the http: is intentionally missing -->
<script src='//static.getclicky.com/inc/javascript/video/vimeo.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'></script>

<!-- this box will contain the video once the page has loaded -->
<div id="myvideo"></div>

<script type="text/javascript">
// this 'meta' object stores the video's ID, which we use to create the unique URL
// it can also (optionally) store the title, which we've added in here too
var _vimeometa = {};
_vimeometa.myvideo = { 'id': '13703448', 'title': 'Ants in my scanner' };

// required variables to pass to vimeo flash player
var _vimeo_flashvars = {
	show_portrait: 1,
	show_byline: 1,
	show_title: 1,
	js_api: 1,
	js_onLoad: 'onVimeoReady',
	js_swf_id: 'myvideo',
	clip_id: '13703448'
};

// and finally, we embed the video
swfobject.embedSWF("http://vimeo.com/moogaloop.swf", "myvideo", "504", "340", "9.0.0", 
	"expressInstall.swf", _vimeo_flashvars, { allowscriptaccess: 'always', allowfullscreen: 'true' });
</script>

As with the Youtube example, you can see here that there are some color coded items that all must match each other. The orange item represents the HTML object the video will be inserted into, and must be declared a whopping four times. The red item is the video's ID, which must be passed both to the flash player itself, as well as to the "meta" object, which our library uses to build the URL that you will see in your reports. Vimeo's API does not have a method to access this ID, or the public URL of a video, so you must declare it twice - once for us, once for Vimeo. (If the video was publicly available at http://vimeo.com/123, then "123" would be its ID).


Tracking multiple videos on one page

The code is designed to work with as many videos as you want all on a single page. All you have to do is add a few additional lines for each additional video. Note however that each video must have its own unique name in place of "myvideo". The example below shows what you could use if you had three unique videos on one page. We've highlighted the unique parts for each video so you can see how the "myvideo" values match up.

<!-- include these two javascript files on your web page -->
<!-- yes, the http: is intentionally missing -->
<script src='//static.getclicky.com/inc/javascript/video/vimeo.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'></script>

<div id="myvideo1"></div>
<div id="myvideo2"></div>
<div id="myvideo3"></div>

<script type="text/javascript">
var _vimeometa = {};
_vimeometa.myvideo1 = { 'id': '123', 'title': 'Title 1' };
_vimeometa.myvideo2 = { 'id': '456', 'title': 'Title 2' };
_vimeometa.myvideo3 = { 'id': '789', 'title': 'Title 3' };


var _vimeo_flashvars = {
	show_portrait: 1,
	show_byline: 1,
	show_title: 1,
	js_api: 1,
	js_onLoad: 'onVimeoReady',
	js_swf_id: 'myvideo1',
	clip_id: '123',
};
swfobject.embedSWF("http://vimeo.com/moogaloop.swf", "myvideo1", "504", "340", "9.0.0", 
	"expressInstall.swf", _vimeo_flashvars, { allowscriptaccess: 'always', allowfullscreen: 'true' });



var _vimeo_flashvars = {
	show_portrait: 1,
	show_byline: 1,
	show_title: 1,
	js_api: 1,
	js_onLoad: 'onVimeoReady',
	js_swf_id: 'myvideo2',
	clip_id: '456',
};
swfobject.embedSWF("http://vimeo.com/moogaloop.swf", "myvideo2", "504", "340", "9.0.0", 
	"expressInstall.swf", _vimeo_flashvars, { allowscriptaccess: 'always', allowfullscreen: 'true' });



var _vimeo_flashvars = {
	show_portrait: 1,
	show_byline: 1,
	show_title: 1,
	js_api: 1,
	js_onLoad: 'onVimeoReady',
	js_swf_id: 'myvideo3',
	clip_id: '789',
};
swfobject.embedSWF("http://vimeo.com/moogaloop.swf", "myvideo3", "504", "340", "9.0.0", 
	"expressInstall.swf", _vimeo_flashvars, { allowscriptaccess: 'always', allowfullscreen: 'true' });
</script>


This is a bit more cumbersome than Youtube tracking, but we are limited to the API that Vimeo provides.





The video API

If you want to use your own code for talking to our video API, this is the documentation you need. We have a function in our tracking code called clicky.video() that takes 4 parameters. The first three parameters are required, the last one is optional.

clicky.video( action, time, url, title )

  • action

    String REQUIRED
    The type of action you are logging. There are 4 possible values here: 'play', 'pause', 'seek', and 'end'. Passing in any other value will result in no tracking occurring.

  • time

    Integer REQUIRED
    The time (in seconds) of the action. This is the time in the video, not "real" time. For example, a video that is 15 seconds long, when the initial 'play' action occurs, the value here would be 0, and when it ends, it would be 15.

    IMPORTANT: All video actions will get logged to the Visitors -> Action log report, as well as show up in Spy. However, for the main Content -> Video report, only 'play' events with a time of '0' will be logged in there (because we only want to increment the counter when someone is starting the video from the beginning). So, make sure your initial play event sends in a time of '0'.


  • url

    String REQUIRED
    This is the public URL of the video. Just like other types of content in your reports, videos are grouped by their URL, so you must pass in the URL of the video here.

    This must be a full URL and start with 'http://'. If your video isn't technically available on a public URL, or uses a different protocol than HTTP, then please modify the URL you are logging to the API to match this requirement.

  • title

    String
    If you know the title of the video, pass it in here. This is not required, but will make your video reports a bit more informative.