GTM Integration Guide for JW Player 7

Subscribe to our monthly newsletter to get the latest updates in your inbox

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, Code Fellows Student 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"] jwplayer GTM variable 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:
  1. 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...)
  1. Navigate to "Variables", then click "New"
    • Name: JWPlayer - DL - Video Name
    • Data Layer Variable: jwp_video_name
    • DL Version: 2
    • Save Variable
  2. 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.
  1. 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 Event Trigger 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:
  1. 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 Create HTML Tag to listen for JW Player events[/caption]
  1. Navigate to "Tags", then click "New"
    • Name: JWPlayer - Listener Setup
    • Choose Product: Custom HTML Tag
    • Configure Tag: [Copy this gist into the HTML editor]
    • Fire On: "More" > "JWPlayer - Window Loaded"
      • We created this trigger in step 3
    • Save Tag
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 Create GA Event Tag[/caption]
  1. 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!