Configure Google Tag Manager to collect events from Whooshkaa's Web Player
Google Tag Manager (GTM) container installed on page
Google Analytics Universal Analytics PageView tag installed on the page via GTM
Whooshkaa Web Player on page using the Embed via JS method (iFrame embed method won't work)
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:
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 .
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
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
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.
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.
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:
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.
You can view interaction events in Google Analytics in two places:
Navigate to Real-time > Events and trigger a tracked event on the Whooshkaa Player. You should see your event in the Real-Time reports.
Navigate to Behavior > Events, you should see new events with your Event Category, Event Action and Event Label.
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:
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'.
In case you wanted to know....
💡 It typically takes 24 hours before event data is available in these reports