[SOLVED] How can I treat a new array element before the POST request

How can I treat a new array element before the POST request

I am currently developing a script that would allow me to retrieve the username of a connection attempt on websites. But the main constraint is that I would not able to edit the HTML of the page, just to add my script(s) via a Tag Manager.

I must explain what tool I use. I am working with web tracking tool SnowPlow Analytics. It works on the same basis that Google Analytics, with an array _snaq that (will) contains data to treat. The heart of the problem is that even if the data are well added in the array, the main script (sp.js) don't have the time make his job and to send a request to the CloudFront Collector before the POST request.

Here is the example page that I use, and the script to catch the data:

Page:

<html>
    <head>
        <title>Sign In Example</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <!-- SnowPlow modified -->
            <script type="text/javascript">
                var _snaq=_snaq||[];
                _snaq.push(['setCollectorCf','xxxxxxxxxxxxxx']);
                _snaq.push(['trackPageView']);
                _snaq.push(['enableLinkTracking']);
                /*
                * Here is the anonymous function to include properly the snowplow.js
                * minified: d1fc8wv8zag5ca.cloudfront.net/0.11.1/sp.js
                * github : github.com/snowplow/snowplow/tree/master/1-trackers/javascript-tracker
                */
            </script>
         <!--/ SnowPlow modified -->
         <script src="js/jquery.min.js"></script>
         <script async="" type="text/javascript" src="js/getLogin.min.js"></script>
    </head>
     <body>
        <form class="formClass">
            <h2>Please sign in</h2>
            <input type="text" class="textInput" placeholder="Email address" />
            <input type="password" class="passwordInput" placeholder="Password" />
            <label class="checkbox">
                <input type="checkbox" value="remember-me" /> Remember me
            </label>
            <button class="submitButton" type="submit">Sign in</button>
        </form>
    </body>
</html>`

Script:

var checked, cb = $('input[value="remember-me"]')[0], butt = $('button[type="submit"]')[0];
if(cb.checked)
    checked = 1.0;
else
    checked = 0.0;

function snaqPush()
{
    _snaq.push(['trackStructEvent', 'connection', 'connectionAttempt', 'email',  $('input[placeholder = "Email address"]').val(), checked]);
}

cb.addEventListener("click", function(e)
{
    if(cb.checked)
        checked = 1.0;
    else
        checked = 0.0;
}, false);

butt.addEventListener("click", function()
    {
        snaqPush(); //or directly the _snaq push([...]) here
        _snaq.push(function()
        {
            setTimeout(function(){}, 1000);
        }); //I have try the setTimeout in and out of a _snaq.push, and it stills not work
    });

N.B: the POST request works with a breakpoint just after the _snaq.push() containing the data!

Thanks in advance for your help!

Solution

You should tie an event listener to the form's submit action rather than the button click. This way you can make the analytics call prior to returning true thus allowing the submit to complete.