Google Analytics form submit event tracking

Question

I have a form that submits to another domain I do not own and need to track the event in Google Analytics. I'd rather do it without jQuery to avoid a dependency but I'm failing to understand why this code doesn't work:

<form action='example.com/search' onsubmit='trackSubmit()' id='frm'>
    <button type='submit'>Search</button>
</form>

<script type='text/javascript'>
function trackSubmit(e) { 

  var bForm = document.getElementById('frm');

    bForm.addEventListener('submit', function(e){
    e.preventDefault();
    _gaq.push('_trackEvent', 'Foobar', 'Foobar Form Submit');
    setTimeout(function(){

        console.log('tracking foobar');
        bForm.submit();

    }, 1000);
  }, false);

}
</script>

score 4 · Answer 1 · answered Apr 18 '13 at 20:26

4

onsubmit='trackSubmit()' and bForm.addEventListener('submit', function(e){

This seems to be the wrong part. If you call trackSubmit() on submit, then adding a listener inside this function is useless, it doesn't even fire. I believe it should be just:

<form action="http://example.com/search" onsubmit="return trackSubmit()" id="frm">
    <button type="submit">Search</button>
</form>

<script type="text/javascript">
function trackSubmit() {
    var frm = document.getElementById('frm');

    _gaq.push('_trackEvent', 'Foobar', 'Foobar Form Submit');
    setTimeout(function(){

        console.log('tracking foobar');
        frm.submit();

    }, 1000);

    return false;

}
</script>

answered Apr 18 '13 at 20:26

Jakub Kotrs

5,823
1
14
30

1

Thanks Jakub, it looks ok, but I still cannot see the event being registered in Google Analytics. Not sure if there's some kind of delay before it shows up. – Lorenzo Apr 18 '13 at 20:44
Check out [Other question](http://stackoverflow.com/questions/4086587/track-event-in-google-analytics-upon-clicking-form-submit?rq=1), there is an answer with GA native callback function to avoid setTimeout practice, which might be the problem. Also, speaking from my own experience, did you check today's stats? :D – Jakub Kotrs Apr 18 '13 at 22:01

score 1 · Answer 2 · answered Oct 24 '13 at 10:56

This will be reusable for multiple submission tracking.

<script type="text/javascript">
    function trackSubmissions(form, category, name, value) {
        try {
            _gaq.push(['_trackEvent', category, name, value]);
        } catch(err){}
        setTimeout(function() {
            form.submit();
        }, 100);
    }
</script>

<form onsubmit="trackSubmissions(this, 'category', 'name', 'value'); return false;">
</form>

score 0 · Answer 3 · answered Apr 30 '14 at 18:27

For the users who have stumbled to this question and are using new version of google universal analytics. This is the code for submit button and link click

<script type='text/javascript'>
        function trackSubmit() { 


        ga('send', 'event', 'button', 'click', 'searchsubmit', 4);
          alert('testing send event')
        }

        function trackClick() { 
            ga('send', 'event', 'button', 'click', 'This is coool');
        }
    </script>

    <body>
    Pushing data.......

        <form onsubmit='trackSubmit()' id='frm'>
            <button type='submit' id= 'searchsubmit'>Search</button>

            </br>
            <a href='http://cool.com' onclick="trackClick(); return false;">cool</a>
        </form>

    </body>

I have put an alert to display that the events are being fired because when the page submits and you will look at console in debugger, your event will not be visible.

enter image description here

Google Analytics form submit event tracking

3 Answers3