Tracking Unbounce Form Submissions with Google Tag Manager

Unbounce is one of the most commonly used landing page builders for teams across the globe, and for good reason. If you are working with Unbounce, in this tutorial will walk through how you can track successful form submissions using Google Tag Manager and send that data to Google Analytics 4, Google Ads or any other destination.

Prerequisites

Before we get into the nitty gritty, make sure you have an active Unbounce account, and deployed Google Tag Manager container. Familiarity with JavaScript will be a plus for this tutorial. Following the instructions in this tutorial will get you will successfully track form submissions, however if you need to do any changes, knowledge of web development is required.

Unbounce Window Object

In order to track successful form submission, we will be using two methods being `beforeFormSubmit` and `afterFromSubmit`. Here's the definition for each:

• beforeFormSubmit: Called after validation has passed, but before the lead has been recorded.
• afterFormSubmit: Called after the lead has been recorded.

beforeFormSubmit and afterFormSubmit are arrays accessible through the hooks object of window.ub, Unbounce's window object. To confirm you can access the arrays, you can type the following in your browser's console:

window.ub.hooks

When you press enter, this is the output you will get:

window.ub.hooks

Object { beforeFormSubmit: [], afterFormSubmit: (1) […] }

For this tutorial, we will be working with the afterFormSubmit array. The idea is to track form submissions and send this data to our target destinations and we want to do that after Unbounce has created the lead record. You can also use beforeFormSubmit if you choose to. Both will work just fine.

Tracking Code

Now that we know which method we are going with it is time to write our code which will capture the data we need.

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

This script, when executed will log the event unbounce_successful_form_submission to the dataLayer. This event will later be used as a Custom Event trigger for to send the conversion event to Google Analytics 4, Google Ads and so on.

With this script, you should be able to successfully track your form submissions. However, there are no details in this event which enables us to do further analysis. So, let's add more details allowing us to do advanced analysis on our form submission event. For instance, we can add metadata to the event to answer the following questions:

• How many conversion each landing page variant has?
• What is the percentage of conversions that are main goals?
• Which are the top conversion landing pages?
• Which users had their conversion uncaptured?