Unbounce Form GTM Event Listener

Unbounce Form

Overview

Unbounce is a landing page builder used heavily in PPC campaigns. It exposes two hooks: window.ub.hooks.beforeFormSubmit (fires before submission with full field data) and window.ub.hooks.afterFormSubmit (fires after confirmed success). This listener uses both hooks to push comprehensive lead data to the GTM dataLayer.

Events fired:

• unbounce-form-submission, fires before success with field data (email, name, phone)
• ub-form-success, fires after confirmed successful submission (use as conversion trigger)

Credit: Richard Makara (RECONFIGURED CEO)

Why Use This Listener

Two-event tracking is powerful:

1. unbounce-form-submission gives you field-level data (email, name) for Enhanced Conversions, even before the form fully processes
2. ub-form-success is the clean conversion trigger, fire your pixels here

Common Use Cases

• Track PPC landing page conversions
• Capture hashed email for Google Enhanced Conversions
• Fire Meta Lead event on form success
• Differentiate by form ID when multiple forms exist on a page

Installation

<!-- GTM Custom HTML Tag: Unbounce Form Listener -->
<script>
window.ub.hooks.beforeFormSubmit.push(function(args) {
  var email = args.formElement.querySelector('input#email');
  var name = args.formElement.querySelector('input#name');
  var firstName = args.formElement.querySelector('input#first_name');
  var lastName = args.formElement.querySelector('input#last_name');
  var phoneNumber = args.formElement.querySelector('input#phone_number');
  var formId = args.formElement.id;

  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    'event': 'unbounce-form-submission',
    'form-id': formId,
    'form-email': email ? email.value : '',
    'form-name-field': name ? name.value : '',
    'form-firstname-field': firstName ? firstName.value : '',
    'form-lastname-field': lastName ? lastName.value : '',
    'form-phonenumber-field': phoneNumber ? phoneNumber.value : ''
  });
});

window.ub.hooks.afterFormSubmit.push(function() {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    'event': 'ub-form-success'
  });
});
</script>

Fire on: DOM Ready.

Data Layer Output

Pre-Submit (Field Data)

{
  "event": "unbounce-form-submission",
  "form-id": "lp-form-1",
  "form-email": "lead@example.com",
  "form-name-field": "Jane Smith",
  "form-phonenumber-field": "+1234567890"
}

Post-Submit (Conversion Signal)

{
  "event": "ub-form-success"
}

Triggers to Create

Variables to Capture

GA4 Mapping

Debugging

Best Practices

1. Always use ub-form-success for conversion counting, pre-submit may have abandons
2. For privacy compliance, add consent conditions before the PII push
3. Input IDs (#email, #name) vary by Unbounce template, inspect and adjust

Related Listeners

• Instapage Form
• Webflow Form