Easy Form Conversion Tracking with Google Tag Manager (GTM)

alex-rangevik-konverteringsoptimeringBy Alex Rangevik
Join my 15.000 followers on LinkedIn 👆

Updated Feb 11, 2020

If a standard Google Tag Manager Form listener does not work with your form, the next best thing is to ask the developer to implement a custom dataLayer.push() into the callback function which is invoked upon successful form submission.

Step 1. Implement code for the submission event

The piece of code could be something like:

JavaScript:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
‘event’: ‘formSubmission’,
‘formType’: ‘Contact us’
}};

First, choose a name for the event. In this example we use formSubmission.

Since we might have several types of forms – “Contact us” and “Newsletter Subscription” – we will add a dataLayer variable called formType.

That’s it!

Step 2. Test datalayer.push event

After the developer implements dataLayer.push in all forms, you should test it:

  1. Start Preview and Debug mode.
  2. Refresh the page with the form.
  3. Try submitting the form. Leave at least one required field blank. In this case dataLayer event must not be pushed.
  4. Fill in all fields and try submitting again.
  5. Check whether all data is correctly pushed to the dataLayer. Click formSubmission event and then open the Data Layer tab in the Preview console. Data should look like this:

datalayer-formSubmission-gtm

Step 3. Set up Variables and Triggers in Google Tag Manager

Set up variables and triggers in GTM. In my dataLayer.push example, there are two data points I’d like to use as variables – formType and formPosition, so I need to include them to Google Tag Manager by creating Data Layer variables.

3.1 Data Layer Variable:

Title: DLV – formType
Variable type: Data Layer Variable
Data Layer Variable Name: formType
Leave all other settings as they are

3.2 Trigger:

Now, let’s create a trigger. Go to Triggers and click New.

Trigger Type: Custom event
Event name: formSubmission (it may differ depending on your situation. Just make sure you and your developer are using the same name).
This trigger fires on: All custom events

Step 4. Create Google Analytics Event

1. Assign this new trigger to Google Analytics Tag and enter the following details. Then save.

2.Start Preview mode, refresh a web page with a form you want to track.

3. Then fill in the form and submit.

4. After successful submission, Google Analytics Tag should fire (it will be displayed in Debug panel. You can also check Google Analytics real-time event reports).

Step 5. Test in Google Analytics

How will this event be displayed in Google Analytics event reports? Let’s say a visitor subscribed to our newsletter. The values pushed with Google Analytics Event will be:

Event Category: Contact us
Event Action: Form submission

Step 6. Summary

You have now learned how to easily implement a custom Google Tag Manager (GTM) dataLayer.push() for successful form submission. This can be used to track conversions and goals in Google Analytics (GA).

Good luck conversion hunting!

alex-rangevik

I’m Alex Rangevik and I run the agency and training company NorthPPC. By focusing on the whole customer journey – from traffic to user experience to conversion rate optimization – me and my team increase motivation and reduce resistance in every step in your marketing campaigns to increase overall ROI.

alex-rangevik I’m Alex Rangevik and I run the agency and training company NorthPPC. By focusing on the whole customer journey – from traffic to user experience to conversion rate optimization – me and my team increase motivation and reduce resistance in every step in your marketing campaigns to increase overall ROI.