Google Analytics event tracking -Contact Form Submit

Home/Questions/Q 388
Next
In Process
Anonymous
  • 0
Asked: 2022-11-30T09:34:15+00:00 In:

Google Analytics event tracking -Contact Form Submit

  • 0

I am trying to track when a user clicks on the submit form button and they send contact information. I have this code on the contact page:

<input type="submit" value="Send" class="btn big btn_submit_form" onClick="ga('send', 'event', { eventCategory: 'Contact', eventAction: 'Information Request', eventLabel: 'Contact Form'});">

I am using Universal Analytics.

In my Google Analytics account, I have the goal description Name as Contact Form Submit, and the Goal Type is Event. The event conditions are as follows:

  • Category -Equals to- Contact
  • Action -Equals to- Information Request
  • Label -Equals to- Contact Form

with the Value field being left empty.

I have “Use the Event value as the Goal value for the conversion” set to yes.

However, Google Analytics doesn’t seem to be tracking the event. Any idea how to fix this?

Thanks.

googlegoogle analyticstracking
Leave an answer

Leave an answer

Browse

1 Answer

  1. Begginer

    The most likely problem here is that your page is being unloaded before the event hit has time to send. When you submit a form on a web page, most browsers will stop executing JavaScript and start loading whatever new page the form’s action attribute is pointing to.

    The general workaround for this is to call preventDefault on the form’s submit event, wait for the hit to successfully send to Google Analytics, and then manually re-trigger the form submit.

    Here’s how that might look (note: I’m using jQuery for simplicity):

    $('#my-form').on('submit', function(event) {
  // Prevent the browser's default form submission action.
  event.preventDefault();

  ga('send', 'event', {
    eventCategory: 'Contact',
    eventAction: 'Information Request',
    eventLabel: 'Contact Form',
    hitCallback: function() {
      $('my-form').trigger('submit');
    }
  });
});

    The key part in the above code is the hitCallback function, which gets invoked when GA returns success from the event hit beacon.

    • 0