Unbounce Form Event Listener

Elevate your marketing data with the help of this event listener, designed to seamlessly capture successful UnBounce form submissions and track them as conversions in popular analytics platforms such as Google Analytics, Piwik Pro, Mixpanel, Facebook, Google Ads, and more. This functionality can be effortlessly implemented using Google Tag Manager, Piwik Pro Tag Manager, or your preferred Tag Management System (TMS).

How to track Unbounce Form Submissions with google tag manager

Using this Unbounce form event listener, Google Tag Manager, Piwik Pro, or your preferred tag management system (TMS), you can effortlessly track Unbounce form submissions as conversions. Simply copy the provided event listener code and paste it into a custom HTML tag in Google Tag Manager, ensuring it is triggered on pageview or DOM Ready.

A helpful tip: I recommend using the DOM Ready trigger.

Next, navigate to the triggers section to create a custom event trigger type [ub-form-success]. This trigger will enable you to fire your marketing tags or pixels, such as Google Analytics, Facebook Pixels, Google Ads, Mixpanel, Piwik Pro, and more.

It is crucial to ensure that your implementation is compliant with privacy regulations. In order to trigger your Unbounce form submission as a conversion for specific forms, you can utilize trigger conditions in Google Tag Manager. This allows you to record conversions selectively based on certain pages, form IDs, or user types.

Please note that an event is triggered before the Unbounce form is successfully submitted, and the event name associated with this is [unbounce-form-submission]. This event captures the form field data. If they are available, these are;

Email
Name
FirstName
LastName
PhoneNumber
Form ID

The event can be utilized in conjunction with the successful form submission event [ub-form-success] to enhance your data.

An additional tip: To access the data fields, create a dataLayer variable.

Credit: Code created by Richard Makara (RECONFIGURED CEO) – (we only made slight modifications to it)

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

dataLayer.push({
'event': 'unbounce-form-submission',
'form-id': formId,
'form-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 : ''
});
});

// This is used as a trigger for another tag to do your work BEFORE the datalayer gets cleared 
window.ub.hooks.afterFormSubmit.push(function() {
window.dataLayer.push({
'event': 'ub-form-success'
});
});
</script>