Whooshkaa's Web Player features a series of JavaScript APIs that make interacting with it and collecting playback events easy. For more information on the Whooshkaa Web Player JavaScript API, please see this page.


In this guide, we will go through the process of configuring your Google Tag Manager instance to collect events from the Whooshkaa Web Player.


Prerequisites


Goals

We want to track common user interactions with the Whooshkaa Web Player in Google Analytics as Events.


In our Google Analytics Event reports we would like to see:


  • A new Event Category called "podcast" under which will sit: 

    • Event Actions describing the relevant interaction with the Whooshkaa player eg. "play", "pause"

    • Each individual Event should have an Event Label equal to the title of the media that was playing when the interaction occurred.



To achieve this we will use a combination of:

  • Whooshkaa Web Player Javascript API events and methods

  • Custom Javascript to listen to the above events and methods and trigger Google Tag Manager dataLayer events

  • Google Tag Manager dataLayer methods - in particular dataLayer.push() - to notify GTM when an event has happened

  • Google Analytics Universal Analytics "event" tags in Google Tag Manager to register Google Analytics Events.



Custom JS

In this step:

  • Get first instance of Whooshkaa player on page

  • Check for presence of GTM dataLayer array, if none create it

  • Listen for Whooshkaa JS API event "play"

  • Get the current playable object from player and extract title

  • Push event object to dataLayer array with appropriate values


$(document).ready( () => {
    // Get the first Whooshkaa player
    const player = whooshkaaPlayer.players[0]

    // Check for GTM dataLayer array or create one
    window.dataLayer = window.dataLayer || []

    // Listen for Whooshkaa 'play' event
    // Use getCurrentPlayable method to get title
    // Push event object to GTM dataLayer
    player.on('play', () => {
        player.getCurrentPlayable((current) => {
            let title = current.title
            window.dataLayer.push({
                'event' : 'whooshkaaPlayer',
                'eventCategory' : 'podcast',
                'eventAction' : 'play',
                'eventLabel' : title
            })
        })
    }

})



Once we have done this, GTM will be notified each time a play event happens, and we can access the object we pushed to the dataLayer from within Google Tag Manager and use it to trigger Google Analytics Events with appropriate values.


Google Tag Manager

In this step:


  • Create "Data Layer Variables" in GTM to store values pushed to the dataLayer object

  • Create Google Analytics Universal Analytics "Event" Tag

  • Trigger above Tag to run each time a "whooshkaaPlayer" event is pushed to the dataLayer by our custom JS


Create Variables


We'll start by creating some GTM Variables to pluck the values of eventCategory, eventAction and eventLabel from the object we push to the dataLayer.


In GTM navigate to Variables in the left hand navigation, then click "New" to create a new variable.


Give your variable a sensible name, I suggest "DLV - eventCategory".


Click the Variable Configuration section and select "Data Layer Variable" as the type.



Returning to the config screen, set the Data Layer Variable Name to 'eventCategory'. Note, this must match the key from the object you push to the dataLayer in your Custom JS.



Leave all other values as default and Save.


Repeat this for eventAction and eventLabel.


Create Google Analytics Event Tag


Now we'll create a Google Analytics Event Tag to take the data from the data layer variables we just created and use them when we register an Event in Google Analytics.


Navigate to Tags in the left hand navigation menu.


Create a new Tag of type Google Analytics: Universal Analytics.


Set Track Type to "Event"



Then set the following fields accordingly.


Event Tracking Parameters


For each of these click the Variables icon next to the field and select the matching Data Layer Variable we created above.


Category: {{DLV - eventCategory}}

Action: {{DLV - eventAction}}

Label: {{DLV - eventLabel}}

Value: leave this blank


Non-Interaction Hit: False (you can read more on what this means here).


Google Analytics Settings: The UA of the Google Analytics property you want to register Events in. This should already be stored in a GTM Variable if you have Google Analytics set up. If not, create a new Variable and give it a value of the UA of your desired Google Analytics property.


Leave everything else as defaults.



Triggering


We only want GTM to run this tag and register an Event in Google Analytics when a whooshkaaPlayer event is pushed to the dataLayer by our custom JS code.


Create a new Trigger with a trigger type of "Custom Event".



Set the fields to the following:



Event Name


whooshkaaPlayer (this matches the event key in our dataLayer object).


This trigger fires on:


All Custom Events


NB: If you wish to specify additional conditions, for example only running this tag on your production domain (rather than staging or development) change this to "Some Custom Events" and use the fields provided to specify additional conditions.


Save your new Google Analytics tag and deploy your GTM Container.


Google Analytics


You can view interaction events in Google Analytics in two places.


Real-Time Reports


Navigate to Real-time > Events and trigger a tracked event on the Whooshkaa Player. You should see your event in the Real-Time reports.


Events


Navigate to Behavior > Events, you should see new events with your Event Category, Event Action and Event Label.


Note: It typically takes 24 hours before event data is available in these reports.


Tracking Other Interactions

Tracking additional interactions with the Whooshkaa Web Player is simple now that we've done the groundwork.


To track "pauses" for example, we can make some minor tweaks to our custom code:

$(document).ready( () => {
    // Get the first Whooshkaa player
    var player = whooshkaaPlayer.players[0]
    // Check for GTM dataLayer array or create one
    window.dataLayer = window.dataLayer || []
    // Listen for Whooshkaa 'play' event
// Use getCurrentPlayable method to get title
// Push event object to GTM dataLayer
    player.on('play', () => {
        // ...
    })
    // Listen for Whooshkaa 'pause' event
    player.on('pause', () => {
        player.getCurrentPlayable((current) => {
            let title = current.title
            window.dataLayer.push({
                'event' : 'whooshkaaPlayer',
                'eventCategory' : 'podcast',
                'eventAction' : 'pause',
                'eventLabel' : title
            })
        })
    }
})


Only a new event handler for the 'pause' event has been added -- all else remains the same except the value of eventAction in our dataLayer object, which has been changed to 'pause'.