Form trackers

The purpose form trackers

Not all form submissions are of the same quality. Marketers need visibility over the quality of the form submissions they’re generating, and whether they’re actually resulting in revenue.

Form trackers give you a central place to view form submission leads, and track when they result in sales in Leadtosale.

Prerequisites

To create a form tracker, you must first create a container. Then, you can create a form tracker in the trackers section of your container.

Your forms also need to be a <form> element, and use a submit button <input type=“submit”>.

If this is not the case for your form, consider using the custom tracker instead.

Creating a form tracker

To create a new form tracker, navigate to the “trackers” section of your container, using the header menu. Then, select the “FORM TRACKER” button in the New trackers section of the tracker page.

Configuring a form tracker

Form trackers have a number of fields that can be configured when created.

Form name (required) - allows you to differentiate your form trackers. We recommend you create one form tracker per form structure so you can segment these in your leads dashboard.

Send New Leads to GA - sends events to Google Analytics when new form leads are tracked. If you’re already tracking these on your site, we recommend you leave this option unticked.

Require email address - marks form leads as invalid if an email address is not present in the form submission content. These will not count towards your lead totals or send events to GA. You can review and validate any invalid leads by using the Invalid filter on the leads dashboard.

Form Selector - allows you to add a CSS selector for the form you would like to track. In the example above, I’m select all form elements that have the ID ‘myId’. If left blank, it will match all form elements. Use a CSS selector if you want to use more than one form tracker. Note that css2 selectors must be used to support IE 8. The default selector matches all form tags. You can also use a chrome extension to help with your CSS selectors.

Prevent Submit - this will stop your form from submitting until the lead is successfully sent to Leadtosale. This is useful if your form attempts to load a new page on submit, so HTTP requests may be cancelled before the lead is tracked. This may prevent your form from working properly, so we suggest thoroughly testing this before switching on.

Alert Users on New Leads - notify users when new leads are created by email. You may want to do this if you’re running the online marketing campaign for a client, or you simply want to monitor new leads in real time as they come in. Users need to be added to the business in order to be selectable here.

Once you’ve configured your form track, select the ‘SAVE’ button to create your form tracker.

Manually trigger submissions based off submit button clicks

Note that this method:

Does not currently support more than one form tracker per page.
Requires a custom tracker to be implemented (this is created by default on new sign ups)

Sometimes forms submit too fast for us to track them. To work around this, you can manually trigger your form submission through a click listener on the submit button.

Your form ID will be showing on your _lts array in the console. You need to update the code below for your ID. In this example, the form ID is 46 (where it says attach).

Therefore, my code snippet for this would be:

(function(){
function clickListener(){
if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = function (callback, thisArg) {
        thisArg = thisArg || window;
        for (var i = 0; i < this.length; i++) {
            callback.call(thisArg, this<i>, i, this);
        }
    };
}
var tracker = _lts.filter(function(object) {return object[0] === 'attach' && object[1].id === 46})[0][1] /*update ID 46 on this line*/
document.querySelectorAll("form input[type='submit']").forEach(function(element){element.addEventListener('click',function(){lts("submit",tracker)})})
};

if (_lts.length === 0){
  document.addEventListener('ltsCustomLeadReady', clickListener)
}
else clickListener();
})();

If your ID doesn’t match, you’ll get an exception in the console.

Help & support