Waiting for hsvalidatedsubmit event to complete


#1

We use a mix of both landing page forms and embedded. For this reason we’re listening for hsvalidatedsubmit for conversion tracking purposes. Inside the hsvalidatedsubmit event we push values to GTM’s data layer. We then have GTM listening for the appropriate values and then triggering goal/conversion events.

Recently we introduced a new conversion tag for DoubleClick, and we’ve found we’re getting inconsistency caused by the page redirecting/reloading before the conversion has resolved.

Is there a way to delay inside hsvalidatedsubmit, or is there a better method of creating a listener for form completions?


Please create a Global onFormSubmit Callback
#2

@krpurk
This is the precise reason I keep making suggestions for global onFormSubmit callbacks: Please create a Global onFormSubmit Callback

We do the exact same thing for our HubSpot clients and the ONLY way we can delay the redirect from happening is by emulating a sleep() functionality using a busy wait I will admit that this is a VERY bad idea and is very frowned upon in general by front-end developers. But because we only need to busy wait for a fraction of a second (generally 150-200ms is more than enough to allow the request to complete) it hasn’t caused us any issues.

    function sleep( milliseconds ) {
        var milliseconds = milliseconds;
        var start = new Date().getTime();
        for ( var i = 0; i < 1e7; i++ ) {
            if ( ( new Date().getTime() - start) > milliseconds ) {
                break;
            }
        }
    } 

    sleep( 250 ); // Would perform a 0.25 second busy wait

#3

@derekcavaliero

Thanks for the reply here. Yes, I couldn’t agree more with the Global onFormSubmit callback. It’s quite frustrating as it seems like such an easy to understand need. I’m about 2 years deep implementing Hubspot tracking via the listener and have come against this issue several times. With each issue I could manage a partial workaround that would work a greater percentage of time, but frankly they were never 100% reliable.

Recently I’ve had to work with a Marketo setup for one of our brands and was very pleased to find they have a very nice set of callbacks in their form api that solve this type of need well.

I’ll reply in your linked thread as well commenting my interest on the subject.

Thanks again.


#4

@krpurk No problem and thanks for expressing interest in the global callbacks. Marketo - while most of their other platform functionality isn’t very developer friendly - their forms actually are (minus the terrible HTML markup they generate).

One thing you can do to make sure you only busy wait on forms that actually redirect is to parse the hs_context hidden form field value and see if a redirectUrl is set:

window.addEventListener( 'hsvalidatedsubmit', function( e ) {

    var form = e.target;

    // push an event to GTM's dataLayer here - or execute other tracking code

    var ctx = JSON.parse( form.children.hs_context.value );
    if ( ctx.redirectUrl ) {
        sleep( 250 ); // Delay redirect for 250 ms ONLY if the form is set to redirect and not display an inline message.
    }

}, false );