(Updated 13 August 2017)<\/p>\n
A little over a year ago, in April 2014, I wrote the post \u201cAdvanced Form Tracking In Google Tag Manager<\/a>\u201d, and it\u2019s been at the top of my best seller list ever since. Turns out that many people are rightfully passionate about making the web forms on their websites as fluid and intuitive as possible, since a web form is often the only thing that stands between a prospect and their transformation into clienthood.<\/p>\n I thought it was time to update the article to be Google Tag Manager V2<\/a> compliant. It\u2019s not a major difference, but I have remodelled some of the JavaScript as well. Furthermore, I\u2019ve pulled together some new ideas explored in other articles, so now it\u2019s all conveniently packaged in this one big blog post.<\/p>\n At the heart of this article is still the methodology of picking up values from form fields. Perhaps you want to send some selection the user made to Google Analytics with the purpose of segmenting the data, or perhaps you want to identify values which most often block a conversion. Whatever the case, remember this: Google Analytics is very harsh towards PII<\/strong> (personally identifiable information) collection, and you need to be very vigilant in sanitizing any values you\u2019re collecting. You don\u2019t want to send anything<\/em> to Google Analytics that can be used to identify the person who filled the form. The most typical value is an email address<\/strong>, which you should categorically avoid recording.<\/p>\n Without further ado, let\u2019s get rolling. First, the basics\u2026<\/p>\n \n \n Subscribe to the Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n <\/p>\n <\/span><\/p>\n In the new version (V2) of Google Tag Manager, form tracking is no longer isolated as its own \u201cForm Listener\u201d Tag type. Instead, auto-event tracking<\/a> has shifted to handlers embedded in the Triggers you use to fire Tags.<\/p>\n When you create a Form<\/strong> Trigger, it will activate on all pages where the Enable this trigger when\u2026<\/strong> setting is valid. Remember, you only see this setting if either \u201cWait For Tags\u201d or \u201cCheck Validation\u201d is checked in the Trigger settings.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n If the Trigger is active on a page, it will actively listen for a form submission. The settings in the Trigger are:<\/p>\n Wait For Tags<\/strong> – GTM will pause<\/em> the form submission for as long as all the Tags that use the Trigger have fired or until the timeout (default 2000 milliseconds) expires.<\/p>\n<\/li>\n Check Validation<\/strong> – If this is checked, GTM will not fire the Trigger if the default action of the form (submit and redirect) is prevented. If left unchecked, the Trigger will go off whenever a Enable this trigger when\u2026<\/strong> – As mentioned above, this condition is for establishing on which pages<\/strong> GTM should listen for form submissions. There\u2019s really no performance penalty in having the listener active on all pages, but there are cases where Wait For Tags<\/strong> interferes with other JavaScript on the page, so you might want to only have the listener enabled on pages you\u2019ve tested it on.<\/p>\n<\/li>\n Fire this trigger when\u2026<\/strong> – If you select \u201cSome Forms\u201d as the This trigger fires on<\/em> setting, these conditions that govern when the Trigger makes any attached Tags go off. If you have just one form on the website, using \u201cAll Forms\u201d here is justified. But if you want to specify you only want to fire the Tag when a form with <\/p>\n <\/a><\/p>\n<\/div>\n If you don\u2019t see Variables like \u201cForm ID\u201d or \u201cForm Classes\u201d in the Variables drop-down menu, you will need to activate them, as they are Built-In Variables<\/a>, introduced in Google Tag Manager V2.<\/p>\n However, there might be many reasons why a properly created Form Trigger doesn\u2019t work. So, read on\u2026<\/p>\n For the Form Trigger to work, the form must dispatch a valid form submit event<\/strong> which also bubbles all the way to the document node<\/strong>. To de-gobbledegookify this statement, it means that:<\/p>\n The form must dispatch a valid This event must not be prevented from propagating to the Those are the conditions. They seem simple enough, but you might be surprised how many forms out there violate either one.<\/p>\n The first means simply that GTM listens for a standard <\/p>\n <\/a><\/p>\n<\/div>\n The second means that the The first condition is most commonly violated when the The second condition is violated when event propagation is stopped with I\u2019ve written about this phenomenon a number of times before:<\/p>\n The best way to fix the issue, however, is to open a line of communication with your developers, and tell them that GTM requires a standard If this can\u2019t be done, the next best thing is to ask the developer to implement a custom This would push There are other workarounds which involve e.g. polling the page until a thank you message is identified, or perhaps using a custom-built DOM Listener<\/a>. Unfortunately, all workarounds are far less robust than either fixing the form to respect GTM\u2019s Form Trigger requirements or the custom Google Tag Manager introduces a number of Built-In Variables<\/a> you can use to simplify form tracking. Make sure all the \u201cForm\u201d Variables are checked before continuing.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n Form Element<\/strong> – returns an HTML Object which contains the form element that was submitted. You can use this Variable to dig deep into the object properties of the form itself.<\/p>\n<\/li>\n Form Classes<\/strong> – returns a string of values in the Form ID<\/strong> – returns a string with the value stored in the Form Target<\/strong> – returns a string with the value stored in the Form URL<\/strong> – returns a string with the value stored in the Form Text<\/strong> – returns the entire text<\/em> content of the form that was submitted (NOT very useful).<\/p>\n<\/li>\n<\/ul>\n Many of the following solutions rely on these Built-In Variables.<\/p>\n All the Variables described below are Custom JavaScript Variables<\/strong>. They are all scoped, by default, to the form that was submitted with Keep this in mind when applying the following solutions to your own measurement plan.<\/p>\n This is a simple Custom JavaScript Variable which captures the value user has input into a form field. Do note that items like checkboxes, radio buttons, and drop-down lists work a little differently, which is why they are covered in their own chapters.<\/p>\n Name<\/strong>: {{Field value}}<\/p>\n Description<\/strong>: This solution accesses the This solution is for capturing the value of the checked radio button. The default solution is for capturing just one radio button value, i.e. accessing just one group. See chapter 9 for an example of how to access multiple values from similar elements.<\/p>\n Name<\/strong>: {{Checked radio button}}<\/p>\n Description<\/strong>: Returns the value of the checked radio button in the group with the name radioName<\/em>. This group must exist within the form that was submitted. If no checked button is found, undefined<\/em> is returned.<\/p>\n Returning the value of the selected checkbox within a group is done exactly the same way as how you\u2019d capture a radio button value. Both use the So use the solution from the previous chapter to capture checkbox values as well. Just remember that it only returns the value of the first<\/strong> checkbox in a group that was selected. If the user can check multiple checkboxes (as is usually the case), you might want to check chapter 9 for tips on how to do this.<\/p>\n To capture the selected item value in a drop-down list, checking for the Name<\/strong>: {{Selected list item}}<\/p>\n Description<\/strong>: First, the script retrieves the drop-down list with ID selectListId<\/em>. Next, it returns the value of the selected option in the list. If the list does not exist, the script returns undefined<\/em>.<\/p>\n Sometimes you\u2019ll want to capture multiple values of some specified group. A prime example is the checkbox, where you can have multiple checked boxes in a single group. Here are some ideas for how to capture these values.<\/p>\n Return concatenated string of checked item values<\/strong><\/p>\n Description<\/strong>: This returns a concatenated string of all the checked item values within the group with name groupName<\/em>. An example would be e.g. \u201cbreakfast lunch\u201d, where the user chooses which meals they always eat out of \u201cbreakfast\u201d, \u201clunch\u201d, and \u201cdinner\u201d.<\/p>\n To return just the plain Array, so that you can process it further in the Tag which calls this Variable, change the If you want to get the values in a multiple selection list, use the following script. It returns the results in a concatenated string again, but by following the tip in the previous paragraph you can return an Array instead.<\/p>\n Return selected values in a multiple selection list<\/strong><\/p>\n Description<\/strong>: This returns a concatenated string of all the selected options in a multiple selection drop-down list, which has the ID selectListId<\/em> and which is within the submitted form.<\/p>\n For ideas on how to track form abandonment, check out this article I wrote a short while ago:<\/p>\n Track Form Abandonment With Google Tag Manager<\/a><\/p>\n Bounteous also has a sweet guide<\/a> on how to achieve the same thing, albeit with a somewhat different approach.<\/p>\n My colleague at Reaktor<\/a>, Lauri Piispanen, has also improved upon this solution, and you can check out his GitHub repo here<\/a>.<\/p>\n If you want to track how much time a user spends on your form, segmented by individual fields, check out the following article:<\/p>\n Form Field Timing With Google Tag Manager<\/a><\/p>\n It utilizes User Timings in Google Analytics to collect data on how much time users spend in the fields of your form by average.<\/p>\n I decided not to dwell on this topic too much, since it\u2019s so hacky and unreliable. The issue is that on e.g. ASP.NET sites, a single master form control wraps the entire page, and individual forms are just groups of elements under this one control.<\/p>\n The method I suggested in the previous guide<\/a> is still somewhat valid, however. The way it works is that:<\/p>\n
\n X<\/span><\/p>\n
\n The Simmer Newsletter<\/strong>\n <\/p>\n1. Form tracking in Google Tag Manager<\/h2>\n
![\"Form](\"https:\/\/www.simoahava.com\/images\/2015\/09\/form-event-trigger.jpg#ZgotmplZ\")
<\/p>\n\n
submit<\/code> event is registered, whether or not the default action is prevented.<\/p>\n<\/li>\nid=\"contactForm\"<\/code> should fire the Tag, you should add that as a condition here.<\/p>\n<\/li>\n<\/ol>\n![\"enable](\"https:\/\/www.simoahava.com\/images\/2015\/09\/fire-on.jpg#ZgotmplZ\")
<\/p>\n2. Why the Form Trigger doesn\u2019t always work<\/h2>\n
\n
submit<\/code> browser event<\/p>\n<\/li>\ndocument<\/code> node<\/p>\n<\/li>\n<\/ol>\nsubmit<\/code> browser event, which is most often dispatched when an input<\/code> or button<\/code> element is clicked, where element type is submit<\/code>.<\/p>\n![\"Valid](\"https:\/\/www.simoahava.com\/images\/2015\/08\/valid-input-submit.jpg#ZgotmplZ\")
<\/p>\nsubmit<\/code> must be allowed to climb all the way up to the document<\/code> node, where GTM\u2019s listener is waiting for the event. You see, GTM uses something called event delegation<\/em> to listen for form submissions. This is much more economical than adding a listener to all the forms on the page individually.<\/p>\nsubmit<\/code> event is either cancelled (see below) or never dispatched in the first place. Many forms send their data with custom-built requests (e.g. jQuery\u2019s $.ajax<\/a> or the XMLHttpRequest API<\/a>), and these prevent the submit<\/code> event from working, since it\u2019s replaced with a custom dispatcher. Since the submit<\/code> event is never dispatched, Google Tag Manager never records a form submission<\/strong>.<\/p>\nreturn false;<\/code> in a jQuery handler. Another common way to prevent propagation is to use stopPropagation()<\/code> instead of preventDefault()<\/code> on the event object.<\/p>\nsubmit<\/code> browser event to propagate all the way to the document<\/code> node to work.<\/p>\ndataLayer.push()<\/code> into the callback function which is invoked upon a successful submission. The piece of code could be something like:<\/p>\nfunction<\/span> onFormSuccess(event) {\n window<\/span>.dataLayer = window<\/span>.dataLayer || [];\n window<\/span>.dataLayer.push({\n event: 'formSubmissionSuccess'<\/span>,\n formId: 'contactForm'<\/span>\n });\n \/\/ Rest of the success callback code\n<\/span>}\n<\/code><\/pre>\n<\/div>\nformSubmissionSuccess<\/code> into the dataLayer<\/code> as the value of the event<\/code> key. Then, you can create a Custom Event Trigger, which waits for an event named formSubmissionSuccess<\/code>. Using this Trigger would then fire a Tag when the form is successfully submitted.<\/p>\ndataLayer.push()<\/code> method described above.<\/p>\n3. Built-In Variables<\/h2>\n
![\"Form](\"https:\/\/www.simoahava.com\/images\/2015\/09\/form-built-in-variables.jpg#ZgotmplZ\")
<\/p>\n\n
class<\/code> attribute of the form that was submitted.<\/p>\n<\/li>\nid<\/code> attribute of the form that was submitted.<\/p>\n<\/li>\ntarget<\/code> attribute of the form that was submitted.<\/p>\n<\/li>\naction<\/code> attribute of the form that was submitted.<\/p>\n<\/li>\n4. Note about scope<\/h2>\n
{{Form Element}}.querySelector...<\/code>. If you want to access any<\/em> form on the page, submitted or not, you need to use the following syntax:<\/p>\nvar<\/span> form = document<\/span>.querySelector('#someform'<\/span>);\nvar<\/span> field = form.querySelector...\n<\/code><\/pre>\n<\/div>\n5. Capture field value<\/h2>\n
function<\/span>() {\n var<\/span> field = {{Form Element}}.querySelector('#inputFieldId'<\/span>);\n return<\/span> field ? field.value : undefined<\/span>;\n}\n<\/code><\/pre>\n<\/div>\nvalue<\/code> attribute of the form field with ID inputFieldId<\/em>, as long as its found within the form that was submitted. If no such field is found, then undefined<\/em> is returned instead. Remember, do not<\/strong> collect personally identifiable information!<\/p>\n6. Capture selected radio button value<\/h2>\n
function<\/span>() {\n var<\/span> radioName = \"radioName\"<\/span>;\n var<\/span> checked = {{Form Element}}.querySelector('[name=\"'<\/span> + radioName + '\"]:checked'<\/span>);\n return<\/span> checked ? checked.value : undefined<\/span>;\n}\n<\/code><\/pre>\n<\/div>\n7. Capture selected checkbox value<\/h2>\n
checked<\/code> property to identify if an element is checked.<\/p>\n8. Capture selected drop-down list item value<\/h2>\n
value<\/code> of the list itself will not work, as you\u2019d intuitively expect. Instead, you need to access the option in the list that was selected, and then capture its value.<\/p>\nfunction<\/span>() {\n var<\/span> selectList = {{Form Element}}.querySelector('#selectListId'<\/span>);\n return<\/span> selectList ? selectList.options[selectList.selectedIndex].value : undefined<\/span>;\n}\n<\/code><\/pre>\n<\/div>\n9. Capture multiple values<\/h2>\n
function<\/span>() {\n var<\/span> groupName = \"groupName\"<\/span>;\n var<\/span> elems = {{Form Element}}.querySelectorAll('[name=\"'<\/span> + groupName + '\"]:checked'<\/span>);\n var<\/span> vals = [];\n var<\/span> i, len;\n for<\/span> (i = 0<\/span>, len = elems.length; i return vals.length ? vals.join(' '<\/span>) : undefined<\/span>;\n} \n<\/code><\/pre>\n<\/div>\nreturn<\/code> statement to:<\/p>\nreturn<\/span> vals.length ? vals : undefined<\/span>;\n<\/code><\/pre>\n<\/div>\nfunction<\/span>() {\n var<\/span> selectList = {{Form Element}}.querySelector('#selectListId'<\/span>);\n var<\/span> options = selectList ? selectList.options : [];\n var<\/span> vals = [];\n var<\/span> i, len;\n for<\/span> (i = 0<\/span>, len = options.length; i if (options[i].selected) {\n vals.push(options[i].value);\n }\n }\n return<\/span> vals.length ? vals.join(' '<\/span>) : undefined<\/span>;\n}\n<\/code><\/pre>\n<\/div>\n10. Track form abandonment<\/h2>\n
11. Track form field timings<\/h2>\n
12. One form element – multiple forms (ASP.NET)<\/h2>\n
\n