Track Elementor Forms with Google Tag Manager

Elementor forms #

If you’re using Wordpress, chances are you’ve chosen Elementor as your page builder. This tool allows you to create forms quickly and easily.

Forms created with Elementor are difficult to track with Google Tag Manager’s native triggers.

I’ll show you how to track only valid submissions of an Elementor form, and also how to retrieve user data (such as email address) for transmission to advertising platforms.

Install the Elementor Form listener #

To listen for valid Elementor form submissions, you need to add this code to Google Tag Manager with a custom HTML tag.

<script>
  window.dataLayer = window.dataLayer || [];
  var origin_open = XMLHttpRequest.prototype.open;
  var origin_send = XMLHttpRequest.prototype.send;
  var form_data = "";

  XMLHttpRequest.prototype.send = function(body) {
    form_data = Object.fromEntries(body);
    origin_send.apply(this, arguments);
  };

  XMLHttpRequest.prototype.open = function(method, url) {
    if(url.includes("admin-ajax.php")) {
        this.addEventListener('loadend', function(event) {
            var parameter_filter = ['form_id', 'form_fields'];
            if(JSON.parse(event.currentTarget.response).success) {
                for (key in form_data) {
                    if(!parameter_filter.some(function(prefix) { return key.startsWith(prefix) })) delete form_data[key];
                    if(!form_data[key]) delete form_data[key];
                }
                dataLayer.push({
                    event: "generate_lead",
                    form_data: form_data
                });
            }
        });
        origin_open.apply(this, arguments);
    }
  };
  /*
  * v0.1.0
  * Created by Data Marketing School at http://www.data-marketing-school.com
  * Written by https://www.linkedin.com/in/lucasrollin/
  */
</script>

Example of a valid form submission #

When a valid Elementor form is sent, the generate_lead event is sent to the Data Layer.

Create the corresponding Data Layer variables #

Form identifier #

Form fields #

Here you need to create a variable for each field in your form.

If you want to change the field names, you can do so in Elementor.

Going further #

You can pass on the user data collected via your Elementor form to advertising platforms to improve your performance:

• Google Ads Conversion Tracking with Google Tag Manager