How do I track events using Google Analytics on a SquareSpace Site?

Question

I'm trying to use Google Analytics to track button clicks on a site created using SquareSpace. The pageviews are working, but for some reason there are no real-time events showing up. Based on the advice from this post, I removed the UI tracking ID from the "external services" section and used the "Code Injection" option to paste the analytics.js JavaScript tracking snippet into the site header.

Here's an example of the relevant section of the site header (generalized to remove my specific tracking ID):

<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','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXXX-Y', 'auto', 'mycoTracker');

  ga(function() {
  // Logs the tracker created above to the console.
  console.log('GA Tracker:');
  console.log(ga.getAll());
  });

  ga('mycoTracker.send', 'pageview');
</script>

There are no glaring problems with ga object that's logged to console above.

I've tried two different ways of tracking events: jQuery and onclick.

1. Tracking events with jQuery:

When attempting to track a button click with jQuery, I added the following to the footer Code Injection section of SquareSpace:

$("#myco-pricing-select-plan-bttn").on('click', function(i) {
    console.log('pricing button clicked.');
    ga('mycoTracker.send', { 
      eventCategory: 'button press',
      eventAction:'click',
      eventLabel: 'core pricing selected',
      transport: 'beacon'});
  console.log('sent pricing button click event to ga.');
});

Note that I'm logging some info to console, so I know that it's being triggered properly. I also found this SO solution helpful, tested it out, and I successfully get the "Event Received" alert on the callback. However, there are no events showing up (in the "REAL-TIME -> Events" nor the "BEHAVIOR -> Events" sections) in Google Analytics. But again, "pageviews" are showing up in the REAL-TIME section just fine.

2. Tracking events with onclick:

I also tried tracking the events using the onclick option within the HTML tag that's described in this SO post. Here's what the HTML looks like:

  <div class="top-button">
    <a class="tracking-href" href="https://example.com/register?plan=1" target="_blank" onclick="ga('mycoTracker.send', 'event', 'Link', 'Click', 'example.com');">
      <button class="special" id="myco-pricing-select-plan-bttn">Select Plan</button>
    </a>
    <p>
      <br />
    </p>
  </div>

Neither option currently works for tracking events in Google Analytics.

Answer 1

FWIW, there were two separate problems preventing events from showing up in google analytics.

1. Someone turned on filtering in the advanced options to prevent events from our IP address from showing up in GA (this SO answer was helpful in finding that).

2. As nyuen commented above, the footer injected code was missing the "event" hitType. Here's the functional jQuery:

   $(".myco-pricing-select-plan-bttn").on('click', function(i) {
       ga('mycoTracker.send', {
       hitType: 'event',
       eventCategory: 'Select Plan Link',
       eventAction:'Click',
       eventLabel: this.id,
       transport: 'beacon'});
   });