Track Caldera Forms with Google Tag Manager

Caldera Forms is a drag and drop, responsive form builder tailored for WordPress. Just like (almost) any other forms, Caldera can be tracked with Google Tag Manager (GTM) and in this blog post, I’ll show you how to do that.

The context

In one of my “Best-selling” blog posts, How to Track Forms with Google Tag Manager, I’ve listed a bunch of techniques you can choose from. If you’re new to the form tracking with GTM, here’s a quick tour.

There’s a s**tload of different forms. Some of them refresh after a successful submission, some of them don’t, some of them might redirect you to a “thank you” page, etc. The main problem with form tracking is that there are no global standards on how forms must be developed. Some developers may prefer one technology (e.g. AJAX) over another – and they have a full right to do so.

In the aforementioned guide, how to track forms with GTM, I’ve listed a workflow which helps you choose the correct form tracking method. In Caldera’s case, I’ll save you some time and give you a hint, you should use AJAX form tracking.

AJAX listener

You are probably already familiar with the main Google Tag Manager concept: every interaction you want to track needs a tag and a trigger. If you want to track form submissions with Google Analytics, you’ll need to create a Universal Analytics Tag and a Trigger (rule) when that tag must fire.

Creating a tag is the easy part of this process and we’ll do that later. First, let’s see how can we distinguish a successful Caldera Form submission.

Lunametrics have published a code of an awesome AJAX listener that everyone can use for free. It listens to all AJAX events on a website and pushes them to the Data Layer. What does it mean? Well, whenever a form is submitted successfully, we will be able to catch its AJAX response and turn it into a trigger.

Here’s the code of AJAX listener. Copy it and paste into a Custom HTML tag in Google Tag Manager.

<script id="gtm-jq-ajax-listen" type="text/javascript">
 (function() {

 'use strict';
 var $;
 var n = 0;
 init();

 function init(n) {

 // Ensure jQuery is available before anything
 if (typeof jQuery !== 'undefined') {
 
 // Define our $ shortcut locally
 $ = jQuery;
 bindToAjax();

 // Check for up to 10 seconds
 } else if (n < 20) {
 
 n++;
 setTimeout(init, 500);

 }

 }

 function bindToAjax() {

 $(document).bind('ajaxComplete', function(evt, jqXhr, opts) {

 // Create a fake a element for magically simple URL parsing
 var fullUrl = document.createElement('a');
 fullUrl.href = opts.url;

 // IE9+ strips the leading slash from a.pathname because who wants to get home on time Friday anyways
 var pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname;
 // Manually remove the leading question mark, if there is one
 var queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search;
 // Turn our params and headers into objects for easier reference
 var queryParameters = objMap(queryString, '&', '=', true);
 var headers = objMap(jqXhr.getAllResponseHeaders(), '\n', ':');

 // Blindly push to the dataLayer because this fires within GTM
 dataLayer.push({
 'event': 'ajaxComplete',
 'attributes': {
 // Return empty strings to prevent accidental inheritance of old data
 'type': opts.type || '',
 'url': fullUrl.href || '',
 'queryParameters': queryParameters,
 'pathname': pathname || '',
 'hostname': fullUrl.hostname || '',
 'protocol': fullUrl.protocol || '',
 'fragment': fullUrl.hash || '',
 'statusCode': jqXhr.status || '',
 'statusText': jqXhr.statusText || '',
 'headers': headers,
 'timestamp': evt.timeStamp || '',
 'contentType': opts.contentType || '',
 // Defer to jQuery's handling of the response
 'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '')
 }
 });

 });

 }

 function objMap(data, delim, spl, decode) {

 var obj = {};

 // If one of our parameters is missing, return an empty object
 if (!data || !delim || !spl) {

 return {};

 }

 var arr = data.split(delim);
 var i;

 if (arr) {

 for (i = 0; i < arr.length; i++) {

 // If the decode flag is present, URL decode the set
 var item = decode ? decodeURIComponent(arr[i]) : arr[i];
 var pair = item.split(spl);

 var key = trim_(pair[0]);
 var value = trim_(pair[1]);

 if (key && value) {

 obj[key] = value;

 }

 }

 }

 return obj;

 }

 // Basic .trim() polyfill
 function trim_(str) {

 if (str) {

 return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');

 }

 }


 })();
 /*
 * v0.1.0
 * Created by the Google Analytics consultants at http://www.lunametrics.com
 * Written by @notdanwilkerson
 * Documentation: http://www.lunametrics.com/blog/2015/08/27/ajax-event-listener-google-tag-manager/
 * Licensed under the Creative Commons 4.0 Attribution Public License
 */
</script>

After you installed the AJAX listener via Custom HTML Tag, check whether it’s recognizing AJAX responses made by a Caldera Form submission:

1. Enable Preview and Debug mode.
2. Refresh the web page with an embedded Caldera Form.
3. Try submitting the form (fill in all fields).
4. Did the ajaxComplete event appear in the Preview and Debug console? It should be. If not, try using other form tracking techniques mentioned in this blog post.

In Preview and Debug mode, click the latest ajaxComplete event which occurred after you submitted the form, then navigate to the Data Layer tab:

Looks difficult for a non-developer, right? But it’s easier than you think. This is the data that was passed to the Data Layer after a successful form submission, each line is a separate dataLayer data point which can be used as a dataLayer variable in GTM. You should be looking for something which helps identify successful form submission. Scroll down and look for “response”.

Let’s take a closer look at it. Can you see the message Thanks for Contacting Us? Bingo! We can use it as a variable in a trigger. P.S. Keep in mind that the text might be different in your case.

Create a variable and trigger

By default, Google Tag Manager does not recognize the data in the Data Layer, meaning, that you cannot use it as variables until you actually create a variable. Let’s do that.

1. Go to Variables
2. Scroll down to User-Defined  variable and hit New
3. Click Variable configuration and choose variable type – Data Layer Variable
4. Enter Data Layer Variable Name – attributes.response.html , leave all other settings as they are.
5. My recommendation for the title of this GTM variable is dlv – attributes.response.html (“dlv” stands for Data Layer Variable).

You’re probably guessing why I entered attributes.response.html as Data Layer Variable Name. Let’s take a closer look at the Data Layer in Preview and Debug mode. In line 2, you can see the event name, ajaxComplete, that’s the same name which appears in Preview and Debug console’s left side. Then, in line 3, we see attributes which is an object with various data points (response is one of them).

If we go one level deeper, we’ll see that response also contains another object with even more attributes, such as data, html, type, etc.

So when we want to tell Google Tag Manager that we are interested in html attribute’s value, we need to tell the exact path to that data. In our case, it’s attributes → response → html. Each level of the path must be separated with a dot → attributes.response.html. Another example: let’s say you’re interested in Server data (from that very exact AJAX response). In that case, Data Layer Variable’s Name should be attributes.headers.server .

After we created an attributes.response.html Data Layer variable in Google Tag Manager, let’s debug. Refresh Preview and Debug mode and refresh the page where the Caldera Form is embedded. Fill it and submit. Click the most recent ajaxComplete event in Preview and Debug console, then navigate to Variables tab and find your new variable dlv – attributes.response.html. If you did everything correctly, it should look like this:

Ignore the style of that value, it might look different in your case. Since the html attribute contains an actual HTML code, it might look goofy in the Preview and Debug mode. But that is not a problem for us, we just want to track the form, right?

Let’s go back to the value of the attributes.response.html variable. It contains a success message of a submitted form. If the value of that variable is undefined, then you should start looking for mistakes. Most common ones are typos in the variable name or inaccurately defined variable’s path. Some guys just try using response instead of attributes.response. If you’re still facing issues, read the guide How To Access Data In The Data Layer.

Now let’s create a trigger which fires when the event is ajaxComplete AND our new dataLayer variable contains text The message has been successfully sent.

1. Go to Triggers and click New
2. Choose Trigger Type – Custom Event. If you’re new to this, Custom event = Data Layer event. Lunametrics’ AJAX listener creates a Data Layer event (via dataLayer.push method) each time an AJAX request is made.
3. Enter Event name – ajaxComplete
4. This trigger should fire on Some Custom Events.
5. Define a condition when the trigger will fire – dlv – attributes.response.html contains Thanks for Contacting Us.

Additional variables (optional)

What I really liked about Caldera forms, is that they return more data about the form with their AJAX responses. Let’s go back to the GTM Preview and Debug mode and check that AJAX response data one more time.

See anything useful? What about form_id and form_name? Why don’t we pass them to Google Analytics as well? Another reason why this data is useful is multiple forms on one page.

If you have two or more Caldera Forms on one page, you might want to distinguish them. How can we do that? By creating more Data Layer Variables, of course!

Okay, the hardest part is complete. Let’s move to the final step.

Track Caldera Form submissions with Google Analytics

Let’s do a quick checkpoint. So far, we’ve created a trigger which fires only when Caldera Form is successfully submitted. Also, we’ve set several variables which will pull the data from the response of a successfully submitted form. Those variables will be useful in Universal Analytics tag.

1. Go to Tags
2. Press New button
3. In Tag Configuration choose Universal Analytics:
   1. Track Type – Event
   2. Event Category – Form submission (feel free to choose another appropriate title)
   3. Event Action – {{Page URL}}.
   4. Event Label – Form – {{dlv – attributes.response.form_id}}: {{dlv – attributes.response.form_name}} (that’s a long value, right? Bear with me.
   5. Assign Google Analytics Settings Variable (which contains tracking ID, e.g. UA-XXXXXX-XX).
   6. Leave other fields as they are.
4. Assign the trigger you’ve created in the previous chapter of this blog post.

So what happens after the form is successfully submitted? Google Tag Manager will dispatch a Google Analytics event which contains the following data (variables will be dynamically replaced with the actual form data):

• Event category: Form Submission
• Event action: /pages/contact-us/
• Event label: Form CF580fcfe0035ec: General Contact

Don’t forget to test

1. After you’ve completed all steps described in this guide, open (or refresh) a Preview and Debug mode, refresh a web page with a Caldera Form you want to track.
2. Fill it and submit. After successful submission, Google Analytics Tag should be dispatched (it will be displayed in Preview and Debug mode).
3. Also, check Google Analytics Real-time event reports.

How to track Caldera Forms with Google Tag Manager

Another form tracking guide has come to an end. In this blog post, I’ve explained how you can track Caldera forms with Google Tag Manager. AJAX, as a technology, is very popular among form developers, and Caldera Forms is no exception.

Here’s the summary of the process you need to follow in order to track AJAX responses of Caldera Forms:

• Install AJAX listener in Google Tag Manager (via Custom HTML tag).
• Find a way to identify a successful form submission by checking the response data.
• Create Data Layer variable(s) and a Custom Trigger.
• Create Universal Analytics Tag, assign a Custom Trigger to it. If necessary, insert the previously created Data Layer Variable(s).
• Test test test.
• Sit back and relax for a moment.

Did I miss anything regarding how to track Caldera forms with Google Tag Manager? Let me know in the comments!