Problem in GA Event Tracking on Form Submission

[joezhang]

Hi! I would like to track form submission as a GA event in analytics using the following script? It seems the event is not firing properly in GA as I don’t see the changes event tracking data getting collected:
ga(‘send’, ‘event’, ‘form-submission’, ‘submit’, ‘infosession-signup’);

code:

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="js.hsforms.net/forms/v2-legacy.js">
</script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({ 
    css: '',
    portalId: 'xxxxxxx',
    target: '#campus-visit > div',
    formId: '87f90fd9-38c1-4b93-8551-d68f9ac1b744',
    onFormReady($form,ctx){
        jQuery('#campus-visit').css({'max-width':'500px','margin':'0 auto'});
        jQuery('#campus-visit .hs-form-field > label').css('font-weight','bold');

       },
    onFormSubmit: function($form) {
                   ga('send', 'event', 'form-submission', 'submit', 'infosession-signup');
                   fbq('trackCustom', 'infosession-signup');
  }
  });
</script>

[derekcavaliero]

Good to hear you figured it out.

Regarding the proxy/trigger. You would need to do something like this:

dataLayer.push({
'event': 'Send Event',
'event_category': 'form-submission',
'event_action': 'submit',
'event_label': 'infosession-signup'
});

Theres a couple things here you would need to be aware of.

1. You need to have the dataLayer installed before your container code on every page. It would look something like this:
   <script>dataLayer = window.dataLayer || [];</script>
2. You’ll need to setup a custom event trigger inside GTM as well as create custom variables that grab your dataLayer category, action, and label values. Once you have those 2 things you can use them inside a standard GA event tag.

Hope that makes sense.

[derekcavaliero]

@joe.zhang

That looks like it should work without any issues. Have you checked the console to see if there are any JS errors during the submission?

Also, make sure that you don’t have Google Analytics installed using Google Tag Manager. If Google Analytics included in that manner you may need create a proxy trigger/tag using a dataLayer event push.

The other thing to try is to set the transport field to “beacon” (previously called useBeacon" to make sure the event isn’t cancelled if the form redirects after submission. You can read about that here:

https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#transport

[joezhang]

Thanks for the helpful reply @derekcavaliero !

Yes, I am using GA via Google Tag Manager. Could you share a little bit more about “creating a proxy trigger/tag using a datalayer event push”? Any documentations I can refer to?

Much appreciated!

[joezhang]

Looks like I have it resolved now. It’s indeed because I didn’t implement the tags and triggers in GTM properly. Thanks alot @derekcavaliero!