Events not being tracked in new Google Analytics (analytics.js) setup

Question

I have a website that I am using the new Universal Analytics (analytics.js) to track. Everything is setup and working (pageviews, referrals, etc.) using the following code snippet:

<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-39570713-1', 'site.com');
  ga('send', 'pageview');

</script>

That is located before the </head> tag.

I am using JQuery to fire off an event. I tested the JQuery with an alert message and it is getting called, so that isn't the problem. Here is the snippet that fires when a button is clicked:

$('#submitButton').on('click', function() {
      ga('send', 'event', 'button', 'click', 'contact form');
    });

Nothing is appearing in the Events section of Analytics. I keep clicking the button, even from different computers just to make sure it isn't excluding my IP address. Because the Analytics doc that Google provides does not provide a whole lot of explanation I'm at a loss here.

Answer 1

If you are using Google Tag Manager and also want to trigger some events via code, ga('send'...) does not appear to be enough. You need to first fetch the appropriate analytics object:

if ("ga" in window) {
    tracker = ga.getAll()[0];
    if (tracker)
        tracker.send("event", "Test", "Test GA");
}

Note that this assumes you're only using a single Google Analytics Tracking code on your site. If you happen to be using multiple, you may need to fetch the appropriate one by name or index.