Form abandonment<\/strong> isn\u2019t always easy to define. Most often, it refers to when someone starts to fill in an HTML form, but leaves the page without submitting it. As a definition, this works nicely. However, with multi-page forms it naturally refers only to the last<\/em> page of the form. Also, especially with government institutions, forms can be saved to be submitted later. Here, again, form abandonment<\/em> must be reconsidered.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n In this article, I\u2019ll go over four<\/strong> different ways to track form abandonment in Google Analytics<\/a>, using Google Tag Manager<\/a> to setup the tracking. The definition I\u2019ll use is the first one: abandonment occurs when someone enters a form page, but leaves it without submitting the form. Do note that GA might not be the right tool to actually track issues with your form. There are dedicated resources for that, such as ClickTale<\/a> or Hotjar<\/a>. But if you want to measure form engagement as part of a more coherent visitor journey, then it might make sense to track this engagement (or lack thereof) in Google Analytics.<\/p>\n The different methods I\u2019ll go over, in order of difficulty (as perceived by myself):<\/p>\n Advanced Segment in Google Analytics<\/p>\n<\/li>\n Event sent if form interacted with<\/p>\n<\/li>\n Event sent with the last field interacted with<\/p>\n<\/li>\n Event sent with full interaction history<\/p>\n<\/li>\n<\/ol>\n Well, the first one can be done without Google Tag Manager at all. But the others require some setting up.<\/p>\n The technology<\/em>, if you will, is based on the beautiful combination of I\u2019ll even show you a simple way of sending the event only if the user didn\u2019t submit the form.<\/p>\n Note that this guide is created around a very simple, basic form, which has been created according to B<\/strong>est P<\/strong>ractices; capital B, capital P. If you have some Ajax-postback-dynamic-validation-jQuery-horror-ultra-modern-form, this might not work for you, and you\u2019ll have to put your JavaScript skills to the test as you apply these lessons to the abomination you\u2019re cursed to work with.<\/p>\n Don\u2019t say I didn\u2019t warn you!<\/p>\n (UPDATE<\/strong>. My colleague, Lauri Piispanen, wrote a very, very nice upgrade to the Custom HTML Tag, and it\u2019s freely downloadable from his GitHub repo<\/a>. It automatically tracks multiple forms on the page!)<\/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 Google Analytics, the simplest way to track form abandonment is to create an Advanced Segment<\/strong>, which includes Sessions where the form page was visited, but the session itself did not include a conversion for the form submission:<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n This is OK. It\u2019s not polished, as it doesn\u2019t really tell us anything about why<\/em> the form was abandoned. Also, a simple page view of the form page is simply not a good way to extrapolate intent. But for all intents and purposes, this exposes possible flaws in a crucial funnel on your website.<\/p>\n As you create the Events in the chapters that follow, you can substitute the Page<\/strong> rule in the segment condition with an Event rule that matches the Event you\u2019ve created.<\/p>\n This Custom HTML Tag is what we\u2019ll use to setup the So, We want to use this browser event to invoke a Create a Custom HTML Tag, give it some illustrious name, and set it to fire only on pages with forms. Here\u2019s the code we\u2019ll work on. Just copy-paste it into the Tag.<\/p>\n That\u2019s pretty simple, right? All you do is attach a listener to the page, which waits for the Before we go on, let\u2019s create the Event Tag itself. And before we do that, you\u2019ll need to create a Custom Event Trigger and two Data Layer Variables.<\/p>\n The Custom Event Trigger looks like this:<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n And the two Data Layer Variables look like this:<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n![\"Form](\"https:\/\/www.simoahava.com\/images\/2015\/07\/form-abandonment.jpg\")
<\/p>\n\n
beforeUnload<\/code>, a browser event that is dispatched when the user leaves or closes the web page, and the transport<\/a> field in Universal Analytics. With these in place, GA will receive an event that contains information about form interaction when the user leaves the form page. You can then use an Advanced Segment to only view interaction data for sessions where the form was not submitted.<\/p>\n
\n X<\/span><\/p>\n
\n The Simmer Newsletter<\/strong>\n <\/p>\nAdvanced Segment in Google Analytics<\/h2>\n
<\/p>\nThe base Custom HTML Tag<\/h2>\n
beforeUnload<\/code> listener as well as the interaction handlers created incrementally in the following chapters.<\/p>\nbeforeUnload<\/code> is a browser event that is dispatched when the page is unloaded from the browser. Most typical ways for a page to unload is if the user is redirected to some other page (via a link or form submission, for example), or if the user decides to close the browser. Naturally, if the user\u2019s computer crashes, no controlled beforeUnload<\/code> event is dispatched.<\/p>\ndataLayer.push()<\/code> when the user leaves the page. This push()<\/code> will include a custom event<\/code> key as well as values for the fields in the Event Tag we\u2019ll create in the next chapter.<\/p>\nscript>\n (function<\/span>() {\n var<\/span> eventAction;\n window<\/span>.addEventListener('beforeunload'<\/span>, function<\/span>() {\n window<\/span>.dataLayer.push({\n 'event'<\/span> : 'formAbandonment'<\/span>,\n 'eventCategory'<\/span> : 'Form Abandonment'<\/span>,\n 'eventAction'<\/span> : eventAction\n });\n });\n \n \/\/ Add actual logic here...\n<\/span> })();\nscript<\/span>><\/code><\/pre>\n<\/div>\nbeforeunload<\/code> event. When that takes place, a dataLayer.push()<\/code> is invoked, which is then used to fire a Google Analytics Event Tag with all your abandonment issues within. The whole thing is wrapped in an immediately-invoked function expression to protect the global namespace from being polluted with your variables.<\/p>\nThe Event Tag<\/h2>\n
<\/p>\n<\/p>\n