How to Easily Track jPlayer Audio & Video in Google Analytics



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:

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

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:

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:

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.

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”.

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.

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…

Sayf is a former LunaMetrician and contributor to our blog.

  • Bill D

    Video won’t play.

  • Sayf Sharif

    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?!

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

  • E.T.

    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.

    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

    Thanks ET!

  • Hi,

    Thank you so much for this !
    I am using MP3-jPlayer plugin for wordpress (ie: 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,

  • Sayf Sharif


    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.

  • 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 ?


  • Sayf Sharif


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


  • Jamie Nazaroff

    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

    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 talks about aspects of timing using that player, but the same logic applies here.

  • Sylvester

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

  • Sayf Sharif

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

  • Robert R. Ricks

    does this still work with Google Analytics?

    • Sayf Sharif

      The general code should still work, but it’s using classic google analytics tracking code, so depending on what you’re doing you’d need to update it to either universal tracking code, or google tag manager datalayer pushes. The jplayer links above to their quick start guide still work, so I’d check if they have updated implementation code as well.

Contact Us.

Follow Us



We'll get back to you
in ONE business day.
Our Locations
THE FOUNDRY [map] LunaMetrics

24 S. 18th Street
Suite 100

Pittsburgh, PA 15203


4115 N. Ravenswood
Suite 101
Chicago, IL 60613


2100 Manchester Rd.
Building C, Suite 1750
Wheaton, IL 60187