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:

Tracking clicks on a button which is embedded across a website

Consider the following button:

<button id=”checklist3″ type=”button” onClick=’location.href=”http://www.weplan.com/Worksheets/worksheets.pdf”‘>Download</button>

In order to track clicks on this button via GTM, follow the steps below:

Step-1: Navigate to the web page (in Google Chrome browser) which contains the button you want to track via GTM

Step-2: Note down the URL of the web page where the button is embedded.

Step-3: Note down the ‘id’ attribute of the button through the Google developer console (as explained earlier). If the ‘id’ attribute is missing, then ask your developer to add one.

Step-4: Navigate to Google Tag Manager and create a new trigger with following similar configurations:

Trigger Name: Check for click on the download button
Trigger Type: Click – All Elements
This trigger fires on: Some Clicks 

Fire this trigger when an Event occurs and all of these conditions are true: 

1. Page URL equals <<enter the URL of the page where the button you want to track is embedded>> 

2. Click ID equals <<enter the ID of your button element>>

Note: In GTM, if you want to track any HTML element other than a link, then you set the ‘Trigger Type’ to ‘Click All Elements’.

Step-5: Create a new tag with following similar configuration which can send clicks on the tracked button to Google Analytics as an event:

Tag Name: Send click on the button download to GA as event
Tag Type: Universal Analytics
Track Type: Event
Category: Downloads via button
Action: <<enter the name of your event action>>
Label: {{Page Path}}
Non-Interaction Hit: True
Firing Triggers: Check for click on the download button

Step-6: Preview and publish your container.

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

The whole process of tracking clicks on the button which is embedded across a website, instead of just one particular page, is similar to tracking clicks on a button, embedded on a single page.

The only difference is that, when you create the trigger, you set the ‘Page URL’ to .* so that trigger can fire on any page of your website.

For example: