Sending click events to Google Analytics in WordPress: the easy way

Question

I'm trying to setup a link tracking on WordPress. There are several links to the same site, they all share the same class:

<a class="gaClickTrack" href="https://www.amazon.es/Heromask-HeroMask-Aprende-idiomas-jugando/dp/B06XWHZ5Q4" target="_blank" rel="noopener">Buy Now Securely On Amazon!</a>

<img class="gaClickTrack wp-image-3372 size-medium" src="https://www.edinventa.com/wp-content/uploads/2018/07/buy-now-300x207.png" alt="Buy Now" width="300" height="207" />

We are using the plugin "Per page head", which allows you to add content into the section for a specific page, like custom JS or custom HTML. This is the custom code added:

<script>
jQuery('.gaClickTrack').on('click', function() {
    ga('send', 'event', 'button', 'click', 'amazon-button-clicked');
});
</script>

Note: if we use $ instead JQuery, it doesn't seem to work: the console returns an error.

We are using the Chrome extension Google Analytics Debugger, but either we don't know how to use it or it detects nothing.

I can see on Google Analytics - Real time - General Vision, that it detects there is someone on the page, but I don't see the click event anywhere (I guess it should appear on Real time - Events.

Where is our mistake??

Answer 1

This is working in my WordPress site. Remember we are using the plugin "Per page head", which allows you to add content into the section for a specific page, like custom JS or custom HTML. This is the custom code added:

<script>// <![CDATA[
jQuery(document).ready(function($){ 

$('.class-name-of-the-button').click(function() {  

  ga('send', 'event', {
    eventCategory: 'Outbound Link',
    eventAction: 'click',
    eventLabel: event.target.href,
    transport: 'beacon'
  });

});

});
// ]]></script>

Explanation:

• We must add a jQuery(document).ready(function($){ at the beginning
• Note: I think // <![CDATA[ and // ]]> are not actually needed
• As the button takes us to an external website, we should add eventLabel: event.target.href as it's explained here: https://developers.google.com/analytics/devguides/collection/analyticsjs/events
• Of course, we can change .class-name-of-the-button to and add to the button an ID like push me, so it would be $('#mybutton999').click(function() {
• transport: 'beacon' delays loading the external URL until it's send to Google Analytics. But it's not compatible with all internet browsers.
• Again, more information about eventCategory, eventAction, transport etc. here: https://developers.google.com/analytics/devguides/collection/analyticsjs/events

Finally, notice I have seen in real time in Google Analytics (on Real time - Events) when I have pushed the button to test it.