Allow forms and fields properties to be undefined on FormTrackingOptions (close snowplow#935)

Author: Paul Boocock

libraries/browser-tracker-core/src/helpers.ts

@@ -489,7 +489,7 @@ export function getFilterByClass(criterion?: FilterCriterion<HTMLElement> | null
  *                             or {denylist: [array of allowable strings]}
  *                             or {filter: function (elt) {return whether to track the element}
  */
-export function getFilterByName<T extends { name: string }>(criterion: FilterCriterion<T>): (elt: T) => boolean {
+export function getFilterByName<T extends { name: string }>(criterion?: FilterCriterion<T>): (elt: T) => boolean {
   // If the criterion argument is not an object, add listeners to all elements
   if (criterion == null || typeof criterion !== 'object' || Array.isArray(criterion)) {
     return function () {

plugins/browser-plugin-form-tracking/src/helpers.ts

@@ -43,15 +43,17 @@ import {
   buildFormSubmission,
 } from '@snowplow/tracker-core';
 
-export interface FormTrackingOptions {
-  forms: FilterCriterion<HTMLElement>;
-  fields: FilterCriterion<TrackedHTMLElement> & { transform: transformFn };
+/** The form tracking configuration */
+export interface FormTrackingConfiguration {
+  /** The options which can be configured for the form tracking events */
+  options?: FormTrackingOptions;
+  /** The dyanmic context which will be evaluated for each form event */
+  context?: DynamicContext | null;
 }
 
-export interface FormConfiguration {
-  formFilter: (_: HTMLFormElement) => boolean;
-  fieldFilter: (_: TrackedHTMLElement) => boolean;
-  fieldTransform: transformFn;
+export interface FormTrackingOptions {
+  forms?: FilterCriterion<HTMLElement>;
+  fields?: FilterCriterion<TrackedHTMLElement> & { transform: transformFn };
 }
 
 export interface TrackedHTMLElementTagNameMap {
@@ -75,17 +77,20 @@ export const innerElementTags: Array<keyof TrackedHTMLElementTagNameMap> = ['tex
 
 const defaultTransformFn: transformFn = (x) => x;
 
+interface FormConfiguration {
+  formFilter: (_: HTMLFormElement) => boolean;
+  fieldFilter: (_: TrackedHTMLElement) => boolean;
+  fieldTransform: transformFn;
+}
+
 /*
  * Add submission event listeners to all form elements
  * Add value change event listeners to all mutable inner form elements
  */
-export function addFormListeners(
-  tracker: BrowserTracker,
-  formConfiguration?: FormTrackingOptions,
-  context?: DynamicContext | null
-) {
-  const trackingMarker = tracker.id + 'form',
-    config = getConfigurationForOptions(formConfiguration);
+export function addFormListeners(tracker: BrowserTracker, configuration: FormTrackingConfiguration) {
+  const { options, context } = configuration,
+    trackingMarker = tracker.id + 'form',
+    config = getConfigurationForOptions(options);
 
   Array.prototype.slice.call(document.getElementsByTagName('form')).forEach(function (form) {
     if (config.formFilter(form) && !form[trackingMarker]) {
@@ -143,8 +148,8 @@ function getConfigurationForOptions(options?: FormTrackingOptions) {
  *
  * @param object criterion {transform: function (elt) {return the result of transform function applied to element}
  */
-function getTransform(criterion: { transform: transformFn }): transformFn {
-  if (Object.prototype.hasOwnProperty.call(criterion, 'transform')) {
+function getTransform(criterion?: { transform: transformFn }): transformFn {
+  if (criterion && Object.prototype.hasOwnProperty.call(criterion, 'transform')) {
     return criterion.transform;
   }
 

plugins/browser-plugin-form-tracking/src/index.ts

@@ -29,8 +29,9 @@
  */
 
 import { BrowserPlugin, BrowserTracker } from '@snowplow/browser-tracker-core';
-import { DynamicContext } from '@snowplow/tracker-core';
-import { FormTrackingOptions, addFormListeners } from './helpers';
+import { addFormListeners, FormTrackingConfiguration } from './helpers';
+
+export { FormTrackingConfiguration } from './helpers';
 
 const _trackers: Record<string, BrowserTracker> = {};
 
@@ -45,14 +46,6 @@ export function FormTrackingPlugin(): BrowserPlugin {
   };
 }
 
-/** The form tracking configuration */
-export interface FormTrackingConfiguration {
-  /** The options which can be configured for the form tracking events */
-  options?: FormTrackingOptions;
-  /** The dyanmic context which will be evaluated for each form event */
-  context?: DynamicContext | null;
-}
-
 /**
  * Enables automatic form tracking
  * An event will be fired when a form field is changed or a form submitted.
@@ -65,14 +58,13 @@ export function enableFormTracking(
   configuration: FormTrackingConfiguration = {},
   trackers: Array<string> = Object.keys(_trackers)
 ) {
-  const { options, context } = configuration;
   trackers.forEach((t) => {
     if (_trackers[t]) {
       if (_trackers[t].sharedState.hasLoaded) {
-        addFormListeners(_trackers[t], options, context);
+        addFormListeners(_trackers[t], configuration);
       } else {
         _trackers[t].sharedState.registeredOnLoadHandlers.push(function () {
-          addFormListeners(_trackers[t], options, context);
+          addFormListeners(_trackers[t], configuration);
         });
       }
     }

plugins/browser-plugin-link-click-tracking/src/index.ts

@@ -104,17 +104,16 @@ export function enableLinkClickTracking(
   configuration: LinkClickTrackingConfiguration = {},
   trackers: Array<string> = Object.keys(_trackers)
 ) {
-  const { options, pseudoClicks, trackContent, context } = configuration;
   trackers.forEach((id) => {
     if (_trackers[id]) {
       if (_trackers[id].sharedState.hasLoaded) {
         // the load event has already fired, add the click listeners now
-        configureLinkClickTracking({ options, pseudoClicks, trackContent, context }, id);
+        configureLinkClickTracking(configuration, id);
         addClickListeners(id);
       } else {
         // defer until page has loaded
         _trackers[id].sharedState.registeredOnLoadHandlers.push(function () {
-          configureLinkClickTracking({ options, pseudoClicks, trackContent, context }, id);
+          configureLinkClickTracking(configuration, id);
           addClickListeners(id);
         });
       }
@@ -258,17 +257,7 @@ function addClickListener(tracker: string, element: HTMLAnchorElement | HTMLArea
  * whether to use pseudo click tracking, and what context to attach to link_click events
  */
 function configureLinkClickTracking(
-  {
-    options,
-    pseudoClicks,
-    trackContent,
-    context,
-  }: {
-    options?: FilterCriterion<HTMLElement> | null;
-    pseudoClicks?: boolean | null;
-    trackContent?: boolean | null;
-    context?: DynamicContext | null;
-  } = {},
+  { options, pseudoClicks, trackContent, context }: LinkClickTrackingConfiguration = {},
   tracker: string
 ) {
   _configuration[tracker] = {