Analytics System Integrations

Last Updated: August 6, 2019

By default, JW Player tracks only playback data with Google Analytics as an integrated solution. However, there are many more potential analytics services that can be used with our API. Provided that your analytics service is capable of sending this information via Javascript, all API events can hypothetically be tracked and measured.


Listening for Events

A full introduction to our player's API can be found on our API Introduction page. In a nutshell, JW Player's API is capable of listening for specific changes, either initiated by user or by API, and then returning information about its use. A very basic example of detecting when a user initiates a mute would be:

jwplayer().on('mute', function(){
  // I would fire my mute tracker here!
  // What happens here would be dependent on your analytics product!
});

​For a full list of trackable player events grouped by category, please visit our API reference page.


Sending Events With Google Analytics

Now that you're able to determine that an event occurred on a page, a ping will need to be sent to an analytics platform for tracking. If your analytics platform of choice is Google Analytics, you'll need to initiate a send event. As mentioned in our previous article here, you'll need to make sure that you are implementing the new analytics.js on your page, rather than the older ga.js.

Let's assume that we have a single player on a page. If I would like track with our Google Analytics account when an error has occurred with our player (and the error itself), we can use the following code:

jwplayer().on('error', function(event) {
  ga('send', 'event', 'JW Player Events', 'Errors', event.message);
});

Once triggering an error state, we are able to check into our Google Analytics page and see our tracked event(Under realtime events). In this case, Errors will populate in the JW Player Events category, and the error itself will be listed under Actions. The exact error message will be listed under the Label section.

More information about tracking events with the above code can be found here in Google's own analytics documentation.


Sending Events With comScore

Much like a custom GA implementation, if you are utilizing comScore analytics, it is possible to create a setup similar to the above. The below table shows comScore events and their JW Player API equivalents:

Comscore Event JW Player API Event
StreamSenseEventType.BUFFER on('buffer');
StreamSenseEventType.PAUSE on('pause');
StreamSenseEventType.PLAY on('play');
StreamSenseEventType.END on('complete');
Fullscreen State getFullscreen();
Volume getVolume();
Media Position getPosition();
Video Source getPlaylistItem().file
Current Bitrate getQualityLevels()[getCurrentQuality()].bitrate


Sending events with Adobe Analytics

You can use the JW Adobe Heartbeat plugin to integrate Adobe Video Analytics with your player events.

Requirements

Before you add the JW Adobe Heartbeat plugin to your player, you need the following items:

  • Adobe credentials
  • Adobe Heartbeat tracking server domain
  • Adobe Heartbeat channel name
  • Adobe Heartbeat channel type
  • Page name

Implementation

Use the following steps to implement and configure this setup:

  1. Clone the JW Adobe Heartbeat plugin repository.
  2. Add your Adobe credentials to scripts/AppMeasurement.js.
  3. Add your Adobe credentials to scripts/VisitorAPI.js.
  4. In the <head> of the page with your player, add VistorAPI.js, AppMeasurement.js, and VideoHearbear.min.js.
  5. In the setup() for your player, define a plugins../scripts/JWHeartbeat.js object and set the values in the table below.
Parameter Type Description
adobeTrackingDomain String Adobe Heartbeat tracking server domain
channel String Adobe Heartbeat channel name
channelName String Adobe Heartbeat channel type
debug Boolean Enables debugging within the JWHeartbeat.js plugin
pageName String Page name


Full code sample

<html>
  <head>
    ...
    <!-- Adobe Heartbeat JS -->
    <script language="JavaScript" type="text/javascript" src="scripts/VistorAPI.js"></script>
    <script language="JavaScript" type="text/javascript" src="scripts/AppMeasurement.js"></script>
    <script language="JavaScript" type="text/javascript" src="scripts/VideoHeartbeat.min.js"></script>
    ...
  </head>

  <body>
    ...

    <div id="myElement"></div>

    <script type="text/JavaScript">
      jwplayer("myElement").setup({
        playlist: "https://cdn.jwplayer.com/v2/playlists/ttttYYYY",
        plugins: {
          ./scripts/JWHeartbeat.js: {
            // This is your Adobe HEARTBEAT tracking server domain
            adobeTrackingDomain: "{TRACKING SERVER DOMAIN}",
            // The following 3 parameters are sent through to the Adobe Analytics Servers
            channelName: "{CHANNEL NAME}",
            channel: "{TYPE OF CHANNEL}",
            pageName: "{PAGE NAME}",
            /*  Turns on debugging within the JWHeartbeat.js plugin to see debugging information on the developer console */
            debug: {true or false}
          }
        }
      });
    </script>
    ...
  </body>
</html>



Use this form to provide your feedback.