Tracking MediaElement Clicks with jQuery

Support
#1

Greetings,

I recognize this may fall outside the scope of support here, but my question has to do with how X handles mediaElement.js, which may fall into this realm of support. I’ve been trying to get Google Analytics to fire an event every time someone clicks the Play/Pause button on my site (theegeneration.org).

Here is the code I input into the Global JS:

 jQuery(document).ready(function($) {
   //Tracking MediaElement Plays
   $('body').on('click', '.mejs-play', function() {
     ga('send', 'event', 'Audio', 'Play', 'Audio Played');
   });
   //Tracking MediaElement Pauses
   $('body').on('click', '.mejs-pause', function() {
     ga('send', 'event', 'Audio', 'Pause', 'Audio Paused');
   });
 });

Now, as far as I can tell, my code should work, but either my jQuery isn’t finding the on('click') for some reason or I am goofing up ga() function somehow.

Is there any insight you can offer me from the standpoint of X that may help me resolve this issue?

#2

Hi There,

Please try updating your code to this:

jQuery(document).ready(function($) {
	//Tracking MediaElement Plays
	$('.mejs-play').on('click touchend', function() {
		ga('send', 'event', 'Audio', 'Play', 'Audio Played');
	});
	//Tracking MediaElement Pauses
	$('.mejs-pause').on('click touchend', function() {
		ga('send', 'event', 'Audio', 'Pause', 'Audio Paused');
	});
});
#3

@thai

Thanks for the input. Oddly enough, I’m not sure if its working or not. I see in my realtime analytics someone from Germany is firing events, but I cannot fire them off in any of my browsers. Furthermore, I tweaked the ga() event parameters for testing purposes, but none of my test keywords are coming through. Ah!

What complicates things a little further is that I am also testing Google Tag Manager as well. I added some unique tags to the GTM tags so I can differentiate which is doing which.

#4

Hi there,

Maybe it’s your browser cache and on your end and the code loaded or outdated? Would you mind providing your browser’s developer console, I like to see if there is any visible error.

Thanks!

#5

I’m sorry, what am I providing? I use Safari or Chrome to access my dev console.

#6

Hi there,

Sorry, missing word. I mean browser’s developer console screenshot. Though I think I understand now, you can’t use that approach to handle the MediaElementsJs player for event tracking. Please note that X only utilize the Wordpress’s player and it happens to be the MediaElementsJs, there is no integration between the two but just mere styling to match the theme.

You may try this one instead,

jQuery('.mejs-video').bind('play', function(e) { 
   ga('send', 'event', 'Audio', 'Play', 'Audio Played');
});

jQuery('.mejs-video').bind('pause', function(e) { 
   ga('send', 'event', 'Audio', 'Pause', 'Audio Paused');
});

That’s based on standard MediaElementsJs but I’m not sure if the Wordpress’s built-in MediaElementJs library works in the same way.

Thanks!

#7

Thanks, but I think I figured this one out for myself. There were far more factors going on than I realized, both with the way Wordpress handles jQuery and with how my MonsterInsights plugin inserted the tracking code. I am going to try to summarize for anyone else who may be experiencing the same issues.

  1. MonsterInsights, my Google Analytics plugin of choice, while using the analytics.js universal tracking code, for some reason doesn’t by default use ga() to fire off events. Instead, it uses __gaTracker(). There is, however, a code snippet that can be added to the advanced settings of MonsterInsights that lets you use both ga() and gaTracker(). You can find that code snippet here.

  2. For some reason, Wordpress does not allow you to look up elements via jQuery using $(). Instead, you need to use jQuery() for every lookup. That explains why most of the code snippets I found online did not work as expected until I made this adjustment. And, to be clear, jQuery() must be used every time a lookup is performed within your code, not just at the beginning

  3. This biggest issue I was finding was that my lookup was not finding any part of the MEJS player code. This is because I was putting the code into the “Global JS” box in Customizer, which, apparently loads early enough to miss the MEJS script. Therefore, I had to load the script late. I used the Insert Headers and Footers plugin from the Wordpress repository to insert a <script> element with what is called “deferment”, which basically loads the script last. I used <script defer="defer"> to load the script into my header.

With all of that said and a few more tweaks to distinguish between Play and Pause, my final tracking code is this:

<script defer="defer">
//Tracking MediaElement Plays and Pauses
jQuery(window).load(function() {
  jQuery('.mejs-playpause-button').click(function() {
    if (jQuery(this).hasClass('mejs-play')) {
      ga('send', 'event', 'audio', 'play audio', 'audio played');
    } else {
      ga('send', 'event', 'audio', 'pause audio', 'audio paused');
    }
  });
});
</script>

You may want to make some notes on these things in your KB, especially regarding jQuery and the “script deferment” concept, for those who may be trying to use jQuery without success.

Now I just need to figure out how to track events for audio completions. Oh boy. :wink:

#8

Thanks for sharing your solution.

Have a great day!