Analyze this! – How to use JW Player’s API with Google Analytics

JW Player and Google Analytics

In this age of information, analytics are king. Content providers like to know how their products are being used and when people are using specific features. It comes as no surprise that many providers want to know how their videos are being watched so they can improve the viewing experience. Surely, knowing your audience and their viewing habits are a sure fire way to keep everybody happy.

Enter: Google Analytics

We allow the use of Google analytics with our premium version of the player. By default, integration with the GA platform shows only two things: Video plays and video completes. However, thanks to the versatility of our player’s API, we can also monitor over 30 different events. Check out the following table for some examples:

Track when a user goes fullscreen onFullscreen()
Get the viewer’s selected video quality onQualityLevels() + getCurrentQuality()
Determine a user’s volume level onVolume() + getVolume()
See which sections views are skipping to onSeek() + getPosition()
Alert when a user experiences an error onError()

For an example on how to implement measurement of any of these events, we’ll focus on viewers’ frequently used captions.

Setting up our captions

In order to get some caption data, we need to go ahead and set up some caption files. We take care of this by adding our SRT/VTT files within our player’s embed. In our example below, we have four different caption files which conveniently cover four different languages.

tracks: [
     { file: 'jw6-english.vtt', label: 'English', kind: 'subtitles' },
     { file: 'jw6-farsi.vtt', label: 'Farsi', kind: 'subtitles' },
     { file: 'jw6-japanese.vtt', label: 'Japanese', kind: 'subtitles' },
     { file: 'jw6-russian.vtt', label: 'Russian', kind: 'subtitles' }
   ]

Pulling our caption data and pushing it to Google

There are two items that we would like to capture with the JW Player to send to Google. First, we’d like to get the captions that people are using, and then we’d also like to know which video file people are using these captions with.

Using our onCaptionsChange event listener, we’re going to be able to figure out whenever a user changes their captions. In doing so, this will also make a note of which caption is being used by storing it as our ‘current’ variable.

Next, we’ll be using getPlaylistItem() to figure out which item is being played. This will also be saved as our ‘playing’ variable.

The next step is to send these two variables over to google analytics with the following Google Analytics code:

_gaq.push(['_trackEvent', 'Change Captions', current, playing]);

The above code will grab our two variables, ‘current’ and ‘playing’ place it in the ‘Change Captions’ event category of Google analytics. Now that we’re finished here, let’s take a look at Google analytics


What you’ll see on the Google side of things

Changing your captions might take a bit of time to show up in your actual analytics, but you can ensure that things are working properly by checking your analytics in real-time.


Start by logging into your Google analytics account. Click on Standard reports, Real-time, and select Events (BETA).

Here, we can see our different event categories. As previously said, our two default categories, plays and completes, are appearing here. However, there is also a third custom category, Change Captions, with three new events.

By clicking the Change Captions category on the left, we can drill down a bit further.



We now see that three different caption languages have been selected over the past 15 minutes. We also see which video file our captions were chosen on. In this case, it is sintel.mp4.

For a much broader scope, you can navigate to Content, Events, and Overview on the left side of your screen.

Here, you can view lifetime events for any category, including plays, completes, and in our case, caption changes. Keep in mind, these events are not populated in real time, and may take a little while to show up.

And this is how custom events work on the JW player! There are so many other ways to utilize these events, so feel free to ask questions or make suggestions in the comments below.

1 Comment

  1. Yin January 24, 2014 - 08:32 EST

    Hello,

    We are going to submit below events to Google analytics from our premium JW Player 6.
    1. onAdComplete(callback)
    2. onAdSkipped(callback)
    3. onAdError(callback)
    4. onAdImpression(callback)
    5. onAdTime(callback)

    How should I configuring to submit the events in ga: {} ?
    Our video player test url is below.
    http://www.homegardenview.com/videos/general/jw-player-test

    If you view source in browser, you can see the javascript code that I wrote.
    Looking forward to hearing from you asap.

    Regards,
    Yin.

Post a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>