AJAX form submission and Google Analytics

Question

I am trying to track an AJAX form submission in Google Analytics. I have tried using the following code to create a page view in GA to track goals, however the page view is not tracking.

<script type="text/JavaScript">

$("#template-contactform").validate({
    submitHandler: function(form) {
        $('.form-process').fadeIn();
        $(form).ajaxSubmit({
            target: '#contact-form-result',
            success: function() {
                $('.form-process').fadeOut();
                $('#template-contactform').find('.sm-form-control').val('');
                $('#contact-form-result').attr('data-notify-msg', $('#contact-form-result').html()).html('');
                SEMICOLON.widget.notifications($('#contact-form-result'));
                ga('send', {
                    'hitType' : 'pageview',
                    'page' : '/contact-us-success' // Virtual page (aka, does not actually exist) that you can now track in GA Goals as a destination page.
                });
            }
        });
    }
});
</script>

UPDATE:

I have resolved this by using Event Tracking. I used the code below in the submit button and created a new goal tracking the event in GA.

onClick="ga('send', 'event', { eventCategory: 'Contact', eventAction: 'ContactRequest'});

try this ga('set', 'page', page); ga('send', 'pageview'); — Rohit Kishore
– Rohit Kishore, Commented Jun 14, 2016 at 12:43
@Ripwinder You should consider writing an answer based on your solution, if it truly has worked for you. — Michael Gaskill
– Michael Gaskill, Commented Jun 14, 2016 at 14:52

Ripwinder · Accepted Answer · 2016-06-16 16:51:26Z

2

I found the easiest solution for me was to include the below code in the submit button of my form:

onClick="ga('send', 'event', { eventCategory: 'Contact', eventAction: 'ContactRequest'});

In Google Analytics do the following:

Click on Admin. Under the View list, click on Goals Click on the New Goal button, click on the Custom radio button and then click on the Next step button. Name the goal and select the Event radio button. Populate all of the relevant goal details:

Category: Contact

Action: ContactRequest

Label: Optional

Value: Optional

Click the Create Goal button. You can now track form submissions in conversions.

Keep in mind this is tracking every click, so if you have mandatory fields and a user forgets and is prompted to complete the field, this will still register. For my use case its fine, but another solution would have to be sought if this is not the case for your forms.

answered Jun 16, 2016 at 16:51

Ripwinder

2103 silver badges11 bronze badges

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

1 Comment

Masiorama Over a year ago

Indeed as mentioned I dislike this solution cause every click is tracker... kinda useless imho.

natchkebiailia · Accepted Answer · 2016-06-14 13:03:59Z

-1

ga('send', 'pageview', {
  'page': '/contact-us-success',
  'hitCallback': function() {
     console.log('ga success')
  }
});

answered Jun 14, 2016 at 13:03

natchkebiailia

6314 silver badges18 bronze badges

Collectives™ on Stack Overflow

AJAX form submission and Google Analytics

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related