Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow enableFormTracking to capture dynamic form changes #748

Closed
emiliauskas-fuzzy opened this issue Sep 28, 2019 · 0 comments
Closed

Allow enableFormTracking to capture dynamic form changes #748

emiliauskas-fuzzy opened this issue Sep 28, 2019 · 0 comments
Labels
category:browser About the browser-specific code. good first issue Good issue for a first time contributor. priority:low Not on the roadmap. type:enhancement New features or improvements to existing features.

Comments

@emiliauskas-fuzzy
Copy link

Currently, the form tracker initializes all forms and their elements once during 1st call to window.snowplow('enableFormTracking'). When calling it again it skips any forms that had been processed already do to setting a bool flag to each form and checking it on next calls -

if (formFilter(form) && !form[trackingMarker]) {

This prevents from refreshing existing forms which have dynamically added elements. Here is an example:

  1. Go to this page: https://stackblitz.com/edit/angular-8-dynamic-reactive-forms-example

  2. In this page choose 1 ticket from the dropdown

  3. Open dev console and call this code - just replace the collector url before:
    `
    ;(function () {
    ;(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","//d1fc8wv8zag5ca.cloudfront.net/2.10.2/sp.js","snowplow"));

    window.snowplow('newTracker', 'cf1',
    '<<<<<<----enter valid collector url----->>>>>>',
    //'52.49.112.190:8080', // snowplow-mini
    {
    appId: 'test-form-app',
    platform: 'web',
    cookieDomain: '<<<<<<----replace domain----->>>>>>',
    sessionCookieTimeout: 3600,
    post: true
    });
    }());
    snowplow('enableFormTracking');
    `

  4. Try to change any value in 1st ticket dropdown and observe if change_form event is fired (it should be)

  5. Then choose 2 tickets from the dropdown

  6. In dev console call snowplow('enableFormTracking');

  7. Try to change some values in 2nd ticket and observe if change_form event is fired (it shouldn't be fired)

My suggested solution would be just moving the if condition 2nd part !form[trackingMarker] to this place

helpers.addEventListener(form, 'submit', getFormSubmissionListener(context));

This will avoid duplicating form submit event listener and will allow refreshing newly added elements in the form. Duplication of existing element listeners will be avoided as it is tracked in a separate bool flag array.

For reference see discussion here: https://discourse.snowplowanalytics.com/t/refreshformtracking-for-capturing-dynamic-form-changes/3209/4

@paulboocock paulboocock added category:browser About the browser-specific code. priority:low Not on the roadmap. type:enhancement New features or improvements to existing features. labels Feb 6, 2020
@paulboocock paulboocock added the good first issue Good issue for a first time contributor. label Feb 10, 2020
lioneltay added a commit to lioneltay/snowplow-javascript-tracker that referenced this issue Oct 1, 2021
lioneltay added a commit to lioneltay/snowplow-javascript-tracker that referenced this issue Oct 1, 2021
@paulboocock paulboocock changed the title enableFormTracking doesn't capture dynamic form changes Allow enableFormTracking to capture dynamic form changes Jan 5, 2022
@greg-el greg-el mentioned this issue Jan 6, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
category:browser About the browser-specific code. good first issue Good issue for a first time contributor. priority:low Not on the roadmap. type:enhancement New features or improvements to existing features.
Projects
None yet
2 participants