Form sumbit event not firing everytime when the form submits

[Amandeep_Singh]

Hi,

I have been continuously facing this problem. Reliability of form submit event to be fired is very less. Out of 10 times i am getting form submit event for 1-2 times. I have upgraded from tracker version 2.8 to 2.14 in the hope that this would have been fixed because the same issue has been discussed by someone in the discourse earlier.

Few points i would like to tell.

• I am not preventing default action of form submit i.e event.preventDefault().

• I have tried changing pageUnloadTimer values. I even set it to pageUnloadTimer: 2000. 2 seconds are more than sufficient for the events to be sent before page unloads.

• stateStorageStrategy is stateStorageStrategy: "cookieAndLocalStorage"

Below is the tracking snippet

<script type="text/javascript" async=1>

        ;(function(p,l,o,w,i,n,g){if(!p[i]){p.GlobalSnowplowNamespace=p.GlobalSnowplowNamespace||[];
        p.GlobalSnowplowNamespace.push(i);p[i]=function(){(p[i].q=p[i].q||[]).push(arguments)
        };p[i].q=p[i].q||[];n=l.createElement(o);g=l.getElementsByTagName(o)[0];n.async=1;
        n.src=w;g.parentNode.insertBefore(n,g)}}(window,document,"script","http://ip_address/static/sp2.js","snowplow_2"));

        window.snowplow_2('newTracker', 'datasleek_sp', 'ip_address', { // Initialise a tracker
          encodeBase64: false, // Default is true
          appId: 'datasleek-development', // Site ID can be anything you want. Set it if you're tracking more than one site in this account
          cookieSecure: false,  // Incase you website is running on https, assign "true" here. Otherewise cookies won't persist
          eventMethod: "post",
          postPath: "/com.snowplowanalytics.snowplow/tp2/" ,
          stateStorageStrategy: "cookieAndLocalStorage",
          pageUnloadTimer: 2000, 
        });


        //window.snowplow_2('enableActivityTracking', 1, 1); // Ping every 1 seconds after 1 seconds of pageload
        window.snowplow_2('trackPageView', null);        
	window.onload = function() { 
				     window.snowplow_2('enableFormTracking');
				     console.log("enableFormTracking called");
				   };

    </script>

Your help is indeed needed.

Thanks & Regards
Amandeep Singh

[Colm]

Hi @Amandeep_Singh,

Form tracking will add listeners to form html elements that exist when it is called - so the first two things to check are whether all of your forms have ‘form’ html tags, and whether any of them are rendering after you have called enableFormTracking (looks like you’re calling it on page load, so if any of them are dynamic, they may be missed).

Could you let us know if those two things are the case?

Additionally, could you point me to which issue you’re referring to that has been raised previously? The only form tracking related threads I can find have all been explained and resolved, but if there is one that hasn’t I’d like to take a look.

Best,

[Amandeep_Singh]

Hi @Colm,

Thanks for the suggestions. I tried using your suggestions still it’s not working.

Below is the form which is hard coded in the html. page. I am not creating it dynamically.

                    <form class="theme-form" method="post" id="contact-form"> 
                        {% csrf_token %}
                        <div class="form-row">
                            <div class="col-md-6">
                                <label for="name">First Name</label>
                                <input type="text" class="form-control" required="required" id="name" placeholder="Enter Your name"
                                    required="">
                            </div>
                            <div class="col-md-6">
                                <label for="email">Last Name</label>
                                <input type="text" class="form-control" required="required" id="last-name" placeholder="Email" required="">
                            </div>
                            <div class="col-md-6">
                                <label for="review">Phone number</label>
                                <input type="text" class="form-control" required="required" id="review" placeholder="Enter your number"
                                    required="">
                            </div>
                            <div class="col-md-6">
                                <label for="email">Email</label>
                                <input type="text" class="form-control" required="required" id="email" placeholder="Email" required="">
                            </div>
                            <div class="col-md-12">
                                <label for="review">Write Your Message</label>
                                <textarea class="form-control" placeholder="Write Your Message"
                                    id="exampleFormControlTextarea1" rows="6" required="required"></textarea>
                            </div>
                            <div class="col-md-12">
                                <button class="btn btn-solid" type="submit">Send Your Message</button>
                            </div>
                        </div>
                    </form>

Below is the script i used to make sure enableFormTracking is called after form is loaded

var formLoadedInterval = setInterval(function()
					   {
					     if($("#contact-form").length)
					       {
                              clearInterval(formLoadedInterval);
						       window.snowplow_2('enableFormTracking');
				     		   console.log("enableFormTracking called");
					       }
					    },1000);

One point i would like to make that i am able to see focus_form and change_form events in server console. There are no issues with these two events. What i am not getting to see is submit_form event.

As you have asked for the case where the same issue has been discussed. Please find the following link to that case.

Form submissions tracker - not hermetic

Hi, We use snowplow javascript tracker to collect form submissions and changes. We use UTMs in order to know where we got the form submissions from, and it seems that the tracker misses a lot of those form submissions! I know it can’t be hermetic, but it seems to actually miss most of them. Anyone else encountered in such a problem? Thanks, Dor

Form tracking is an integral part of our application. We really need to fix this. Your help is needed the most. Please let me know if you need any other information from my side.

Regards
Amandeep Singh

[PaulBoocock]

Hi,
It looks like your <form> has no action or onsubmit property i.e. <form action="/submit.php"> or similar.

This means the JavaScript tracker can’t be sure when a submission of the form has occurred. I assume you are handling the submission of the form in an event handler somewhere?
If so, try setting action to action="javascript:void(0);" or onsubmit="return false;", they should have no effect but should let the JavaScript tracker hook into the forms submission.

[Amandeep_Singh]

Hi @PaulBoocock

I didn’t use action attribute because if it is not specified then form is submitted at the same url from which it has been rendered.I am not handling form submit event. Situation is pretty simple, form is submitted to the server and server returns the page. I added action attribute explicitly. I tried submitting form 3-4 times. Out of which only once submit event was tracked but this time submit event post request hit two time for the same submission.

If you want to check at your end then you may look at this url http://35.223.37.41/contact/

This is the demo website where we trial and test snowplow features.

Please let me know if you need to know any other thing from my end.

Thanks and Regards
Amandeep Singh

[PaulBoocock]

There is certainly something strange going on with this form.

I’ve noticed a pattern, on the site mentioned above, that seems to be causing this issue. I’m going to assume this has something to do with the form validation or something that is executing on focus.

If I’m focused in a text area when I click the button, the submit_form event will not fire.
If I click out of the form and then click submit then the submit_form event will fire.

This is the usual behaviour of form tracking, if we try this simple example below, you should see submit_form fire whether the text box has focus or not as the button is clicked:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <script type="text/javascript">
            ;(function(p,l,o,w,i,n,g){if(!p[i]){p.GlobalSnowplowNamespace=p.GlobalSnowplowNamespace||[];
            p.GlobalSnowplowNamespace.push(i);p[i]=function(){(p[i].q=p[i].q||[]).push(arguments)
            };p[i].q=p[i].q||[];n=l.createElement(o);g=l.getElementsByTagName(o)[0];n.async=1;
            n.src=w;g.parentNode.insertBefore(n,g)}}(window,document,"script","sp.js","snowplow"));
        </script>
        <script>
            window.snowplow('newTracker', 'sp', 'localhost:9090', {
                appId: 'test',
                encodeBase64: false
            });
            window.snowplow('enableFormTracking');
        </script>
    <body>
        <form id="the-form">
            <input type="text"/>
            <input type="submit" />
        </form>
    </body>
</html>

Hope this helps your investigation.

[Amandeep_Singh]

Hi @PaulBoocock

I have checked server logs. I have got 8 form submissions. Can you please tell me how many times did you submit the form ?

I am really thankful to you that you are helping me out.

Regards
Amandeep Singh

[PaulBoocock]

I didn’t count after the first couple as I cottoned on to it being an issue around the focus on the form causing the event not to trigger. Looking at the Network tab though, it was quite clear when it was sending and when it wasn’t. It was all driven by whether my cursor was focused in a text box or not when clicking Submit.

[Amandeep_Singh]

Hi @PaulBoocock

Thanks for the explanation and prompt reply. I have to investigate this further. I will let you know.

Regards
Amandeep Singh

[mbondarenko]

I would check if you have event.preventDefault(); on any form buttons as that could stop event bubbling to snowplow code.