Logging Podcast Player Usage With Google Analytics

Posted on Thursday, October 12, 2017 11:00 AM by K. Latham

I learned a new Google Analytics trick this week to see how many people are using the Blog Oklahoma Podcast's audio player. I'm typing this post up quickly to save my notes, but I thought it might be useful to share with you too. So please ignore any bad grammar. Ha. The code will likely change over time as I improve things, but this should be a good starting point.

This is the HTML5 audio player I'm using for the Blog Oklahoma Podcast. It's simple and flexible enough for my needs: https://codepen.io/davatron5000/pen/uqktG

Using Google Analytics I can get some really useful statistics when someone visits the page, but it doesn't show me when someone listened to the podcast using the page's player.

After some digging though Analytics' documentation for another project, I found you can track events. So now I can track whenever someone clicks the play button.

This guide explains how to implement event tracking with Google's analytics.js: https://developers.google.com/analytics/devguides/collection/analyticsjs/events

ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);

  • eventCategory: (required) Typically the object that was interacted with (e.g. 'Video')
  • eventAction: (required) The type of interaction (e.g. 'play')
  • eventLabel: Useful for categorizing events (e.g. 'Fall Campaign')
  • eventValue: A numeric value associated with the event (e.g. 42)
  • fieldsObject: Convenience parameter (see documentation for more info)

All I had to do was add one line of code to the play.addEventListener function:

ga('send', 'event', 'Player', 'play', player.getAttribute('data-title'));

The attribute 'data-title' in my code above is the title of the podcast being played and I'm using this as the eventLabel. I added that attribute to the player's div: class="pcast-player" data-title="title here"

I could have used anything for eventLabel, I just went with the podcast title for readability. I almost used record # because it was smaller. (I'm such a data geek).

To view these events at Google Analytics go to this report: Behavior > Events > Top Events.

You'll need to click a few times to see the details. First you'll see the event category listed (Player). Click on that to see the event action (play). Then click on that to see the event label. In my case that will tell me which podcast was listened to.

I'm sure there are other ways or custom reports to get this information out of Google Analytics, but this report works for me for now.

I just made this change this morning, so I'll come back to this post in a few days to share a screen shot of the report.

For another project I added onclick="ga(...)" to a link to log its clicks (target _blank was set on that link too).

Update: Here's that screenshot I promised. So we had 2 play clicks over the weekend. (More play clicks happen when new episodes are out - speaking of which I better get to that. Ha.)