Sunday, 24 May 2020

Tracking form submissions

Consider following form with three input elements and a submit button:

<form id=”gform_1″ action=”http://www.weplan.com/Worksheets/worksheets.pdf”>
Username: <input type=”text” id=”username”><br>
Password: <input type=”text” id=”password”><br>
Email: <input type=”text” id=”email”><br>
<input id=”submitButton” type=”submit” value=”Submit”>
</form>

To track form submissions on a website via Google Tag Manager, follow the steps below:

Step-1: Note down the URL of the page where your form is embedded. For example:


Step-2: Find the form ID (through Google Developer Console) and make a note of it. To find your form ID, right-click on the form, select ‘Inspect Element’ (Google Chrome) and look for the ‘ID’ attribute in the <form> tag. In my case, the form ID is ‘gform_1’:


Step-3: Create a new trigger to check for form submissions.

Follow the steps below:
#3.1 Create a new trigger and name it ‘Check for form submit’.
#3.2 Select ‘Form Submission’ as trigger type and then configure the
rest of your trigger as shown below:

Trigger Name: Check for form submit
Trigger Type: Form Submission 
Check Validation 
1. Enable this trigger when all of these conditions are true: Page URL equals <<enter the URL of the page where your form is embedded>>
2. This trigger fires on: Some Forms
3. Fire this trigger when an Event occurs and all of these conditions are true: Form ID equals <<enter the ID of your embedded form>>
Note(1): If your form is embedded on several pages across your website, then set the ‘Page URL‘ to .* as explained earlier.
Note(2): Make sure that the ‘check validation‘ option is checked. This is done to ensure that the trigger fires on successful form submission and not just when a user clicks on the form submit button.
Note(3): ‘Form ID’ is a built-in variable of GTM which returns the ‘id’ attribute of a form.

Step-4: Create a new tag of type Universal Analytics to send the form submit event to GA server:
Tag Name: Send form submit event to Google Analytics
Tag Type: Universal Analytics
Track Type: Event
Category: New Lead
Action: {{Page Path}}
Non-Interaction Hit: True
Firing Triggers: Check for form submit
I have used ‘Page Path’ as event action, so that in my event tracking reports, I can see the page on which the ‘Form submit’ event was triggered. This is useful if you have embedded the same form on
multiple pages of your website.

Step-5: Preview your container to make sure that the new tag is firing.

Step-6: If everything is working as intended then publish the new version of your container.

Step-7: Click on the form ‘submit’ button and test whether the event data is being sent to Google Analytics, via real-time reports: