AJAX Form Tracking with Google Tag Manager

Being able to track your form submissions is a critical part of any online marketing campaign but it seems with Google Tag Manager v2.0, Google have made this important process as difficult to achieve as possible. Awful documentation really doesn’t help the situation and most online posts and topics are regarding an older version of Tag Manager so are impossible to follow.

AjaxForm and Google Tag Manager Quick Guide

First of all, you need to forget about the Form event type. Trying to get the Form event type to fire on an AJAX submission is difficult because of the very nature of AJAX – it interferes with a normal form submission. Most validation plugins are also going to cause an issue here.

So for this to work, we’re going to make our own custom event. In Tag Manager, create a new Trigger. Under type, select Custom Event. Give the event a name, and then add any conditional rules for your trigger.

Next you’ll need to create your tag. Select Google Analytics as Product, and Universal Analytics as Tag Type. Then configure your tag by specifying your Analytics Tracking ID in the Tracking ID box, and change track type to Event. You’ll need to enter at least the Category value, but you probably want to specify Action as well as possibly Label.

Under Fire On, add the Trigger you already created. Your Tag Manager side of the setup is now complete.

Next, log in to Google Analytics and click through to the Admin page for the property you’re working with. You now need to add a new Goal. The Goal Type should be set to Event, and the values of Category, Action and Label should match the values you specified when you created your tag.

Once your goal is saved, you’ll now need to add a line to your JavaScript form submit. You’ll want to add this line in the callback event so that it only fires on successful submission. This line of text sends your event through to Tag Manager.

<!-- HTML generated using hilite.me --><div style="background: #f8f8f8; overflow:auto;width:auto;padding:.8em .6em;"><pre style="margin: 0; line-height: 125%">dataLayer.push({<span style="color: #BA2121">&#39;event&#39;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&#39;eventname&#39;</span>, <span style="color: #BA2121">&#39;eventCategory&#39;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&#39;categoryname&#39;</span>, <span style="color: #BA2121">&#39;eventAction&#39;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&#39;actionname&#39;</span>});
</pre></div>

You should now be good to go – but remember to test through Tag Manager’s preview mode. If you have any trouble with this, or any suggestions, comment below and perhaps we can help.