How To Easily Track Video.js In Google Analytics

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>

<pre>

&nbsp;</pre>
</div>
<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>


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 Analytics 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