You Are Currently Viewing: Video Analytics

Church Analytics has an API for tracking interactions with HTML5 and Flash video 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 Video 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, you can learn how to track it below. If you need/want to write your own code to talk to our API then you can do that too.


HTML5 Video

HTML5 video is the wave of the future. The most exciting thing about is that it's a "native" part of your browser - no Adobe Flash or other plugins required. Part of what makes this interesting is that all browsers are implementing the same API to control and log interactions with HTML5 videos. And since they are native DOM elements, this also means it's by far the easiest way to track videos on your web site.

Here's all the code you need to track HTML5 videos on your web site. Just include this one single file on any page of your site that has HTML5 video, and you're good to go. You can put it anywhere on the page - we recommend at the bottom next to our normal tracking code, but there are no requirements. It will automatically find all <video> elements on any page it's installed on, and interface them with our video API. It's like magic.

<script src="http://churchanalytics.com/js/html.js"></script>

To add titles to the videos reported in our interface, just add a title attribute to the element. For example:

<video controls title="My video" src="http://mysite.com/myvideo.ogg"></video>


YouTube

Since YouTube is the biggest video site on the internet, we have written some code you can use to fairly easily track Youtube videos embedded on your web site. This still requires you to do a small bit of coding on your web site, but it is fairly easy.

First, the standard embed code that Youtube gives you to embed a video on your site will not work. This is because the default code does not enable their Javascript API 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.

Don't panic! The small example code we use below is everything you'll need to do to track Youtube videos on your site. There's really nothing to it! There is more detail below for how to track video titles, or tracking multiple videos on the same page, but this basic code is all you need for tracking a single video on one page:

<!-- include these two javascript files on your web page -->
<script src='http://hello.staticstuff.net/inc/javascript/video/youtube.js'></script>
<script src='http://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 green, 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 green 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:

<script src='http://hello.staticstuff.net/inc/javascript/video/youtube.js'></script>
<script src='http://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:

<script src='http://hello.staticstuff.net/inc/javascript/video/youtube.js'></script>
<script src='http://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>


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 -->
<script src='http://hello.staticstuff.net/inc/javascript/video/vimeo.js'></script>
<script src='http://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 green items represents the HTML object the video will be inserted into, and must be declared a whopping four times as well as 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.

<script src='http://hello.staticstuff.net/inc/javascript/video/vimeo.js'></script>
<script src='http://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' });
</script>

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' });
</script>

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 canalytics.video() that takes 4 parameters. The first three parameters are required, the last one is optional.

canalytics.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.
  • url

    StringREQUIRED
    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.
  • 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.

Jump Back to the Top!
Sign In

Need to register? Click here