Search code examples
javascriptjquerygoogle-analyticsevent-tracking

Analytics Tracking code targeting a button not sending events

I followed this tutorial to the dot: https://developers.google.com/analytics/devguides/collection/analyticsjs/events

I made a button, gave it an id of "button" and made sure I called the correct analytics code.

Here's what I have:

<form method="http://link_to_current_page">
    <input type="submit" id="button" value="Click Here Please">
</form>

I thought maybe the button needed to do more so I turned it into a form that refreshes the page and no dice.

In the Footer:

<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*newDate();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-XXXX-YY', 'auto'); // I have the correct tracking number here
ga('send', 'pageview');

</script>

Called to this .js file farther down in the footer:

jQuery(document).ready(function(e) {
   jQuery('#button').on('click', function() {
      ga('send', 'event', 'button', 'click', 'nav-buttons');
   }); 
});

While I'm browsing the page, Analytics knows I'm there via the Real-Time > Overview section, so I'm not sure what I'm missing.

Solution

  • Everything you have looks fine to me. To investigate further, you should use the debug version of analytics.js to figure if the hits are properly being sent to Google Analytics. https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced#debug

    You can also just inspect the network tab of your browser's web inspector, or if you use Chrome, you can try out the Google Anlaytics Debugger Chrome extension.