Form tracking requirements can be coarse (form submission) or fine (every time a field changes). Use event tracking to understand how users are interacting with the forms on your site. Once this form tracking functionality is deployed, the events can be seen in the Behavior > Events > Top Events report.
Deployment via Tag Manager
Download
Tag Manager form tracking configuration
Import container configuration file
Import the container file into your Tag Manager container. If your Tag Manager container already has existing configurations, you can opt to merge the import into your existing container -- if so, you should remove any duplicate Analytics tags from your existing container.
Adjust Tag Manager container variables
The following variables have been provided in the Tag Manager configuration file and require personalized adjustment. You will find them in your container with names preceded by 0_, 1_, or 2_. It is recommended that you rename them without this prefix once you have edited them.
Analytics settings
Ensure that the settings variable used in the configuration file is compatible with any settings used by your existing container.
Analytics property
It is required to place your Google Analytics property id into the 0_GA property constant variable with the Tag Manager container.
Test & Publish
Test the container (preferably on a non-production environment) to ensure that it functions as expected and does not impact any of your site's functionality (it is recommended to use the Chrome extension for tag injection for testing containers).
Publish the container to see the changes go live.
Deployment via on-page code
To track field changes for form use or form abandonment analysis, manual form events can be sent from a helper functio analyticsForm using the onClick or onChange event handlers that initiates the context change.
This function, which should be placed in the <head> is populated with the relevant form name and context (this) and will send the form event data to Google Analytics.
<script>
// helper function to trigger a Data Layer Form Event
analyticsForm = function(f, el) {
var formName = f;
var elName = el.name || el.id || el.type;
var category = 'interaction';
var action = 'form: ' + formName;
var label = elName + ':' + el.type;
// use the defined helper function to trigger the configured event
ga('send', 'event', category, action, label);
}
</script>
Tracking field changes
Form submissions are automatically tracked with this configuration file. Field changes, however, require on-page code modification.
Use form element event handlers that initiates the context change (such as onclick or onchange) to trigger the analyticsForm function through the Data Layer.This function is populated with the relevant form name and context (this) and will send the form event data to Google Analytics.
<input type="text" name="firstName" onchange="analyticsForm('contact information', this);">
<input type="text" name="lastName" onchange="analyticsForm('contact information', this);">
<select name="selectNumber" onchange="analyticsForm('contact information', this);">
<option value=""> </option>
<option value="A">A </option>
<option value="B">B </option>
<option value="C">C </option>
</select>
<input type="checkbox" name="agree" value="false" class="checkbox" onclick="analyticsForm('contact information', this);">
</form>
In the above example, each time a text field or select field is changed or a checkbox/radio button is clicked, an event with the following structure will be called:
- Category: form
- Action: {form name}
- Label: {element name or id}:{element type}
It's also important to note that the analyticsForm function will set the event label by first looking for the element's name attribute, then id attribute, and then type. Standardizing form field names and ids, or adjusting the analyticsForm function according to specific form setups or needs, will ensure the best possible form tracking.
Also note that Events are subject to a burst limit of up to 20 hits at once, which replenish at a rate of 2 hits per second. Additionally, only 500 hits (not including ecommerce) will be tracked per session. These limits could come into play, for example, if this type of tracking is implemented onclick of many subsequent elements.