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
– nyuen, Commented May 8, 2017 at 13:23

Community · Accepted Answer · 2017-05-23 11:54:51Z

3

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();
    }
  });
});

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered May 8, 2017 at 10:27

Viktor Tabori

2,2071 gold badge15 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3615851 Over a year ago

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.

Viktor Tabori Over a year ago

Did you set up a universal analytics tag for event:Kontakt?

user3615851 · Accepted Answer · 2017-05-29 19:16:38Z

1

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

answered May 29, 2017 at 19:16

user3615851

9901 gold badge15 silver badges45 bronze badges

Collectives™ on Stack Overflow

Adding Google Analytics event to form submit

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related