Ajax request on a submit button? (for analytics - Event Tracking)

Question

I have an input button which has google analytics code (click detection) :

<input type="button" onclick="ga('send',...);"/>

This button is not submitting , and I do see the request to google's servers in the network panel.

enter image description here

The problem is when the button is a submit button :

<input type="submit" onclick="ga('send',...);"/>

enter image description here

It doesn't work , I know.

I could solve it via : jQ solution : ( for example)

e.preventDefault();
ga('send',...);
$(this).click();

But I'm not after the solutions. I'm after the reason why it's happening.

The obvious reason is that because the page redirects/posted.

But in the same breath I could do :

<input type="submit" onclick="for (var i=0;i<5;i++) console.log(i);"/>

The code works : ( just like I could write return false)

It displays the numbers and submit

enter image description here

I know that ajax is an async operation(should be) , but what happens internally that prevent the request from executing ? (as opposed to other js code)

notice : I don't care about the response. The request has a query string with data. google servers waits for this request with query string. ( google dashboard doesn't show any clicks being received)

(this question has come up after I was required to put click detection on certain buttons ( which some do submit) , and after checking , google doesn't say anything about those kind of buttons )

@NG. I'm using chrome , and the guy at the seo company uses FF. — Royi Namir, Mar 04 '14 at 14:49
Asynchronous methods don't lock the browser, so it redirects before the ajax call can be sent to Google. This is generally an issue with IE only, Chrome and Firefox are usually fast enough to send the request before redirecting, but I've only tested that with same origin ajax, not with Google Analytics — adeneo, Mar 04 '14 at 14:49
@adeneo even with cross domain ajax request , If I send a Get url request with param to other domain - - the server **can** read it , it's just the reponse wont be able to return to the client. ( but google intereted in the request's query string only.) [**proof**](http://i.stack.imgur.com/ZMXg3.jpg) — Royi Namir, Mar 04 '14 at 14:51
Not when clicking something that also redirects the page, then there's no guarantee that the ajax request will be made before the page redirects, but most browsers will still be fast enough to send the ajax request before the redirect, but there's still no guarantee that it will. — adeneo, Mar 04 '14 at 15:03
@adeneo does changing it to sync (not async) will solve it ? — Royi Namir, Mar 04 '14 at 15:06
I will but one test wont imply on the general case. I'll update. — Royi Namir, Mar 04 '14 at 15:11
[Here](http://stackoverflow.com/questions/9701734/how-to-execute-ajax-function-onbeforeunload) is someone who had a similar issue. Mind you, there event/redirect was being fired in the `onbeforeunload` event not an `onclick` event, but a redirect was still occurring nonetheless. Based on the answer, it looks like setting your AJAX call to be synchronous will work the majority of the time, but is not necessarily guaranteed to work. Just something to consider. — War10ck, Mar 04 '14 at 15:15

score 0 · Accepted Answer · answered Mar 06 '14 at 08:16

Not an Explanation( as I wanted) but a solution to the google analytic problem when submitting /redirecting :

Include this code at the bottom :

$("body").on('click', '[data-ga]', function (e)
{
    var _ = $(this);
    if (_.data('prevented') == 1)
    {
        _.removeData("prevented");
        return true;
    }

    e.preventDefault();
    _.data('prevented', 1);
    window.__gacb = function () { _[0].click(); };
    new Function(_.data('ga'))();
    return false;
});

And for any element which submits/redirects :

 <input type='submit'  data-ga="ga('send', 'Forms', { 'hitCallback':function (){window.__gacb()}});" />

google has this property hitCallback which is a callback , so I can trigger the click myself after recognizing it was prevented by me at the first time.

Ajax request on a submit button? (for analytics - Event Tracking)

1 Answers1