Tracking Form Submissions @Delta Growth

Show / Hide Demo Code ▼

document.addEventListener('dg.success', function() {
	dataLayer.push({
		'event': 'formSubmit',
		'formType': 'Lead',
		'formName': 'Demo Form'
	});
});

We want to track successful form submissions. Not clicks on the form submit button.

You can do this one of two ways, and it entirely depends on how your form operates. Submit the form you're trying to track and see what happens.

AJAX: If the URL stays the same, ask the developer to fire a dataLayer event using the form's callback function. For demo purposes, this is what you'd wrap around your code on this sandbox website to do that:
```
document.addEventListener('dg.success',
	function() {
		...
});
```
Thank You Page: If the URL changes, we would ask the developer to fire a dataLayer event on page load on the thank you page.

Client / Developer Task

WIP

Acceptance Criteria:

The dataLayer code provided below is fired by a JavaScript event whenever the green Track Me button/link is clicked.
Replace $PROMOTION NAME$ with the actual name of the promotion, e.g. "Winter Sale."
This code fires before any navigation occurs.

					dataLayer.push({
	'event': 'formSubmit',
	'formType': 'Lead',
	'formName': 'Demo Form'
});

Explanation

WIP

Google Tag Manager Setup

There are all sorts of forms you might track, in all sorts of categories. I'm going to break down what we need to do to track one type of form, but I'll follow up with some best practices for more holistic tracking:

Create a Variable that holds the "formName" dataLayer variable.
Set up a Custom Event trigger that listens for the "formSubmit" event. Select "Some Custom Events," pick "formName" equals "Demo Form" and save.
Set up a Universal Analytics tag that fires an event (with any Category, use {{formName}} as the Action, and any Label) on that trigger.

Note: When we're sending a requirement over to the developers, and when we're doing our testing, what we really want to track is a successful form submission. If a user tries to submit the form and it fails for some reason, we don't want to track it.

Other Use Cases

So why didn't we just create a unique event for every type of form (e.g. Register, Get a Demo, Contact Us)? One advantage of doing it this way is that we can use variables to simplify our lives in certain circumstances.

Above I mentioned that we're submitting this to Google Analytics using the variable {{formName}} rather than writing out the name of the form in the tag. This means that if we now wanted to track three other forms, we wouldn't have to make any changes in Google Tag Manager. The only thing that would need to change in the dataLayer.push code to reflect different form names.

If you have or expect to have a Resource Centre or Support Centre or any kind of resource downloads, I'd recommend including "formType" as another variable for all form submissions. You can call Contact Us, Get a Demo, etc. "Conversion" type forms, resource downloads, "Resource" type forms, and support, "Support" type forms.

Developers

AJAX and Thank You page style form submissions differ somewhat in tracking. AJAX forms don't change the URL on submission, while Thank You page style forms do. These are tracked differently and widely depend on your CMS and plugins.

AJAX: Almost all forms use Success Callbacks (or more accurately Success Events since they use new Event() and document.dispatchEvent()) these days. The first set of code below uses an example of this based on my custom code, but is reflective of what most modern success callbacks look like.

Any CRM or form tool worth using has this functionality built in and easy to implement.
Thank You: There's a page on the site called "Thank You," and you need to add your code to that page. One consideration is that this code must appear below the Google Tag Manager initialization snippet, otherwise it will not work.

Note: When we're tracking form submissions what we really want to track is a successful action. If a user tries to submit a contact form, etc and it fails for some reason, we don't want to track it.

AJAX Style

					document
.addEventListener('dg.success', function() {
	dataLayer.push({
		'event': 'formSubmit',
		'formType': 'Lead',
		'formName': 'Demo Form'
	});
});

Or, Code to Add to Thank You Page

				dataLayer.push({
	'event': 'formSubmit',
	'formName': 'Demo Form'
});

Enter Your GTM Container ID

Tracking Form Submissions