Firing a google analytics event on form submit

Question

I'm trying to add analytics event tracking to an onclick event for a submit input on a form.

I've tried multiple different examples and referenced a couple of different SO posts to get to this point. I'm able to get the onclick to either submit the form OR fire the tracking event but not both.

First example: (Submits form + logs to console but doesn't fire event)

<!-- Analytics tracking code -->

<form action="test.php" id="form" method="post">

    <input type="text" name="name" id="name">

    <!-- Submits form + logs to console but doesn't fire event -->

    <input type="submit" name="submit" value="Submit" onclick="
        var _this = this; 
        _gaq.push(
            ['_trackEvent', 'Forms', 'Submit', 'Home Contact'], 
            function() {
                console.log('submitting'); 
                $(_this).parents('form').submit();
            }
        );
    ">

</form>

Second example: (Fires event + logs to console but doesn't submit form)

<!-- Analytics tracking code -->

<form action="test.php" id="form" method="post">

    <input type="text" name="name" id="name">

    <!-- Fires event + logs to console but doesn't submit form -->

    <input type="submit" name="submit" value="Submit" onclick="
        var _this = this;
        _gaq.push(['_set','hitCallback',function(){
            console.log('submitting');
            $(_this).parents('form').submit();
        }]);
        _gaq.push(
            ['_trackEvent','My category','My action']
        );
        return !window._gaq;
    ">

</form>

I've also found that if I add return false to the end of the first example's onclick event it will fire the analytics event tracking but not submit the form.

mike · Answer 1 · 2013-10-21T22:57:28.917

7

(This really needs to be a FAQ...)

Google Analytics records data by requesting an image from the analytics servers, with the tracking data as parameters on the image request. If a new page is rendered in the current window immediately after a _trackEvent or _pageView, the image request can be canceled, and no data recorded.

The usual pattern is to add a small delay before loading a new page or submitting a form.

Try

<input type="submit" name="submit" value="Submit" onclick="
  var _this = this; 
  _gaq.push(['_trackEvent', 'Forms', 'Submit', 'Home Contact']);
  setTimeout(function() {$(_this).parents('form').submit()}, 150);
  return false;"
>

My preference is bind to the jQuery submit event on the form itself, like

$('#form').submit(function(e){
  e.preventDefault();
  _gaq.push(['_trackEvent', 'Forms', 'Submit', 'Home Contact']);
  var form = this;
  setTimeout(function(){ form.submit()}, 150);
});

edited Oct 21 '13 at 22:57

answered Oct 21 '13 at 15:23

mike

7,137
2
23
27

I modified this to have a 1 sec timeout + added a missing [ in the analytics push code. The event tracking worked but the form was not submitted. – James Oct 21 '13 at 15:36
1

Sorry about the typo's (and missing delay on setTimeout!) -- only a short delay is needed, 150ms seems to work. I also added an alternative example. – mike Oct 21 '13 at 22:59
I still can't get this to work, both of these will fire the analytics event but neither will submit the form. I can't help but feel like I'm missing something obvious. – James Oct 22 '13 at 08:27

score 0 · Answer 2 · edited May 23 '17 at 11:59

0

It is possible with the new analytics.js (universal analytics).

Links:

Documentation
A question on Stack Overflow: google analytics send event callback function

edited May 23 '17 at 11:59

Community

1
1

answered Dec 19 '14 at 08:54

okrasz

3,866
24
15

Firing a google analytics event on form submit

2 Answers2

Linked