Send events to third-party systems (Web Player)
Various analytics system integrations.
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 aplugins../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>
Updated 4 months ago