Form Abandonment Recipe for Google Tag Manager

Auto-event listener’s source code (used in this recipe) was originally published by Lauri Piispanen but upgraded by my colleague later on.

What does it do? Tracks multiple forms on the same page and sends these events to Google Analytics in case of form abandonment. These events are set as “non-interaction”, thus your bounce rate will not be affected.

Requirements for this Form Abandonment Listener to work:

• Form must dispatch a valid form submit event in case of successful submission.
• Form must be built with <form> HTML tags.
• Form fields must contain name attribute.
• This recipe will not work with AJAX forms, multi-page forms or those forms which redirect to a Thank you page.
• Not all browsers support this recipe.

Read this blog post for more information.

 

INSTRUCTIONS

1. Download Container File
   Download the container JSON file (right-click on the link and click “Save Link As” or “Save Target As” to save the JSON file to your computer).
2. Import JSON File into GTM
   Log into your own Google Tag Manager container and head to the Admin section of the site. Under Container options, select Import Container. Read this blog post for more details about importing a container file.
3. Update With Your Own Tracking ID
   Update or create a new Constant Variable named {{YOUR_GA_TRACKING_ID}} with your Google Analytics Tracking ID (a.k.a. UA Number). I’d recommend using Google Analytics Settings variable instead. Read this guide how to properly change Tracking ID in the imported container.
4. Preview & Publish
   Use the Preview options to test this container on your own site. Try testing each of the events to make sure they’re working properly. If everything looks good, go ahead and publish!
5. Do you still have questions how this form abandonment listener works?
   Read this blog post with full explanation and case study.

View all 40+ Google Tag Manager Recipes