This is a guide to measure JW Player 7 events using Google Tag Manager. The guide includes JavaScript code and example configurations for GTM. If your website uses JW Player then you can use this guide to add analytics to your videos. This integration sends events from JW Player to Google Analytics using Google Tag Manager. Enjoy!
Shortcut: Download this link to an exported GTM container with JW Player integration. Simply import (merge, rename conflicts) the file into your desired GTM Container.
Introducing Guest Contributor: Greg Magdsick
[caption id="" align="alignleft" width="120"]
Greg Magdsick[/caption] Greg Magdsick, a father of three who grew up in Minnesota, recently finished an internship with Analytics Pros. He joined us during a break in semesters as part of the
Code Fellows Advanced Software Development program. We wanted to showcase one of the projects we assigned him during his short stay. The assignment was to develop a Google Tag Manager integration for JW Player 7. We pointed him to the
JW Player 7 JS API reference document and let him get to work. We will let Greg take it from here and show you what he came up with!
JW Player 7 Tracking Using Google Tag Manager
When JW Player updated their player to version 7, they updated their API. The new API is backwards compatible with version 6 but is considered deprecated. They recommend you update your API calls to the new standard. You can use this guide to accomplish this! This is a full tracking implementation using Google Tag Manager (GTM). It is set to track play, pause, completion and progress milestones and can easily be expanded to track anything else that the JW Player JavaScript API allows. This JavaScript used for this implementation was based off of the work
David Vallejo did for JW Player 6.
Step 1: Create a JavaScript Variable to Access "jwplayer" Object
[caption id="attachment_31722" align="alignright" width="274"]
Create New JS Variable[/caption] The "jwplayer" object is created by the JW Player code snippet and is part of their JS API. We access that object in GTM using the global JavaScript Variable:
Click on "Variables", then click "New"
Name: JWPlayer - JS - jwplayer Object
Choose Type: JavaScript Variable
Global Variable Name: jwplayer
Save Variable
Step 2: Create Data Layer Variables
We use the dataLayer object to store information about the videos. The object structure used in this guide includes player ID, video title, url, duration, etc... The GA tags will access this information using GTM Data Layer Variables. For this example, we'll create two variables to access the video title and the JWP7 event name (play, pause, mute, etc...)
Navigate to "Variables", then click "New"
Name: JWPlayer - DL - Video Name
Data Layer Variable: jwp_video_name
DL Version: 2
Save Variable
Create second variable:
Name: JWPlayer - DL - Interaction
Data Layer Variable: jwp_interaction
DL Version: 2
Save Variable
Step 3: Configure Triggers
Every GTM tag needs a "trigger". Our trigger evaluates when the "Window Load" event posts. At that time, the trigger checks for the existence of the "jwplayer" object. If true, fire the tag. If false, do nothing.
Navigate to "Triggers", then click "New"
Name: JWPlayer - Window Loaded
Choose Event: Page View
Configure Trigger: Window Loaded
Fire On: "JWPlayer - JS - jwplayer Object" > "does not equal" > "undefined"
We created this variable in step 1
Save Trigger
There are many JW Player events that will be pushed to the dataLayer. Our implementation includes major events like "play", "pause", and "seek", among others. You can extend the code to
cover additional API events as per your business requirements. [caption id="attachment_31735" align="alignright" width="300"]
Create Custom Event Trigger[/caption] Many of the API events can be grouped into a "playback" category. We'll use that to simplify the container setup by reducing the number of tags and triggers that need to be created. In this case, we'll create a trigger that uses reg-ex to match the dataLayer push:
Within the "Triggers" interface, click "New"
Name: JWPlayer - Playback Event
Choose Event: Custom Event
Fire On: ^playback-.* (use RegEx matching)
Save Trigger
Step 4: Create JWPlayer JS API Listener Tag
We will start with the "JWPlayer Listener" tag. This tag This tag is the glue that connects GTM to the JW Player JS API. [caption id="attachment_31740" align="alignright" width="300"]
Create HTML Tag to listen for JW Player events[/caption]
Feel free to extend the script with additional functions that meet your business requirements! To do this, you simply add API listeners to the "player" object based on the API reference document. This example shows how to implement the "adClick" listener event:
player.on('adClick', function (e) {
eventToDataLayer(this, 'ad-click', 'Ad Click');
});
Step 5: Create Google Analytics Event Tags
Finally, we create a Google Analytics tag that will record our video player events. This tag fires when "play", "pause" and "complete" conditions are true: [caption id="attachment_31744" align="alignright" width="300"]
Create GA Event Tag[/caption]
Within the "Tags" interface, click "New"
Name: JWPlayer - GA - Play, Pause, Complete
Choose Product: Google Analytics
Choose a Tag Type: Universal Analytics
Configure Tag:
Track Type: Event
Category: video player
Action:
Label:
We created this variable in step 2
Non-Interaction: True
Fire On: "More" > "JWPlayer - Playback Event"
We created this trigger in step 3
Save Tag
Conclusion
You now have a fully functioning JW Player 7 + GTM integration! If you wanted to save some key strokes:
Shortcut: Download this link to an exported GTM container with JW Player integration. Simply import (merge, rename conflicts) the file into your desired GTM Container. Leave your questions in the comment section below, thanks!