├── README.md └── jquery.form-abandonment.js /README.md: -------------------------------------------------------------------------------- 1 | #jQuery-Form-Abandonment.js 2 | 3 | jQuery-Form-Abandonment is a simple jQuery plugin that makes tracking form engagement and abandonment a breeze. 4 | 5 | This project is in its early stages, but already gets the job done. You can use it to see whether users are filling out your forms, leaving half-way through filling out your forms, and what fields they're filling out when they submit them. 6 | 7 | Current version: 1.0.0. 8 | 9 | ###Requirements: 10 | 11 | * jQuery previously loaded in the page. Confirmed working 1.10 and 2.1.1. 12 | * Google Analytics Universal Web Tracking, aka Universal Analytics. Universal Analytics has been out since March 2013, so if you're using GA you're probably using it. Events are handled differently with the older versions. If adding support for the older versions is something you'd like, open an issue on GitHub to let me know. 13 | 14 | So, you need to have the GA snippet which looks something like: 15 | 16 | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 17 | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 18 | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 19 | })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 20 | ga('create', 'UA-XXXXX-X', 'auto'); 21 | ga('send', 'pageview'); 22 | 23 | ### Installation 24 | 25 | Download jquery.form-abandonment.js and load it in a script tag AFTER jQuery has been loaded. 26 | 27 | ### Usage 28 | 29 | The plugin must be called on a \
element. Find the form you want, and then call: 30 | 31 | $('form').trackEngagement(); 32 | 33 | That's all you need to do. Custom events will be sent to the Google Analytics for that site. Custom events will tell you: 34 | 35 | 1. If users are filling out forms on that page, or leaving them untouched. 36 | 2. If users are partially filling out your forms and then giving up and leaving the page. 37 | 2. Whether the form has been submitted. 38 | 3. What fields they've filled out when the form is submitted. 39 | 40 | #### Options 41 | 42 | The options correspond to the identifying strings sent up with the custom events to Google Analytics. Change these if you want to categorize events different. 43 | 44 | { 45 | abandonmentCateogry: 'abandonment', 46 | abandonmentAction: 'abandonedForm', 47 | abandonedLabel: 'Left form unchanged', 48 | notAbandonedLabel : 'Filled out form', 49 | submitCategory : 'form', 50 | submitAction: 'submit', 51 | //there is no submit label, because the label are the fields in the form modified 52 | }; 53 | 54 | ### Viewing the Data 55 | 56 | The data is all sent up to the Google Analytics account. 57 | 58 | There are two places to view the data: Real-time > Events, and Behaviour > Events. 59 | 60 | Events show up in real-time right away. I recommend opening this page up while testing the setup of the plugin. It takes some time for events to show up in the behaviour page, but the information there will be more detailed. 61 | 62 | 63 | -------------------------------------------------------------------------------- /jquery.form-abandonment.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * jquery.form-abandonment.js 3 | * Written by Adam Coard - @AdamCoard 4 | * Original jQuery plugin boilerplate author: @addyosmani 5 | * Licensed under the MIT license 6 | */ 7 | 8 | 9 | ;(function ( $, window, document, undefined ) { 10 | 11 | var pluginName = "trackEngagement", 12 | defaults = { 13 | abandonmentCateogry: 'abandonment', 14 | abandonmentAction: 'abandonedForm', 15 | abandonedLabel: 'Left form unchanged', 16 | notAbandonedLabel : 'Filled out form', 17 | submitCategory : 'form', 18 | submitAction: 'submit', 19 | //there is no submit label, because the label are the fields in the form modified 20 | }; 21 | 22 | // The actual plugin constructor 23 | function Plugin( element, options ) { 24 | this.element = element; 25 | this.options = $.extend( {}, defaults, options) ; 26 | 27 | this._defaults = defaults; 28 | this._name = pluginName; 29 | 30 | this.init(); 31 | } 32 | 33 | 34 | Plugin.prototype.init = function () { 35 | // We already have access to the DOM element and 36 | // the options via the instance, e.g. this.element 37 | // and this.options 38 | 39 | if (this.element.tagName.indexOf('form') !== -1){ 40 | leftPageWithoutFillingOutAnything(this.element); 41 | submitEvent(this.element); 42 | } 43 | else { 44 | throw new Error('TrackEngagement be called on elements only'); 45 | } 46 | 47 | }; 48 | 49 | // A really lightweight plugin wrapper around the constructor, 50 | // preventing against multiple instantiations 51 | $.fn[pluginName] = function ( options ) { 52 | return this.each(function () { 53 | if ( !$.data(this, "plugin_" + pluginName )) { 54 | $.data( this, "plugin_" + pluginName, 55 | new Plugin( this, options )); 56 | } 57 | }); 58 | }; 59 | 60 | 61 | leftPageWithoutFillingOutAnything = function(element){ 62 | 63 | var hasFilledOutForm = false; 64 | 65 | $(element).find(":input").blur(function(ev){ 66 | if (ev.target.type === 'checkbox' && ev.target.checked ){ 67 | hasFilledOutForm = true; 68 | } 69 | else if ( $(ev.target).val() ){ 70 | hasFilledOutForm = true; 71 | } 72 | }); 73 | 74 | //Fires right as the page is closing. Should work on most browsers beside Opera. 75 | window.onbeforeunload = function() { 76 | var message = hasFilledOutForm ? options["notAbandonedLabel"] : options["abandonedLabel"]; 77 | ga('send', 'event', options['abandonmentCateogry'], options['abandonmentAction'], message, 1); 78 | }; 79 | }; 80 | 81 | submitEvent = function(element){ 82 | 83 | $(element).submit(function(ev){ 84 | ga('send', 'event', 'form', 'submit', 'Form submit', 1); 85 | 86 | var formData = $(ev.target).serialize(); 87 | 88 | //remove the CSRF token from the serialized string 89 | if (formData.indexOf('_token=') !== -1){ 90 | formData = formData.slice(formData.indexOf('&')); 91 | } 92 | 93 | //Convert the query string to just the parameters 94 | formData = formData.match( /([^&?]*?)[=]/g ); 95 | formData = formData.map(function(e){return decodeURI(e);}); 96 | 97 | formData.forEach(function(e, i){ 98 | ga('send', 'event', options['submitCategory'], options['submitAction'], e, 1); 99 | }); 100 | 101 | }); 102 | 103 | }; 104 | 105 | })( jQuery, window, document ); --------------------------------------------------------------------------------