• Courses
    • Courses
    • Course bundles
  • Blog
  • Services
  • Resources
    • Youtube channel
    • E-books and Guides
    • GTM Recipes
    • View All Resources
    • GTM Community
    • GA4 community
  • About
    • About
    • Contact
  • Login
  • Courses
    • Courses
    • Course bundles
  • Blog
  • Services
  • Resources
    • Youtube channel
    • E-books and Guides
    • GTM Recipes
    • View All Resources
    • GTM Community
    • GA4 community
  • About
    • About
    • Contact
  • Login

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.

Note: this blog post teaches how to track events with Universal Analytics. If you want to get familiar with event tracking in Google Analytics 4, you can also refer to this blog post.

 

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:

AJAX Response - successful form submission

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

Response object of AJAX 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 Ebook Bundle

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

dlv - attributes.response.html

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.

Path to html

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:

DLV in ajaxComplet event

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.

Response object of AJAX response

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!

Two Caldera Forms Variables in Google Tag Manager

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.

Track Caldera Forms with Google Analytics and Google Tag Manager

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.

ezgif-2-933f1a8098

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
16 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
    • Dec 9 2018
    • Reply

    You can check this guide

Andrea
  • Mar 19 2019
  • Reply

Hi Julius, very intresting post and blog. I've implemented this solution to track form sumbission on my Caldera forms using attributes.response.form_name. The problem is that I have a script on every page of my website (i can't remove this script) that return an ajaxComplete every time a page load, so I have like a double form submission on my page. Do you have some suggestion?

    Julius Fedorovicius
    • Mar 20 2019
    • Reply

    But does every ajaxComplete event also contains attributes.response.form_name?

    If not, then just update your custom event trigger to fire when attributes.response.form_name matches something meaningful and don't worry about those ajax events on every page load.

Matthew Summers
  • Apr 8 2019
  • Reply

The agency I work for uses Caldera forms extensively, so this guide has been very helpful! One thing that I noticed was that on some sites, GTM only recorded real form submissions, and seemed to ignore spam submissions.

Any ideas on how that happens? I'm happy to keep spam submissions out of my analytics, but I would like to know where they're coming from - maybe figure out a way to block some of them!

    Julius Fedorovicius
    • Apr 9 2019
    • Reply

    Hey, this has nothing to do with the AJAX Listener. Your issue is probably caused by some settings in the form (however, I don't know which ones).

      Matthew Summers
      • Apr 9 2019
      • Reply

      Thanks! I'll take a closer look at the settings, see what I can find.

user
  • Jan 24 2020
  • Reply

I have such a question, why does the error appear, apparently the parameter 'url' does not want to work?

screenshot
https://drive.google.com/file/d/1rw__aldOtIR08-taJFRUmIyvGetHAUs8/view?usp=drivesdk

WESLEY
  • Aug 17 2020
  • Reply

Hello, Thank you for writing this article.
I've done everything you said step by step, but I cant see the reports on Behavior > Events > Pages in google analytics

Leave a comment Cancel reply

Your email address will not be published. Required fields are marked *

 

Hi, I'm Julius Fedorovicius and I'm here to help you learn Google Tag Manager and Google Analytics. Join thousands of other digital marketers and digital analysts in this exciting journey. Read more
Analytics Mania
  • Google Tag Manager Courses
  • Google Tag Manager Recipes
  • Google Tag Manager Resources
  • Google Tag Manager Community
  • Login to courses
Follow Analytics Mania
  • Subscribe to newsletter
  • RSS feed
Recent Posts
  • Google Analytics 4 User ID for cross-device tracking: how to configure it
  • 23 Key Benefits of Google Analytics 4
  • 10 Google Analytics 4 Mistakes in Configuration You Should Avoid
Analytics Mania - Google Tag Manager and Google Analytics Blog | Privacy Policy
Manage Cookie Settings