How to Easily Track video.js in Google Analytics

By /

May 23, 2013

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>

In the <body>

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:

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

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.

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 is a Senior Analytics Supervisor working with Google Analytics and specializing in Usability and Conversion. He has helped hundreds of businesses design, develop, and improve conversion on their websites since 1997. Things you didn’t know about Sayf: he’s biked from Pittsburgh to Cleveland in 32 hours, studied Archaeology in Graduate School focusing on human tool use, and feels the Oxford comma is more important than Jim apparently does.

  • http://videojs.com heff

    Great writeup, thanks! Tweeted. @videojs

  • Sayf Sharif

    Thanks! Glad you liked it.

  • http://seotoast.com/understanding-google-and-the-game-that-it-plays/ xiaojun

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

  • bquarante

    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

    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

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

  • John Paul

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

  • Sayf Sharif

    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.

  • http://remarkin.com janmesh

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

  • Sayf Sharif

    Sure you could do that.

  • http://conseiller-orientation-quebec.ca Michel

    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

  • http://conseiller-orientation-quebec.ca Michel

    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

    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

    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

    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

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

  • http://animebaka.tv silky

    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

    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.

  • http://www.sharefile.com Kevin

    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

    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

    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?

  • Tony

    I’m getting a 404 error on the download of the .js file. Is there an updated link?

  • Nichochar

    Seems to be a 404

Contact Us.

LunaMetrics

24 S. 18th Street, Suite 100,
Pittsburgh, PA 15203

Follow Us

1.877.220.LUNA

1.412.381.5500

getinfo@lunametrics.com

Questions?
We'll get back to you
in ONE business day.