How do I capture form conversions?

Form Analytics will automatically detect conversions (aka submissions) on most forms. It does this by adding an event listener to the submit event of the form. When the form's submit event occurs, Lucky Orange sets a cookie saying that the form was submitted. On the next page loaded (e.g. a Thank You or Success page), Lucky Orange checks to see if the cookie is set, and if so, marks the form as a successful conversion/submission and clears the cookie from the browser.

Note: You must have the Lucky Orange tracking code on your Thank You page for the cookie to be detected and the form to be marked as submitted.

What if my form doesn't use the submit event?

If your form doesn't use the standard submit machinery, an event won't be fired. Thus, Lucky Orange won't be aware of any conversions because they're taking place behind the scenes. In this case, you can make an API call whenever you consider your form to be submitted. In the callback function that handles the post-submission response, you can manually trigger a "successful" form conversion via the following API call:

_loq.push( ["submit_form", [b]form[/b], [b]nopagereload[/b]] );

In the code above, you just need to supply two arguments:

  • form Object | String — The form object itself or the form's name or id.
  • nopagereload Boolean — Whether the form is submitted without a page reload or redirect. If the form is submitted asynchronously, for example, you would pass true. Otherwise, false.

Examples

Imagine we have a simple form that accepts a user's birthday, and that's it. That might look like this:

<form action="/add-birthday" method="post" name="birthday_form" id="birthday_form">
    [comment text="Date-related fields like month/day/year would probably go here" lang="html"]
    <input type="submit" id="add-birthday-btn" value="Add Birthday">
</form>

If the form isn't being submitted via AJAX, you'd want to add something like this to your handler:

var addButtonClickHandler = function(event) {
    var button = event.target,
        form = button.parentElement;
    [comment text="Ensure a queue is available" lang="js"]
    window._loq = window._loq || [];
    [comment text="Save a `submitted` cookie for `birthday_form`." lang="js"]
    [comment text="This will be checked on the next page." lang="js"]
    window._loq.push(["submit_form", [b]form.name[/b]]);
};

If the form is being submitted without a page reload, you might want to add something like this:

[comment text="When Add Birthday button is clicked, submit the form via AJAX" lang="js"]
$('#add-birthday-btn').on('click', function(e) {
    e.preventDefault();
    var $form = $('#birthday_form');
    $.post($form.attr('action'), $form.serialize(), function(response) {
        if ( !response.success )
            return;
        [comment text="Ensure a queue is available" lang="js"]
        window._loq = window._loq || [];
        [comment text="Mark `birthday_form` as fully submitted without any page reload." lang="js"]
        window._loq.push(["submit_form", [b]$form.get(0)[/b], [b]true[/b]]);
    }); 
});

Still need help? Contact Us Contact Us