Adding Google Analytics event to form submit

Question

I'm looking to add a Google Analytics event to a form that I can not access the inline html, so I can not add it as a onClick="" event straight to the html.

So my solution has been so far:

    $(function() {
  $(".form_submit input").on("click", function() {
    dataLayer.push({
      "event": "Kontakt",
      "eventCategory": "Submit",
      "eventAction": "Kirjuta meile",
      "eventLabel": "Kirjuta meile"
    });
  });
});

Althought this does not seem to work as clicking the submit button possibly stops all functions and refreshes the page.

How can I run the function before submit and then submit the form after? I've been suggested using preventDefault(); and the after calling the submit again with $('form').one('submit', ... but have been unable to implement this due to lack of skill.

View site: http://avrame.com/en (the form is at the bottom of the page)

Any suggestions appreciated.

Are you using Google tag manager? Your code seems to suggest do. Can you post screenshots of your associated tags and triggers? — nyuen, May 08 '17 at 13:23

score 2 · Answer 1 · edited May 23 '17 at 11:54

You can actually push functions to dataLayer, and it will be executed after the first event.

I would do

delegate the submit watch event to document level (see Jquery .on() submit event)
intercept the first submit, pushing event and preventing default behavior
and insert a function inside dataLayer, which submits the form again, but this time it won't be halted

The code:

window.submitGA = false;
$(function() {
  $(document).on('submit','.form_submit',function(event){
    if (!window.submitGA)
    {
      window.submitGA = true;
      dataLayer.push({
        "event": "Kontakt",
        "eventCategory": "Submit",
        "eventAction": "Kirjuta meile",
        "eventLabel": "Kirjuta meile"
      });
      dataLayer.push(function(){
        $('.form_submit').submit();
      });
      event.preventDefault();
    }
  });
});

Thanks for the reponse. I applied your code but unfortunately no events show up in GA. I added some console.logs to the code but these do not go through either. — user3615851, May 08 '17 at 13:18
Did you set up a universal analytics tag for `event:Kontakt`? — Viktor Tabori, May 08 '17 at 15:04

score 1 · Accepted Answer · answered May 29 '17 at 19:16

Working solution ended up using this callback method:

var form = document.getElementsByClassName('.footer__contact form');
form.addEventListener('submit', function(event) {

  event.preventDefault();

  setTimeout(submitForm, 1000);

  var formSubmitted = false;

  function submitForm() {
    if (!formSubmitted) {
      formSubmitted = true;
      form.submit();
    }
  }

  ga('send', 'event', 'submit', 'Saada', 'Kirjuta meile', {
    hitCallback: submitForm
  });
});

Reference from: https://developers.google.com/analytics/devguides/collection/analyticsjs/sending-hits#hitcallback

Adding Google Analytics event to form submit

2 Answers2