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

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="" target="_blank" rel="noopener">Buy Now Securely On Amazon!</a>

<img class="gaClickTrack wp-image-3372 size-medium" src=".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??

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

• jquery
• javascript
• google-analytics

Share Improve this question asked Aug 28, 2018 at 10:19 chelderchelder 13777 bronze badges 9

• 1 Is the content (ie, the links) loaded regularly or via AJAX after the initial payload? Can you try jQuery(document).ready(function(){ jQuery('.gaClickTrack')... }); (aka wrapping your current code in .ready())? – kero Commented Aug 28, 2018 at 10:32
• You may find it easier to use Google Tag Manager to manage all the tracking. You would add just a short couple of code blocks to your site, then manage any jQuery/JS in GTM itself. It even has a preview mode so you can test whether it's working before you publish. – WebElaine Commented Aug 28, 2018 at 13:37
• @kero, after wrapping it, the console returns the error: Uncaught ReferenceError: ga is not defined. How can I know if the function ga actually exists or it's a code syntax problem? Thanks so much! – chelder Commented Aug 30, 2018 at 10:13
• @chelder Mhm that is difficult to say. Have you looked at GTM as WebElaine suggested? Would be a much smoother solution – kero Commented Aug 30, 2018 at 11:04
• @WebElaine I'm using the plugin WooCommerce Google Analytics Pro plugin. Support just answered they don't support Google Tag Manager yet. I'm trying to get a solution to use it together with that plugin anyway. – chelder Commented Aug 30, 2018 at 15:04

 |  Show 4 more comments

1 Answer 1

Sorted by: Reset to default 0

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