Google Analytics Goal tracking in javascript/ajax

Question

I have a javascript/ajax based contact form on a website page. If people click to send the form, I want this click to be registered by Google Analytics. I created a goal for this, for some reason I cannot get it to work. Any help?

The code of the form is:

        <form id="footer_quick_contact_form" name="footer_quick_contact_form" class="quick-contact-form" action="includes/quickcontact.php" method="post">
          <div class="form-group">
            <input id="form_email" name="form_email" class="form-control" type="text" required="" placeholder="E-mail">
          </div>
          <div class="form-group">
            <textarea id="form_message" name="form_message" class="form-control" required placeholder="message" rows="3"></textarea>
          </div>
          <div class="form-group">
            <input id="form_botcheck" name="form_botcheck" class="form-control" type="hidden" value="" />
            <button type="submit" class="btn btn-default btn-transparent text-gray btn-xs btn-flat mt-0" data-loading-text="One moment please...." onClick="ga('send', 'event', { eventCategory: 'Contact', eventAction: 'ContactRequest'});">Verstuur nu!</button>
          </div>
        </form>

        <!-- Quick Contact Form Validation-->
        <script type="text/javascript">
          $("#footer_quick_contact_form").validate({
            submitHandler: function(form) {
              var form_btn = $(form).find('button[type="submit"]');
              var form_result_div = '#form-result';
              $(form_result_div).remove();
              form_btn.before('<div id="form-result" class="alert alert-success" role="alert" style="display: none;"></div>');
              var form_btn_old_msg = form_btn.html();
              form_btn.html(form_btn.prop('disabled', true).data("loading-text"));
              $(form).ajaxSubmit({
                dataType:  'json',
                success: function(data) {
                  if( data.status == 'true' ) {
                    $(form).find('.form-control').val('');
                  }
                  form_btn.prop('disabled', false).html(form_btn_old_msg);
                  $(form_result_div).html(data.message).fadeIn('slow');
                  setTimeout(function(){ $(form_result_div).fadeOut('slow') }, 6000);
                }
              });
            }
          });
        </script>

As you can see I added an on-click event to the send button. In google analytics I created a goal, by going to admin>goals>new goal>custom radio button>next. I gave the goal a name, selected the Event radio button and filled in the following fields:

Category: Contact Action: ContactRequest Label: Empty Value: Empty

I thought I'd have fixed it, but until now I can't track any results in GA. Any suggestions?

Answer 1

After reading your comment it would seem the problem is that you are using the wrong syntax in your click event handler.

You are calling the ga() function, which is a part of the Universal Analytics Code, which for some time now has been replaced by gtag.js.

I do not usually use gtag.js (I prefer to use Google Tag Manager), but according to the documentation the correct call would look like this:

gtag('event', 'contact_request', { // second parameter is event action
  'event_category': 'contact', 
  'event_label': '',
  'value': 0
});

(Actually you can leave out label and value if you do not need them).