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

The Story Behind This Case Study

In my capacity as a Google Tag Manager consultant, 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

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:

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.

and

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

These are now populated in the data layer variables:

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:

Then state the conditions on which to fire:

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:

and

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

And the events being fired with relevant values:

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”:

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

Step 3 – Marital Status

Step 5 – Employment Status