Form Tracking not working with dynamically added fields in form that exists

For engineers Tracking SDKs
1

Hi all,

We are having some issues with the JavaScript Form Tracking.

One of the new forms we’re developing is being built with KnockoutJS. The FORM tag is made when the page loads just like normal. However, the fields inside do not appear in the DOM until the form is opened by clicking on a button.

These fields that are generated are not being tracked with the “enableFormTracking” functionality in the JavaScript collector, even when you re-run the function with snowplow(“enableFormTracking”).

After doing some investigation, we can see that the when the code runs the, a variable is added to the DOM element FORM tag which is set to TRUE. The variable being set is called “snowplow_cf_form”.

When you now re-run the snowplow(“enableFormTracking”) it fails to re-attach the eventListeners because this variable is set to TRUE (and of course this is the behaviour which you want in normal circumstances as we don’t want to attach more eventListeners).

So… how can we change this to work with our new forms? Can the form.js be changed to add the variable to every form field instead of the form tag?

The form.js file can be found in github.

2

Hi @Koen87 - thanks for the detailed summary of the problem.

Attaching the tracking marker on a per form field basis might be an effective workaround.

Can you create a ticket for this in the Snowplow JavaScript Tracker project (link back to this thread) for further discussion?

3

Just wanted to update the ticket with something new as I think its related.

Our form is dynamically generated on the page, after wards we run the “enableFormTracking”, the input fields are now ready for tracking. At the same time as running “enableFormTracking” again we also update some of our custom context with new updated data which we want to pass with every change_form ( we pass different information per form step via the custom context).

It seems that the custom context can’t be changed after we run “enableFormTracking” for the first time?

4

Hi @Koen87 - this discussion thread isn’t a ticket - if you want to feed your issues into the JavaScript Tracker roadmap, please create a ticket in the GitHub repo as discussed above.