Order Now AdSolution Sign Up | Login » Bits on the Run Sign Up | Login »

AddOns

Getting Started with the Google Analytics JW Player Plugin

Purpose

This is a guide will instruct you on how to get started with the Google Analytics Plugin for the JW Player.

Introduction

The Google Analytics Pro (GAPro) plugin for the JW Player is designed to help you understand how well your video content is performing online. The plugin tracks events that occur in the player, aggregates it, and passes along the relevant information for tracking within Google Analytics.

Requirements

Setup

You will need to have the Google Analytics tracking code present on the page with the player for tracking to function. Google Analytics now offers two ways to track your data: traditional tracking and asynchronous tracking. While they both offer the same functionality, asynchronous tracking is currently recommended because it is less error prone and offers improved performance as compared to traditional tracking.

The examples below show how to setup and configure both the Google Analytics library as well as a player using the Google Analytics Pro plugin.

Asynchronous Tracking (Default)

This is the Google Analytics asynchronous tracking code. You will need to update the bolded section of the snippet to include your Google Analytics account ID. This is of the form UA-XXXXX-X.

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

This is sample player embed using the GAPro plugin. If you’ve already got a player running and would simply like to add GAPro, you’ll just need to copy the bolded section into your plugin configuration.

<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>

<div id="mediaplayer"></div>

<script type="text/javascript">
  jwplayer("mediaplayer").setup({
    "flashplayer": "player.swf",
    "width": "480",
    "height": "270",
    "file": "/videos/bunny.mp4",
    "image": "/thumbs/bunny.jpg",
    "plugins": {
      "gapro-2": {}
    }
  });
</script>

Using the Traditional Snippet

This is the traditional Google Analytics tracking code. You will need to update the bolded section of the snippet to include your Google Analytics account ID. This is of the form UA-XXXXX-X.

<script type="text/javascript">
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
  try{
    var pageTracker = _gat._getTracker("UA-xxxxxx-x");
    pageTracker._trackPageview();
  } catch(err) {}
</script>

This is sample player embed using the GAPro plugin. If you’ve already got a player running and would simply like to add GAPro, you’ll just need to copy the bolded section into your plugin configuration.

<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>

<div id="mediaplayer"></div>

<script type="text/javascript">
  jwplayer("mediaplayer").setup({
    "flashplayer": "player.swf",
    "width": "480",
    "height": "270",
    "file": "/videos/bunny.mp4",
    "image": "/thumbs/bunny.jpg",
    "plugins": {
      "gapro-2": {
        "trackingobject": pageTracker
      }
    }
  });
</script>

Configuration Options

The plugin’s configuration options allow you to control what data you send to Google Analytics.

We recommend that you enable tracking of as little as possible to ensure the best experience for your viewers.

Variable Description Default
gapro.trackingobject The Google Analytics tracking object, configured by default for asynchronous tracking mode. This will accept either Google Analytics tracking object (ie pageTracker) or a string representing the variable name (ie “_gaq”). Note that if you provide a string, it must be a globally accessible variable. "_ gaq "
gapro.trackstarts Controls whether data about video starts are sent to Google Analytics. One start event is sent each time a viewer begins playback from the first frame of the video.
Note – This include starts that occur after the viewer pressed stop, or completed the video and pressed play again.		 true
gapro.trackpercentage Controls whether data about the percentage of the total video content played by the viewer is sent to Google Analytics. true
gapro.tracktime Controls whether data about the total time the viewer spent watching the video is sent to Google Analytics. true
gapro.idstring Controls the string sent to Google Analytics to identify your video. May be set per playlist item or globally. You may use any property of a playlist (including custom properties in the JW namespace), surrounded by double pipes (e.g. - ||property||). See Configuration Options our a list of common playlist properties. '||streamer||/||file||'
gapro.hidden Controls whether any data tracking data is sent for a particular playlist item. Must be set as a playlist item property only. false

Sample Configurations

Tracking starts only

<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>

<div id="mediaplayer"></div>

<script type="text/javascript">
  jwplayer("mediaplayer").setup({
    "flashplayer": "player.swf",
    "width": "480",
    "height": "270",
    "file": "/videos/bunny.mp4",
    "image": "/thumbs/bunny.jpg",
    "plugins": {
      "gapro-2": {
        "trackstarts": true,
        "trackpercentage": false,
        "trackseconds": false
      }
    }
  });
</script>

Alternative ID string

<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>

<div id="mediaplayer"></div>

<script type="text/javascript">
  jwplayer("mediaplayer").setup({
    "flashplayer": "player.swf",
    "width": "480",
    "height": "270",
    "file": "/videos/bunny.mp4",
    "image": "/thumbs/bunny.jpg",
    "plugins": {
      "gapro-2": {
        "idstring": "||mediaid||-||title||"
      }
    }
  });
</script>

Hiding a Playlist Item from GAPro

<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>

<div id="mediaplayer"></div>

<script type="text/javascript">
  jwplayer("mediaplayer").setup({
    "flashplayer": "player.swf",
    "width": "480",
    "height": "270",
    "playlist": [
      {
        "file": "/videos/video.mp4",
        "image": "/thumbs/video.jpg",
        "gapro.hidden": true
      },
      {
        "file": "/videos/bunny.mp4",
        "image": "/thumbs/bunny.jpg"
      },
    ],
    "plugins": {
      "gapro-2": {}
    }
  });
</script>

Verifying Your Setup

Google often takes 24 hours to process analytics requests. This can make verifying an installation quite difficult and time consuming. Thus, we recommend using a web proxy like Charles or Firebug to verify your setup.

Once you have installed either one of these, open up your web browser and navigate to a web page containing a player that has been configured to use GAPro. Hit play and allow the video to play to completion (though you may want to seek towards the end of the video). When you look in the request log of your proxy, you should notice several new requests to http://www.google-analytics.com, including several that contain utme=5(Video Plays…) or utme=5(Percentage Played…) or utme=5(Seconds Played…). If you are unable to find any such request, or there are requests for data you do not wish to track, your player is improperly configured - please verify that your configuration matches on of the ones above.

If you still need assistance, please contact us on the Google Analytics Pro Support Forum.