Common form engagement tracking techniques with custom variables in Google Tag Manager

Winston Ong~December 5, 2018 /SEO Blog
Follow me

Google Tag Manager provides a relatively straightforward way to track form submissions, with an in-built form submission trigger.

form submission gtm

Attaching this trigger to fire a tag is as intuitive as adding a page view or link click trigger.

But what if you wanted an analysis of your form conversion data that went further than a simple count of form submissions?

For example, if you wanted to trigger a certain based on specific types of form inputs.

GTM provides a range of pre-defined input options but they are largely based on click/button input (click classes, click element, click ID, etc).

Below, I’ve outlined how you can use two very handy custom variables to filter out your form triggers for common types of form interaction.

Form interaction #1: radio button

In this example, we’d like to capture the value a user selects (checks) using radio check buttons on a form.

function() {
 var radioName = "radioName"; 
 var checked = {{Form Element}}.querySelector('[name="' + radioName + '"]:checked'); return checked ? checked.value : undefined; 

Form interaction #2: drop down selection

The custom variable below will capture the value a user selects from a multiple choice drop down selection menu:

function() {
var selectList = {{Form Element}}.querySelector(‘#selectListId’);
return selectList ? selectList.options[selectList.selectedIndex].value : undefined;

Need some help your data and analytics?

Learn more about my Google Analytics and GTM consultation services. Find out how I can help your business create a data driven framework for marketing decisions and investment.