In this post I’ll present a cost effective solution for capturing information about form abandonment.

Web forms are used everywhere, and the business’ goal is to drive the highest percentage of visitors through the form:

• Checkout (of a product)
• Lead capturing
• Contact us
• Enquiries
• …

However, the visitors may abandon the form because of various reasons.

• Unclear, ambiguous text copies
• Browser compatibility issues
• Lack of trust. What happens to the data entered?
• Too long. Too many clicks needed.
• Too complex input fields
• Validation errors

There are many events that can be tracked in case of web forms. In this solution I focus on answering a simple question:

What was the last input field “touched” before the user has abandoned the form?

Marketers can derive actionable insights from it and optimize those fields and their context that generated the most drop-off. Actions that could be derive include:

• Updating the text copies to make them clearer, unambiguous.
• Simplifying the form and the form fields to ensure visitors feel motivated filling it.
• Increase trust by adding more description, terms and conditions, etc.
• Revise the validation rules and messages to help the visitors, rather than blocking them by having over-complicated rules in place.
• …

I’ve raised the following extra requirement:

The solution must be applicable to an existing form without having to touch the sources of the site.

So no new release is needed. Any code used will be injected via dynamic tag manager.

Another advantage of this solution – and a difference from typical implementations – is that we do not generate requests on every click while filling the form, just store the data locally and submit it when the form gets abandoned.

So it is cost effective, especially when you are billed on a per-request basis by your analytics provider.

The solution

Pre-requisites

1. Adobe DTM must enabled on the page that holds the form
2. A property must be allocated in the Analytics data suite to store the captured data

The following diagram shows, what sources will be injected and what events will be raised during the lifecycle of the webpage in the solution.

To realize the solution, we have to associate Javascript code with the following events.

1. Page load
   1. Initialize a variable for holding the name of the last field clicked
   2. Deploy code to be run on the onbeforeunload event
   3. Deploy code to “deactivate” the onbeforeunload event handler on submitting the form
2. Clicking a form field
   1. Store the name of the form field in a variable
3. Submitting the form
   1. Ensure the code deployed for the onbeforeunload event won’t run
4. Form abandoned – navigating away or closing the browser (tab)
   1. The onbeforeunload event executes and the name of the last field clicked will be sent to analytics

I. Page load rules

I’ve added a Page Load rule to be triggered at Bottom of Page, and setup rule conditions accordingly to ensure it is deployed to the right page/form only.

Initialize a variable for holding the name of the field clicked last

_satellite.setVar("lastFieldClicked", "form untouched");

When we see the initial value ‘form untouched’ sent to Analytics, it means that the user has abandoned the form before touching any form fields.

Deploy the onbeforeunload event handler function to submit a track event

window.onbeforeunload = function(e) {
  if (_satellite.getVar("formSubmitted") != true) {
    window._satellite.track("form_abandoned");
    return undefined;
  }
};

 

The code has to return undefined otherwise the user would be prompted with a dialog to confirm navigating away.

The event onbeforeunload is supported by all major browsers for a long time. Custom text support – for the dialog – has been removed (or never supported) from several browsers, but we don’t need that in this exercise.

Deploy the form’s onsubmit event

We set a variable marking the form submitted.

document.getElementById("yourform").onsubmit = function onSubmit(form) {
  _satellite.setVar("formSubmitted", true);
}

II. Event based rules – store the name of the last field clicked

For this, we have to deploy an event based rule.

• Event Type: focus
• Element Tag or Selector: body.profile-page form input

With this string I ensure that only inputs inside forms that sit on a specific page type (profile page) will be involved. You can write more universal or more specific tag or selector pattern depending on your use case and the type of input fields used on the form.

The Javascript code to be deployed just sets a DTM variable to the name of the last field clicked.

_satellite.setVar("lastFieldClicked", this.name);

III. Direct call rules – send the form abandonment event to analytics

Add a direct call rule to handle the event fired from the onbeforeunload event (remember the window._satellite.track(“form_abandoned”); direct call earlier…).

What we need to do here is to setup an Adobe Analytics tracking rule that doesn’t increment a pageview.

As I’ve allocated prop5 to hold the name of the last form field clicked, I need to set the following under Props:

• Prop name: prop5
• Set as: %lastFieldClicked%

We are done 🙂 Lets see the end result on Analytics:

The captured data currently holds the input names only, but it can be easily made reusable for reporting of multiple sites and forms.