Upcoming LunaMetrics Seminars
New York City, Aug 4-8 San Francisco, Aug 11-15 Los Angeles - Anaheim, Sep 8-12 Washington DC, Sep 22-26

How to Easily Track video.js in Google Analytics

What is video.js?



video.js is a free, fast, open source (licensed under Apache) HTML5 video player available at http://www.videojs.com/ which was developed by video experts from Brightcove & Zencoder. It’s really easy to set up, but like most of these types of popular open source players, it doesn’t come with built in Google Analytics tracking. As a possible benefit though it doesn’t use jQuery, so if for some reason you can’t use jQuery, or you’re having issues with jQuery on your website, video.js could be a good option for you.

So once again, like with my post on how to track YouTube videos with Google Analytics, or my post on how to track jPlayer audio or video players with Google Analytics, I’ve put together some code to help you easily track video.js in Google Analytics using Events.

First – Get video.js working

The first thing to do is to make sure you’re actually setting up a page to run video.js correctly. You can do this two ways. One, you can follow the instructions here  to add the code to your page yourself, or you can use the quick embed function they have on the main website . Under the main video on their home page are three colors you can change, and a slide bar to control the size of the initial play button that appears over the video. When you’re happy with the colors, click “Embed this Player” and you’ll see code like this (if you changed the colors you’ll see some additional styles in addition):

In the <head>

<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.0/video.js"></script>

In the <body>

<video id="my_video_1" controls
 preload="auto" width="640" height="264" poster="my_video_poster.png"
 data-setup="{}">
 <source src="my_video.mp4" type='video/mp4'>
 <source src="my_video.webm" type='video/webm'>
</video>

Once those are on your page, you’ll be able to watch a video by changing the file information bolded in the code above to your appropriate video files.  Here’s an example of how one looks from a clip hosted on zencoder:

<video id="example_video_1" controls preload="auto" width="640" height="264"
   poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}">
   <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
     <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
     <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
     <track kind="captions" src="demo.captions.vtt" srclang="en" label="English" />
  </video>

Pretty simple setup for a video player, and it works nicely. But still no tracking. so here’s what we do. Under the video tag you placed in the body, place the following code.

Below the <video> tag

<script>
//reference the player
var myPlayer = videojs("example_video_1");
//provide a name for the Events
var videoTitle = "Fishing in The Ocean";
</script>
<script src="video-ga.js"></script>

You can download the video-ga.js file here and include it on your website. Be sure to point the above <script> tag to the correct location of your video-ga.js file.

This is the file that will let you track your video. All you have to do is change example_video_1 to the name of the id on your video tag, and then add a title for the video for the variable “videoTitle”. This will show up as the Label in Google Analytics on the event, so you can identify the video. If you want to add tags or other information there, go for it!

And that’s it. Now that player will be tracking events into Google Analytics.  If you already have a video.js player working on your site, all you need to do is download that video-ga.js file, point it to the correct location, and rename the bold areas above in the “below the video tag” section to match your video tag id, and the title or filename of the video, and you’re good to go.

But what if you have two videos on the page?

No problem. There are probably more complicated ways to do this that are ‘cleaner’, but here’s a simple way.

  1. Copy the video-ga.js file and rename it to something like video-ga2.js.
  2. Then copy the “in the body” section of the code for your second video. Make sure to give it a different id value, as well as point the video to the second video location. Make sure it plays before you proceed.
  3. Copy a new section of  “below the video tag” section of code below that video tag, like you did the first one.
  4. Rename mPlayer to something else, like mPlayer2
  5. Then change the example_video_1 to the new id name of the second video tag
  6. Change videoTitle to be videoTitle2
  7. Change the value of videoTitle2 to match your second video.
  8. Go into video-ga2.js and at the very top on line 9 of the code change myPlayer to myPlayer2
  9. Below that on line 14 change videoTitle to videoTitle2

And you’re good. that second player will now track separately and individually from the first player, and you’ll see both in Google Analtyics under different Event Labels. I have two videos playing on this page, tracking independently, but for cleaner code, check out this demo page with just the basic code.

What does this input into Google Analytics?

This will track the following events into Google Analytics

Loaded

This fires when the video is loaded onto the page.

category: video

action: loaded

label: The value of the variable videoTitle

value: Current Position on Video in Seconds (which here is 0)

non-interaction: true

5%

This fires when the user reaches 5% of the video duration

category: video

action: 5%

label: The value of the variable videoTitle

value: Current Position on Video in Seconds

non-interaction: true

10%

This fires when the user reaches 10% of the video duration

category: video

action: 10%

label: The value of the variable videoTitle

value: Current Position on Video in Seconds

non-interaction: true

25%

This fires when the user reaches 25% of the video duration

category: video

action: 25%

label: The value of the variable videoTitle

value: Current Position on Video in Seconds

non-interaction: true

50%

This fires when the user reaches 50% of the video duration

category: video

action: 50%

label: The value of the variable videoTitle

value: Current Position on Video in Seconds

non-interaction: true

75%

This fires when the user reaches 75% of the video duration

category: video

action: 75%

label: The value of the variable videoTitle

value: Current Position on Video in Seconds

non-interaction: true

95%

This fires when the user reaches 95% of the video duration

category: video

action: 95%

label: The value of the variable videoTitle

value: Current Position on Video in Seconds (which here is 0)

non-interaction: true

100%

This fires when the video reaches it’s full end and stops.

category: video

action: 100%

label: The value of the variable videoTitle

value: Current Position on Video in Seconds 

non-interaction: true

Seek Start

This fires when a user drags to another part of the video, this is where the drag started

category: video

action: seek start

label: The value of the variable videoTitle

value: Where the user dragged from

non-interaction: true

Seek End

This fires and labels where the drag ended

category: video

action: loaded

label: The value of the variable videoTitle

value: Where the user dragged TO

non-interaction: true

Autoplay

This fires when a video is set to autoplay, and it starts

category: video

action: autoplay

label: The value of the variable videoTitle

value: Current Position on Video in Seconds

non-interaction: true

Play

This fires when a user clicks the play button on a non-autoplayed video, or if they’ve paused the video, and hit the play button.

category: video

action: play

label: The value of the variable videoTitle

value: Current Position on Video in Seconds

non-interaction: true

Play After Seek

This fires either after a user seeks, and the video starts playing again, or the video was paused prior to the seek action, and they are restarting the video.

category: video

action: play after seek

label: The value of the variable videoTitle

value: Current Position on Video in Seconds

non-interaction: true

Pause

When a user clicks the pause button.

category: video

action: pause

label: The value of the variable videoTitle

value: Current Position on Video in Seconds

non-interaction: true

Error

When video.js throws an error. You might want to know about this if there is a problem with a particular video, or some other element.

category: video

action: error

label: The value of the variable videoTitle

value: Current Position on Video in Seconds

non-interaction: true

That seems like a lot of events, I’m worried about the 500 hit limit

Feel free to trim them down. Most users will load the video, it will autoplay, and they’ll hit their back button, and it will register 2 maybe 3 events. Loaded, Autoplay, and 5%. If they watch the whole video without pausing you’re looking 9 events: loaded, autoplay/play, 5, 10, 25, 50, 75, 95, 100.

If you want to cut out entire events because you’re worried about the session limit, you can trim them from the video-ga.js file to your hearts content. Or just comment out the particular trackEvents you don’t want them, but don’t want to muck around too much with the code. Just find the particular trackEvent you don’t want and put two slashes // in front of that line and it won’t fire.

How many events to have on videos is not something that’s widely agreed on, and I plan on writing a general video tracking recommendation blog post in the future. I like, at the very least, to know if they played the video, if only once, and a 5% event, 10% event, and maybe a 95% event. That shows people who stuck around and didn’t ‘bounce’ immediately, and then the 95% is good enough to say they watched the whole thing. If you already have many events on your pages consider commenting out all but those

What other insights can I get from adding these events?

The best insight most people can have is “did this person watch a video” and “How much of the video did they watch?” Do you have videos on your site? Does watching the video increase conversions on your site? For instance if you have a contact form on your site that is a main KPI, does watching a video cause people to contact you more, or less? What about different videos? Does a play event on a particular video double your conversion rate on your contact form goal? That might be a video you want to use throughout your website more.

What about whether they hit the video and didn’t make the 10% goal. Or they only made the 5%, or they watched half, or all of it. What videos are grabbing people and getting them to watch more, and which ones if they watch more are driving them to convert more on your KPI’s?

Maybe the videos aren’t really even intended to do anything but drive engagement on the site. Which videos are being shared more can be retrieved from social sharing, but which ones are being watched more? A visit to a video page doesn’t mean they watched the video. Did they play? How much did they watch? How much of that leads towards social sharing of the video driving engagement to your website?

The other events like “seek” are for deeper insights. Are people seeking specific locations of specifc videos more than others? Perhaps the content there is of interest to your users, and you can gain insight from that. What if everyone who views a particular video is seeking to halfway through the video, and most of those aren’t hitting the 75% mark? It’s quite likely the early video isn’t engaging them, and they’re looking to see if the video changes, and then they are bailing. Are they seeking back in the video? Maybe there was a great part of the video they are watching again? Like maybe you are a baseball team and you are posting a specific home run play, and people are scanning back to just the hit at the end of the video? You could decide to add a ‘replay within the replay’ by showing just the hit again at the end of the video, since fans want to see that Grand Slam one more time.

Maybe you ARE doing that, and people are scanning back anyway, and not even making it to the replay within a replay and you can save money by just cutting that out of your video editing process time.

Thanks For Watching!

I hope you find this code useful. Don’t forget to check out my previous posts on how to track YouTube videos with Google Analytics and on how to track jPlayer audio or video players with Google Analytics.

And now enjoy Bob Ross Painting a Mountain…Again



Sayf Sharif

About Sayf Sharif

Sayf Sharif is a Web Analyst, and expert in Usability and UX, who has worked with businesses large and small to maximize their online presence since the beginning of the Web, winning numerous awards along the way. Sayf has studied human tool use from the stone age (he went to graduate school for Archaeology) to the information age (he started programing on his father’s TRS-80), and is always interested in what goals people wish to accomplish using their tools, and how successful that experience was.

http://www.lunametrics.com/blog/2013/05/23/easily-track-videojs-google-analytics/

21 Responses to “How to Easily Track video.js in Google Analytics”

heff says:

Great writeup, thanks! Tweeted. @videojs

Sayf Sharif Sayf Sharif says:

Thanks! Glad you liked it.

xiaojun says:

YouTube videos with Google Analytics more convenient than video.js. Your hair is very interesting, lol

bquarante says:

Hello,

Thank you for the tips ;)
i have 2 videos on the same page so i followed your example.
i’d like to know if there’s no problem to merge and minify the js files if i do it like this :

//reference the player
var myPlayer = videojs(“example_video_1″);
//provide a name for the Events
var videoTitle = “Fishing in Nature”;

//reference the player
var myPlayer2 = videojs(“example_video_2″);
//provide a name for the Events
var videoTitle2 = “Second Video of the Ocean Stuff”;

Thank you

bquarante says:

oops sorry…
here it is (i removed the “”)

script
//reference the player
var myPlayer = videojs(“example_video_1″);
//provide a name for the Events
var videoTitle = “Fishing in Nature”;
/script

script
//reference the player
var myPlayer2 = videojs(“example_video_2″);
//provide a name for the Events
var videoTitle2 = “Second Video of the Ocean Stuff”;
/script

//here the single js
script src=”merged-and-minified.js”
/script

Sayf Sharif Sayf Sharif says:

bquarante, I’m not sure, I’ve never tested that. I would imagine it should work. Try and it and see!

John Paul says:

Where i can add my google analytics account in the above code.
What I have to add in data-setup=”{}”

Sayf Sharif Sayf Sharif says:

John Paul, this assumes that you have Google Analytics running on the page independent of this script. You do not add your GA account in the above code.

You add nothing into that data-setup area.

janmesh says:

Hello sir…
I have site like YouTube.I want to track all events in all video.
It is possible using above solution.

Sayf Sharif Sayf Sharif says:

Sure you could do that.

Michel says:

Hi,

First thank your for you post!

I have hard time to get Analytics data from my video. Wish Analytics tracking code version is working with your script?

Thank you, Michel

Michel says:

Ok I think I got the problem.

In your video-ga.js at the line 18 you have

myPlayer.ready(function(){

and I think it should be

myPlayer.ready function(){

Brian says:

If you want to use it with multiple videos on the same page you could just encapsulate the script into a function and pass in the dynamic parameters.

example:
function doAnalytics(myPlayer,videoTitle)
{



}

Sayf Sharif Sayf Sharif says:

Thanks Brian. WordPress edited it out, but for those reading the above inside the function is a commented out line saying the contents of video-ga.js there. (without the ellipsis as well).

Marcos says:

Hi Sayf,

I am very lucky because I found it on the Internet. Thank you very much for your post.

I have been trying to upload your demo but it doesn’t work on my website. It is still the same and I don’t know why.

Could you help me please? I can not see the Event in GA panel.
http://www.inmab.com/video-js/demo.html

Thank you very much!!
Marcos, a new follower ;)

Sayf Sharif Sayf Sharif says:

You should see the events in your Top Events report under the Behavior section in GA.

silky says:

Is there an updated version of the analytics script set to work with the new Universal Tracking code from Google?

This one simply gives an error:
Uncaught ReferenceError: _gaq is not defined.

Sayf Sharif Sayf Sharif says:

Not currently, however you can simply go through the code and change the classic analytics tracking lines to be universal syntax and you should be good to go.

Kevin says:

Hey Sayf, thanks for this post- really great.
Can you elaborate on replacing the classic tracking with the universal syntax? Is that basically just replacing the gaq.push events with the “ga(‘send’, ‘event’,” syntax?

For example:
_gaq.push(['_trackEvent', 'video', 'loaded', videoName, whereYouAt, true])

would become

ga(‘send’, ‘event’,’loaded’, videoName, whereYouAt, true)

Is that right, am I missing anything?

Thanks!

Sayf Sharif Sayf Sharif says:

Nope, you got it. The Universal tracking is in there just commented out. To use it with Universal, just comment out, or delete, the gaq lines, and uncomment the ga( universal lines and you should be good to go.

Just don’t forget to add enablejsapi=1 to the iframe source as noted above.

Sayf Sharif Sayf Sharif says:

Oop wrong video post. I have too many video trackers. This one doesn’t have the UA code in it, so you are 100% correct about swapping. Also you don’t need the enablejsapi, thats’ for the youtube tracker. Blech. Is it Friday yet?