Send events to third-party systems (Web Player)

By default, JWP tracks only playback data with Google Analytics as an integrated solution. Other third-party analytics services that can be used with the Player JavaScript API. Provided that the third-party analytics service can send 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, JWP's API is capable of listening for specific changes, either initiated by a 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', 'JWP 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 JWP 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 JWP API equivalents:

Comscore Event	JWP 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:

Clone the JW Adobe Heartbeat plugin repository.
Add your Adobe credentials to scripts/AppMeasurement.js.
Add your Adobe credentials to scripts/VisitorAPI.js.
In the <head> of the page with your player, add VistorAPI.js, AppMeasurement.js, and VideoHearbear.min.js.
In the setup() for your player, define a plugins../scripts/JWHeartbeat.js object and set the values in the table below.

Parameter	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|false}
          }
        }
      });
    </script>
    ...
  </body>
</html>