Javascript tracker not tracking form submissions

For engineers Tracking SDKs
1

Hello all,
I’m new to snowplow and having challenges tracking forms via javascript tracker 2.7.0 (logged by clojure collector 1.1.0 into s3). Pageviews are tracking fine and I can see the logs in s3, but neither authored event or unstructured event tracking is working. I am following the tutorial here for form tracking. My goal at this point is just to get the form data into s3. Any help is much appreciated.

Here is all of the javascript tracking code. First I tried this, using the authored event:

<script type="text/javascript"> 

//Load js file
;(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","//myurl.com/assets/js/53477247898.js","sp001"));

//Create new tracker & load general parameters
window.sp001("newTracker", "tracker1", "i.myurl.com", { 
  appId: "mainwebsite",
  platform: "web",
  cookieDomain: ".myurl.com",
  cookieName: "_gs563_", 
  sessionCookieTimeout: 3600, 
  cookieLifetime: 315576
});

//Load pageview tracking
window.sp001('trackPageView');

//Load form tracking (authored event)
window.sp001('enableFormTracking');

</script>`

I also tried changing the authored event code to this, which didn’t work.

//Load form tracking (authored event)
sp001('enableFormTracking');

After the above authored events didn’t work, I tried adding the below unstructured event code. This also failed, as I did not see the form data in the s3 logs.

<script type="text/javascript"> 

//Load form tracking (unstructured event)
    $('#form001').submit(function(){
        var form_id = $(this).attr('id'); //get the form's id
        var email_address = $('input[name=form[email]]').val();	//get the email address
        window.sp001('trackUnstructEvent', { 	//tell sp this is an unstructured event
            schema: 'iglu:com.mycompany/submit_form/jsonschema/1-0-0', 	//tell sp this is a submit_form event
            data: {
                form: form_id,	//load the form's id
                email: email_address	//load the email address
            }
        });
    });
    
</script>

My form’s html:

<div id="form001" class="application-form w-form"> 
	<form action="http://myurl.com/form/submit?formId=3" class="w-clearfix" data-name="Application Form" id="application-form-1" method="post" name="application-form-1" autocomplete="off"> 
		<div class="w-embed"> 
			<input type="hidden" name="form[formId]" value="3" />
			<input type="hidden" name="form[formName]" value="form3" />
		</div>
		<input class="form-1-text-field w-input" data-name="form[first_name]" id="_form_first_name" maxlength="256" name="form[first_name]" placeholder="first name" required="required" type="text">
		<input class="form-1-text-field w-input" data-name="form[last_name]" id="_form_last_name" maxlength="256" name="form[last_name]" placeholder="last name" required="required" type="text">
		<input class="form-1-text-field w-input" data-name="form[company_name]" id="_form_company_name" maxlength="256" name="form[company_name]" placeholder="company name" required="required" type="text"> 
		<input class="form-1-text-field w-input" data-name="form[company_website]" id="_form_company_website" maxlength="256" name="form[company_website]" placeholder="company website" type="text">
		<input class="form-1-text-field w-input" data-name="form[email]" id="_form_email" maxlength="256" name="form[email]" placeholder="email" required="required" type="email"> 
		<input class="form-1-submit w-button" data-wait="please wait" id="form_input_application_submit" type="submit" value="submit"> 
	</form>
	<div class="w-form-done">
		<p>Thank you.
			<br>You'll hear from us soon.</p>
	</div>
	<div class="w-form-fail">
		<p>Error, please email us instead.</p>
	</div>
</div>
2

Hi @rob,

I managed to track changes and submissions for exact same form using enableFormTracking in JS tracker 2.7.0, so here’s two questions to help us debug this case:

  1. Do you invoke enableFormTracking before form is rendered (DOM node constructed)? It wouldn’t work if you create form dynamically (in SPA for example) and invoke enableFormTracking after that, because tracker have to attach callbacks to existing form.
  2. Do you see HTTP requests in your browsers’ network pane in developer tools? Something like http://i.myurl.com/i?stm=1490425140275&e=ue&ue_px=eyJzY2hlbW...

Regarding your second attempt with self-describing event - you need to host iglu:com.mycompany/submit_form/jsonschema/1-0-0 in your Iglu Registry OR use iglu:com.snowplowanalytics.snowplow/submit_form/jsonschema/1-0-0 (which is used by built-in form tracking) with valid body. Without it it’ll appear in rotated clojure collector logs, but won’t be validated on enrichment stage, which makes it pointless. By the way, when you mention “logs in s3”, do you mean Clojure Collector rotated logs or Enriched Event TSV? And how do find that event is missing? I suspect that you may missed it because it is base64-encoded.

1 Like
3

Hi @anton,
Thanks for pointing out that it is base64-encoded, that was the problem. I was not able to search the logs and find the form data due to that. Thanks!

4

@anton how one would go about point 1?

I was able to workaround the form beeing created after my script was loaded with a settimeout, it is bad but it works for Chrome.
I was not able to make it work for Firefox even with a timeout.
It seems that Firefox falls into the DOMContentLoaded block and Chrome falls in the Webkit test block at function addReadyListener()(https://github.com/snowplow/snowplow-javascript-tracker/blob/ed751aaf8486f72d0abc0f0f880754c3dd61aa65/src/js/snowplow.js#L171)

Are there any solution for this case?

Thank you.

1 Like