Web Analytics

Google Tag Manager: Tracking of AJAX Forms

Web Analytics

If you want to track forms that are loaded and sent through AJAX, you will face two obstacles:

  1. You have to wait for the elements that are loaded through AJAX
  2. The default action of buttons and links is prevented

We show you how you can track such forms using Google Tag Manager with an example.

This example provides the four files subscription.php, ajax_form.php, success.php und jquery.form.min.js, which you can download as a ZIP file and copy to your web server.

The basis for this example is a simple page (subscription.php), that loads a form through AJAX (ajax_form.php).

Google Tag Manager Submission Form

By clicking on the “Submit” button the email field is analyzed and the default action of a click is prevented, e.g. through “return false” or “preventDefault()”. If the email address filled in is not valid, a note is displayed, otherwise success.php is displayed.

Google Tag Manager Submission Form with Warning

If you have a form listener or click listener fired on this page, they will not register a submission or click if the “Submit” button is clicked. If you are interested in tracking these clicks, you might want to try the following:

1) Create a tag

Name the tag (e.g. Subscription Click Handler) and select „Custom HTML Tag“ as the tag type.

Insert the following code in the HTML field (do not forget to switch the tracking ID to your ID):

function defer(method) {
if (window.$) {
$(method());
} else {
setTimeout(function() {
defer(method)
}, 50);
}
}

defer(function() {
$( document ).ajaxComplete(function() {
$('input#buttonToTrack').each(function(){
$(this).on('click.clicktracking', function(){
ga('create', 'UA-XXXXX-X');
ga('send', 'event', 'category-subscribe', 'action-subscribe', 'label-subscribe'); // signal GA that this is an event
});
});
});
});

Google Tag Manager Tag Creation

What this code does is waiting for the form to be loaded. As soon as it is loaded and a click on the “Submit” button takes place, an event is sent to Google Analytics. Of course you can customize the event category, action and label to your needs.

2) Create a new firing rule

If this tag should only fire on the subscription page, use these parameters

{{url}}                matches RegEx         .*subscription.php.*

Google Tag Manager Rule Creation

3) Link tag to firing rule

Now, you need to link the tag to the firing rule. Return to the tag created earlier and click on “Add” in the firing rules section in the top right. Select your firing rule.

Google Tag Manager Tag Linking to Firing Rule Google Tag Manager Add Firing Rule

4) Testing

To make sure your setup is working properly, publish your GTM container and trigger the event. Switch to Google Analytics Real-Time view to check if the event is tracked.

Google Tag Manager Testing With Real Time Event

If you are not feeling very comfortable with Google Tag Manager you might want to have a look at our detailed guide.

2 Comments

  1. Can this method also work for
    Can this method also work for GTM v2?

    I’ve tried it and it seems to fire an event on page load rather than on form submit

  2. Hi Izaak,

    Hi Izaak,

    GTM v2, as I’m sure you know, has a rather different approach to firing rules.  We haven’t yet adapted this method to v2, but we’ll post an update when we do.

Add a Comment

Your email address will not be published.

By clicking “Submit” you accept our Data Privacy Notice.