January 2, 2018

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 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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

(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 submissions:

Enable Preview and Debug mode.
Refresh the web page with an embedded Caldera Form.
Try submitting the form (fill in all fields).
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.

Google Tag Manager Course for Beginners - Learn More

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.

Go to Variables
Scroll down to User-Defined variable and hit New
Click Variable configuration and choose variable type – Data Layer Variable
Enter Data Layer Variable Name – attributes.response.html , leave all other settings as they are.
My recommendation for 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.

Go to Triggers and click New
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.
Enter Event name – ajaxComplete
This trigger should fire on Some Custom Events.
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.

Go to Tags
Press New button
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.
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

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.
Fill it and submit. After a successful submission, Google Analytics Tag should be dispatched (it will be displayed in Preview and Debug mode).
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 Custom Trigger to it. If necessary, insert 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!

Julius Fedorovicius

In Form Tracking Google Tag Manager Tips

9 COMMENTS

Stephane

Feb 24 2018
Reply

Hello Juliius, Thanks a lot for this huge tutorial, worked like a charm for me. I'm really fond of Caldera Forms and I also use Google Tag Manager, and it was a pain that the form submitting was not recorded using the "classic" form submission tag. You really helped me there. Just one question though : would that method work when you implement a redirect after form submission (a thank you page for instance) ?

Julius Fed

Feb 25 2018
Reply

Hey, Stephane, not sure about that. If a visitor is redirected after the successful form submission, I'd rather use "Thank you page" tracking method. Unless, of course, Caldera form fires an event after the redirection. The best way to find out - try it yourself. I am not THAT big of a Caldera Forms expert.

Stéphane

Feb 26 2018
Reply

Hello Julius, Indeed, the "thank you page" tracking method works better. I'd still need to track caldera forms, as I also use them as email captation. Thank for for this great article, and thanks for the advice!

Mike

Mar 17 2018
Reply

This was a massively HUGE help....Thank you!! I have a couple forms on the same page and trying to track which one gets filled from what traffic was driving me crazy....almost to the point of giving up on Caldera. Thanks again!

44 Atlantique PC

Mar 18 2018
Reply

Thank You! It's working fine with my landing pages for tracking caldera submit forms ;) (I downloaded json Lunametrics container). Yann (France)

Lemme

Sep 19 2018
Reply

Hi! Awesome article, I have one question though. I want to make the Event into a Goal in Analytics. What do I add into the Action box in Analytics Goals. If the Action in GTM is set to {{Page URL}}, what should it be in Analytics.

Julius Fedorovicius

Sep 19 2018
Reply

When you use {{Pate URL}} as a variable, GTM passes the actual URL to Google Analytics, e.g. "https://www.example.com/contact-us". In that case, in GA goal settings you need to enter the actual URL that a visitor visited.

Paul

Dec 5 2018
Reply

Hi Julius, GTM triggers are working fine but I'm stuck on how to setup custom Google analytics goals for each of the tags/triggers I've created. Any tips on how do I correctly add the goal details? I think the labels are the ones that create the issue.

Julius Fedorovicius