Using jQuery to track GA Events (universal)

Question

I am trying to track plays and pauses using jQuery on my Wordpress site that is using the mediaElement.js to handle audio players. I have researched this and found what I thought to be answers, but I can still not get the ga() function to fire!

My code is as follows:

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

I am not getting any response from the GA Realtime report when I click the elements with this class assigned to it.

Any idea what I am doing wrong?

Ok, I did find out one major issue that was definitely causing issues. I am using MonsterInsights (formerly Yoast) to inject the GA analytics.js into my site. However, for some odd reason, it changed the `ga()` variable to `__gaTracker()`. I found a site that gave me some simple code to add to allow the `ga()` variable to work (https://www.kathirvel.com/yoast-google-analytics-reassign-gatracker-to-ga/). However, I still cannot get my code to find `.mejs` from this function. — Bobby, Aug 11 '17 at 19:18

score 0 · Answer 1 · answered Aug 11 '17 at 05:41

0

There is something wrong with your jQuery implementation. When I type in console something like $(window), I see an error:

TypeError: $ is not a function

answered Aug 11 '17 at 05:41

Dmitry Sulman

126
7

1

Try using `jQuery(window)` instead of `$(window)`. I have no idea why, but the reference on my site is setup up that way instead. Seems that I'm not the only person where this is the case https://stackoverflow.com/questions/11242586/jquery-selectors-dont-work-in-console – Bobby Aug 11 '17 at 18:40
1

Upon further research, Wordpress, the CMS my site is built upon, uses `jQuery()` instead of `$()` as a sort of "Compatibility Mode" or "Safe Mode" to avoid conflicts with other JS libraries, apparently (see https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/). – Bobby Aug 11 '17 at 19:23

Bobby · Accepted Answer · 2017-08-14T11:33:39.503

Ok, I think I solved this for myself. Several factors were key to this particular situation:

Due to the oddities of the Wordpress.org CMS, I have to use jQuery() instead of $() for every lookup on my site — not just at the beginning of the code, but every time I need to do a lookup within my code. Makes for kind of bloated code, but it works!
My script was doing nothing with the MediaElement.js initially because it was being loaded before any of the MEJS elements were being created, and thus, they did not exist at the time of my JS code being fired. To resolve this, I found this defer trick that allowed me to queue up my <script> element at the end of the line. Simple, I had to call the script in my header using <script defer="defer">.
Once I got the base script functioning and firing results into my console, I used a simple if () {} else {} statement combined with .hasClass() to distinguish between a play and a pause.

The end result inserted into my site's header works beautifully! Here it is:

<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>

I hope this helps someone else track their plays and pauses.

Using jQuery to track GA Events (universal)

2 Answers2