Upcoming LunaMetrics Seminars
Washington DC, Dec 1-5 Los Angeles - Anaheim, Dec 8-12 Pittsburgh, Jan 12-16 Boston, Jan 12-16

How to Easily Track jPlayer Audio & Video in Google Analytics

Bob-Ross-595x400

Problem: You have media like an audio file, or a small video, that you want to put on your website, and you want to track whether people are listening or watching to it inside Google Analytics, or even make it a Goal.

Solution: Use jPlayer and the code below to track your jPlayer events into Google Analytics.

Wait a Tick: What’s with the Bob Ross photo?

Hold Your Horses: All in good time.

What is jPlayer?

jPlayer is a free and open source (licensed under MIT and GPL) HTML5 audio and video player you can use on your website without restrictions. In general it’s a very easy to use player, and most people, with a little copy and pasting, can have a media player on their website in minutes. If you need a media player for audio or video on your website, it’s one of the first ones I’ll recommend.

However, by default, like many things, it doesn’t track into your Google Analytics account. No problem. Doing that is pretty easy as well by following these steps.

1. Install jPlayer

Put jPlayer on your website by following the jPlayer Quick Start Guide on the jPlayer website. This will involve downloading some files, making sure you have jQuery, and copying in both html and javascript to the page. An example of the code you should see at that point is located in the summary of the jPlayer Quick Start Guide.

2. Name Multiple Players Differently

Now, there are two things to pay attention to. First is the player itself. The audio player has two div’s to be aware of, located at the top of the HTML for each audio player:

<div id=”jquery_jplayer_1″></div>
<div id=”jp_container_1″>

For the video player they’re also at the top but in a different order:

<div id=”jp_container_2″ class=”jp-video “>
<div class=”jp-type-single”>
<div id=”jquery_jplayer_2″ class=”jp-jplayer”></div>

The ones you care about are jquery_jplayer_1, or jp_container_1. Each player is identified by these two id’s. If you want to have multiple players on the same page you need to name them different things. jplayer_1, jcontainer_1 and then increment the number, or however you want to do it. However each player needs unique names for each of those values.

3. Modify the jPlayer Script

The script placed in the head of your page will look something like this for an audio file:

<script type=”text/javascript”>
          $(document).ready(function(){
                  $(“#jquery_jplayer_1″).jPlayer({
                             ready: function () {
                                    $(this).jPlayer(“setMedia”, {
                                              m4a: “http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a”
                                     });
                              },
                   swfPath: “/js”,
                  supplied: “m4a”
          });
});
</script>

The first thing you should do is add a line to the code, particularly if you are going to be running multiple players on the page:

<script type=”text/javascript”>
$(document).ready(function(){
         $(“#jquery_jplayer_1″).jPlayer({
               ready: function () {
                     $(this).jPlayer(“setMedia”, {
                          m4a: “http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a”
                      });
               },
               swfPath: “/js”,
               supplied: “m4a”,
              cssSelectorAncestor: “#jp_container_1″
          });
});
</script>

Next make sure you modify the code for your actual files. The bolded items below are what you need to change. Identify your player and it’s container, and the media extension, as well as it’s actual location.

<script type=”text/javascript”>
$(document).ready(function(){
           $(“#jPlayer_1“).jPlayer({
                 ready: function () {
                     $(this).jPlayer(“setMedia”, {
                          mp3: “http://www.mydomain.com/media/filename.mp3
                      });
                 },
                swfPath: “/js”,
                supplied: “mp3“,
               cssSelectorAncestor: “#jContainer_1
          });

//add the Google Analytics code listed below here.

});
</script>

3. And Now Add the Google Analytics Tracking

That will work to play the file, but it won’t track in Google Analytics yet. For that add the below script where in the script above it says “//add the Google Analytics code listed below here”.

//listener for playing the file
$(“#jquery_jplayer_1“).bind($.jPlayer.event.play, function(event) {
           //playerTime grabs the current % location on the file being played.
            //if they’re at the beginning it’s 0. If they’re at the end it’s 100. Etc.
             var playerTime = Math.round(event.jPlayer.status.currentPercentAbsolute);
           //grabs the media currently being played. Usefull for when multiple files are played in the player.
            var mediaName = event.jPlayer.status.src;
            //track it as an event with category:jPlayer, action:Play, label:Name of the file being played, value:location on file as %
          _gaq.push([‘_trackEvent’, ‘jPlayer’, ‘Play’,mediaName,playerTime]);
});
//listener for a pause click
$(“#jquery_jplayer_1“).bind($.jPlayer.event.pause, function(event) {
           //as above, grabbing the % location and media being played
          var playerTime = Math.round(event.jPlayer.status.currentPercentAbsolute);
          var mediaName = event.jPlayer.status.src;
           //We’ll only track the “pause” if the percent value is less than 100. This is because at 100%
         //when the player ends, it will send a pause event with the end event.
          //we don’t need that duplication in GA
          if(playerTime<100){
                  //tracking the pause with similar setup to the play event
                  _gaq.push([‘_trackEvent’, ‘jPlayer’, ‘Pause’,mediaName,playerTime]);
          }
});
//listening for the user dragging the seek bar
$(“#jquery_jplayer_1“).bind($.jPlayer.event.seeking, function(event) {
         //as above, grabbing the % location and media being played
         var playerTime = Math.round(event.jPlayer.status.currentPercentAbsolute);
         var mediaName = event.jPlayer.status.src;
         //tracking the seeking action similar to above
         _gaq.push([‘_trackEvent’, ‘jPlayer’, ‘Seeking’,mediaName,playerTime]);
});
//listening for when the user has stopped dragging the seek bar
$(“#jquery_jplayer_1“).bind($.jPlayer.event.seeked, function(event) {
         //as above, grabbing the % location and media being played
         var playerTime = Math.round(event.jPlayer.status.currentPercentAbsolute);
         var mediaName = event.jPlayer.status.src;
         //There’s some overlap between the seeked and stopped events. When a user clicks
         // the stop button it actually sends a “seek” to the 0 location. So if the seeked location is 0
         // then we track it as a stop, if it’s greater than 0, it was an actual seek.
         if(playerTime>0){
                  //track the seeked event as above
                  _gaq.push([‘_trackEvent’, ‘jPlayer’, ‘Seeked’,mediaName,playerTime]);
         }else{
                  //track the stopped event as above
                  _gaq.push([‘_trackEvent’, ‘jPlayer’, ‘Stopped’,mediaName,playerTime]);
         }
});
//listening for an end ie file completion
$(“#jquery_jplayer_1“).bind($.jPlayer.event.ended, function(event) {
         //as above, grabbing the % location and media being played
         //except when it ends we force the value as 100%, otherwise it shoots back as 0
         var playerTime = 100;
         var mediaName = event.jPlayer.status.src;
         //track the End event as above.
         _gaq.push([‘_trackEvent’, ‘jPlayer’, ‘Ended’,mediaName,playerTime]);
});

All you have to do for that script is to change each “jquery_jplayer_1″ to match the id name of the player itself.

And that’s it. With that code you’ll be tracking videos and audio played through jPlayer on your website. If you’d like to look at a pure demo page with just the necessary code for the three players, click here.

So What Data Gets Fired

eventsYou’ll end up seeing up to 6 events in your Google Analytics under jPlayer. Play, Pause, Seeking, Seeked, Ended, and Stopped.

Play: This will be whenever someone hits play. Usually the value is 0 when someone hits play the first time, but if they pause, and play the file later, you’ll get a different Event Value which is the % of where they are in the file.

Pause: The user has hit pause, or maybe it’s autopaused from another player starting. Either way the pause event on the player fires this event, with the event value showing where as a % on the file it paused.

Seeking: This shows someone starting to scan/seek for a new area using the timeline. The value is where they started seeking from.

Seeked: This is where they end up releasing their seek.

Stopped: The user stopped the file by hitting the stop button. This will have a value of 0 but if you look at the event prior you can see that it fires a Seeked event before the stop, showing where the stop occurred.

Ended: The user watched the whole way through.

this and the events flow give you a good vision of the file. How many people watched the whole thing, how many watched up to a certain point, 50% or 75%, etc. Are there any specific spots on the audio or video that people keep seeking to, etc. Lots of great data can be had, even if it’s just “did someone click play on it”.

That’s about it. Just one more thing…

Please Enjoy Bob Ross Painting a Mountain

I’m curious to see through tracking how many watch the whole video…

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/09/track-jplayer-google-analytics/

14 Responses to “How to Easily Track jPlayer Audio & Video in Google Analytics”

Bill D says:

Video won’t play.

Sayf Sharif Sayf Sharif says:

Thanks Bill. Somehow in the transition of this post to the production site the filepointers went squirrelly. It’s fixed now. How can you have an audio and video tracking blog post without actual working audio and video in the players?!

Xavier says:

Thanks for sharing, I’ll put it on my blog, it’ll be interesting to have this information

E.T. says:

Thanks for this post! I’m trying to get some values back to my database using these tips. Now it’s about if the user seeked forward or reversed, is there any way to go through it?

E.T. says:

I got it, this function shows how you retrieve information about whether a track is forwarded or rewinded:

$(“#jquery_jplayer_1″).bind($.jPlayer.event.seeked, function (event) {
// currentprogress gets the progression before the seek action
var currentprogress = ($(‘.jp-play-bar’).width() / $(‘.jp-seek-bar’).width() * 100);
var playerTime = Math.round(event.jPlayer.status.currentPercentAbsolute);
if (playerTime > currentprogress) {
//code that says it’s forwarded
}
else if (playerTime < currentprogress) {
//code that says it's rewinded
}
});

Sayf Sharif Sayf Sharif says:

Thanks ET!

Vincent says:

Hi,

Thank you so much for this !
I am using MP3-jPlayer plugin for wordpress (ie: http://sjward.org/jplayer-for-wordpress/) which is using the JP player. As you can imagine I would be more than happy to track it in in Google Analytics.

As it is using wordpress shortcode, would you have an idea where would I have to add the code you have suggested ?

Thank you so much for your help,
best,
Vincent

Sayf Sharif Sayf Sharif says:

Vincent,

I don’t specifically know the answer to your question. I would assume the plugin would be dynamically generating the code to place on the page, so step 2 would have you take the modifications we make to the code, and hunt in the plugin files for where that code is dynamically generated to put on the page, and modify it there. Unless it’s already adding the required naming conventions. In which case you could skip step 2 entirely.

Step 3 then would need to occur on the page in the header somewhere inside script tags by itself, without the other setup code for jplayer.

It’s probably possible, but it’s going to require a little bit of trial and error on your part to get it working.

vincent says:

Sayf,

Thank you so much for this. I will try my best but as I am not at all a developer.. !
In case would you be interested to do that as a freelance work ?

Thanks,
Vincent

Sayf Sharif Sayf Sharif says:

Vincent,

I appreciate it but they keep me busy enough here! Good luck.

Sayf

Jamie Nazaroff says:

I’m interested in adding this to Jplayer using a shout cast stream (i.e.; a single stream, rather than multiple files). Any idea on how I can track the amount of time someone listens to the stream?

Sayf Sharif Sayf Sharif says:

Well, using Jplayer we’re pretty much limited to javascript. You can theoretically put a setinterval in the play area, tied to some sort of pause token that gets fired and stops the interval when someone hits stop or pause, etc.

That could at certain intervals fire an event to GA, and you could see time on the stream. You might be better off just acknowledging that your timing will be a little rough and recording time at specific intervals. How many made it to 10 seconds, 30 seconds, 1 minute, 5 minutes, etc. Most of your drop off is going to happen probably in the first minute or two, depending on the length, so you could have more events at the start to determine that, and then taper off.

My video.js post http://www.lunametrics.com/blog/2013/05/23/easily-track-videojs-google-analytics/ talks about aspects of timing using that player, but the same logic applies here.

Sylvester says:

I observed an instance where % completed was more than 50% viewed. Is there any explanation as to how that can occur?

Sayf Sharif Sayf Sharif says:

Could be alot of people skipped to a later point in the video and it ended without them ever viewing past the 50% point?