Google Analytics Goals not getting tracked

Question

I realize that there's a plenty of questions about not working GA goal tracking. I did my homework and read lots of them before posting my question.

Here's my issue... This is the documentation that I used to create my code: https://developers.google.com/analytics/devguides/collection/analyticsjs/events

I am using the analytics.js version

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-xxxxxxxxxxx-x', 'mywebsite.com');
  ga('send', 'pageview');

</script>

I tried to implement the code via both pure javascript and jQuery but neither seems to work. Here's my code:

link to be tracked:

<a href="/contact-us-fivefive/" id="cta-footer-btn">Get In Touch Today</a>

jQuery approach:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>                             
<script type="text/javascript">
$(document).ready(function() {
$('#cta-footer-btn').on('click', function() {
ga('send', 'event', 'CTA_footer', 'contact_footer');
});
});
</script>

I also tried the pure js approach suggested:

<script>     
var downloadLink = document.getElementById('cta-footer-btn');
addListener(downloadLink, 'click', function() {
ga('send', 'event', 'CTA_footer', 'contact_footer');
});                                  
/**
* Utility to wrap the different behaviors between W3C-compliant browsers
* and IE when adding event handlers.
*
* @param {Object} element Object on which to attach the event listener.
* @param {string} type A string representing the event type to listen for
*     (e.g. load, click, etc.).
* @param {function()} callback The function that receives the notification.
*/

function addListener(element, type, callback) {
if (element.addEventListener) element.addEventListener(type, callback);
else if (element.attachEvent) element.attachEvent('on' + type, callback);
}
</script> 

Neither seems to be tracking the link clicks.

Any thoughts or suggestions why this is not working will be greatly appreciated.

Thanks!

Answer 1

Make sure you have the analytics tracking code inserted in the head section of the document (not necessary, but makes sure that the required library is fully loaded along with the ga object before making any references to ga() functions), and also make sure jQuery is also loaded before being used. You can use the console (usually F12 in browsers) to check for any error being thrown. These are are general steps to verify if you have tracking installed properly.

It might take a while before data starts showing up in reports if you have just installed, so don't worry. You can install the GADebug extension for Chrome to check if tracking beacons are sent properly.

Also, you can use the click() function from jQuery. It works fine for me.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js">
</script>                             
<script type="text/javascript">
$(document).ready(function() {
$('#cta-footer-btn').click( function() {
ga('send', 'event', 'CTA_footer', 'contact_footer');
});
});
</script>

Hope that helps! :)