Analytics - Performance Analysis - Tag Manager

How To: Get & Track Form Field Submission Values in Analytics Using GTM

By on 9th March 2021

Reading Time: 5 minutes

  • LinkedIn
  • Twitter
Form Being Filled In

I was recently working with a client on a UX project where they wanted to track usage of an application form process split down into several steps.

Whilst the website database captured all the submitted values in the form, they wanted to send data to analytics to see how many steps of the form were being complete, and what data was being submitted so as to be able to report and segment this data within analytics and data studio.

Is this an issue regards GDPR?

It must be stressed that no personal data was captured because of GDPR etc, and the only values being captured were generic values that in no way could be used to identified who had filled the form in, and other than for UX purposes, there was no value in storing this data.

I found this statement whilst researching this:

Unlike HIPAA, the GDPR does not provide specific methods to “de-identify” data. … The GDPR does not apply to data that does not relate to an identified or identifiable natural person or to data rendered anonymous in such a way that the data subject is not or no longer identifiable.

PREPARING FOR THE EU GDPR IN RESEARCH SETTINGS

I think that covers the GDPR aspect of things anyway, it is not my forte to be honest.

How To Set Up Form Field Tracking:

The challenge was grabbing the data that was filled in each form throughout the application process, though it was actually fairly straightforward using Google Tag Manager.

To help illustrate this, I have set up a test form on my site (feel free to submit and populate my analytics data) which can be found here:

https://organicdigital.co/contact/test-form.php

Test Form

The form fields that you should be allowed to track in this case would be job title and the value selected in the drop-down box.

Step 1 – Set up Data Layer Variables

In order to do this, you need to use data layer variables and match them up to the relevant form fields, so you need to work out the ID of the form element you want to capture.

To do this, go to Google Tag Manager, open your site in preview mode and navigate to the page with your form in.   You should then submit it, then view the Form Submit action within Tag Assistant Debug Window where you will see a Data Layer Variable containing the submitted form fields as follows:

Form Elements in Data Layer

Each input element is identified within an array, and as arrays start at 0, the IDs for the input elements are as follows:

  • Name – cf_name – ID = 0
  • Email – cf_email – ID = 1
  • Job Title – cf_job_title – ID = 2
  • Drop Down Options – cf_drop_down – ID = 3

You can then set up data layer variables to capture, in this case “Job Title” and “Drop Down Options” using the following data layer variable:

gtm.element.array_id.value

so in this case:

gtm.element.2.value

and

gtm.element.3.value

e.g.

Data Layer Variable Config 1

and

Data Layer Variable Config 2

If you then go back to preview mode and submit the form again, you can see you captured values:

Form Filled In

These are now populated in the data layer variables:

Populated DLVs

Step 2  – Set Up Form Submission Trigger

You now use the form submission action trigger to create a tag that will pass these variables to a Google Analytics event.   The triggers can, if required, be dependent on the form id and/or page URL or path on which the form resides.

First, select the trigger type User Engagement -> Form Submission:

Form Submission Trigger

Then state the conditions on which to fire:

Test Form Submission Trigger

Step 3 – Set Up Google Analytics Events

You then set up an event for each value you wish to track which fires on this trigger and passes the DLVs into your custom event:

Analytics Event via GTM

and

GA Event 2

Upon submitting the form, you will now see both tags fire:

Form Submission Tags

And the events being fired with relevant values:

Real Time Tracking

Step 4 – Analyse the Data

You will then have a data set of completed form values, which you can then segment, for example, by looking at how many of each option were selected. 

Below is an example of searching the job titles that contain “tech”:

Tech Search

It is easier to perform such a search on fixed value fields like drop downs and radio buttons, as free fill text forms allow for discrepancies such as spelling mistakes (see above for the DELIBERATE spelling mistake).

In any case, this is very useful, and hopefully GDPR compliant, data to have.

A Real-World-In-the-Wild-Live Example

To demonstrate how effective this can be, below are examples of the site this was originally set up on which tracked each step of an application process, to see how far users got into the process, and to see what generic data was submitted at each point:

Steps Complete

Steps

Step 3 – Marital Status

Marital Status

Step 5 – Employment Status

Job Status

Get In Touch

Fill in the form below if you want to enhance your website's organic visibility