@amplitude/plugin-autocapture-browser 1.0.0-beta.2 → 1.0.0-beta.3

package/lib/cjs/autocapture/track-action-click.d.ts

@@ -0,0 +1,13 @@
+import { AllWindowObservables, AutoCaptureOptionsWithDefaults } from 'src/autocapture-plugin';
+import { ActionType } from 'src/typings/autocapture';
+import { BrowserClient } from '@amplitude/analytics-types';
+import { shouldTrackEvent } from '../helpers';
+export declare function trackActionClick({ amplitude, allObservables, options, getEventProperties, shouldTrackEvent, shouldTrackActionClick, }: {
+    amplitude: BrowserClient;
+    allObservables: AllWindowObservables;
+    options: AutoCaptureOptionsWithDefaults;
+    getEventProperties: (actionType: ActionType, element: Element) => Record<string, any>;
+    shouldTrackActionClick: shouldTrackEvent;
+    shouldTrackEvent: shouldTrackEvent;
+}): import("rxjs").Subscription;
+//# sourceMappingURL=track-action-click.d.ts.map

package/lib/cjs/autocapture/track-action-click.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"track-action-click.d.ts","sourceRoot":"","sources":["../../../src/autocapture/track-action-click.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,8BAA8B,EAG/B,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAkD,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAG9F,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,cAAc,EACd,OAAO,EACP,kBAAkB,EAClB,gBAAgB,EAChB,sBAAsB,GACvB,EAAE;IACD,SAAS,EAAE,aAAa,CAAC;IACzB,cAAc,EAAE,oBAAoB,CAAC;IACrC,OAAO,EAAE,8BAA8B,CAAC;IACxC,kBAAkB,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACtF,sBAAsB,EAAE,gBAAgB,CAAC;IACzC,gBAAgB,EAAE,gBAAgB,CAAC;CACpC,+BAoDA"}

package/lib/cjs/autocapture/track-action-click.js

@@ -0,0 +1,43 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.trackActionClick = void 0;
+var tslib_1 = require("tslib");
+var rxjs_1 = require("rxjs");
+var helpers_1 = require("../helpers");
+var constants_1 = require("../constants");
+function trackActionClick(_a) {
+    var amplitude = _a.amplitude, allObservables = _a.allObservables, options = _a.options, getEventProperties = _a.getEventProperties, shouldTrackEvent = _a.shouldTrackEvent, shouldTrackActionClick = _a.shouldTrackActionClick;
+    var clickObservable = allObservables.clickObservable, mutationObservable = allObservables.mutationObservable, navigateObservable = allObservables.navigateObservable;
+    var filteredClickObservable = clickObservable.pipe((0, rxjs_1.filter)(function (click) {
+        // Filter out regularly tracked click events that are already handled in trackClicks
+        return !shouldTrackEvent('click', click.closestTrackedAncestor);
+    }), (0, rxjs_1.map)(function (click) {
+        // overwrite the closestTrackedAncestor with the closest element that is on the actionClickAllowlist
+        var closestActionClickEl = (0, helpers_1.getClosestElement)(click.event.target, options.actionClickAllowlist);
+        click.closestTrackedAncestor = closestActionClickEl;
+        // overwrite the targetElementProperties with the properties of the closestActionClickEl
+        if (click.closestTrackedAncestor !== null) {
+            click.targetElementProperties = getEventProperties(click.type, click.closestTrackedAncestor);
+        }
+        return click;
+    }), (0, rxjs_1.filter)(helpers_1.filterOutNonTrackableEvents), (0, rxjs_1.filter)(function (clickEvent) {
+        // Only track change on elements that should be tracked
+        return shouldTrackActionClick('click', clickEvent.closestTrackedAncestor);
+    }));
+    var changeObservables = [mutationObservable];
+    /* istanbul ignore next */
+    if (navigateObservable) {
+        changeObservables.push(navigateObservable);
+    }
+    var mutationOrNavigate = rxjs_1.merge.apply(void 0, tslib_1.__spreadArray([], tslib_1.__read(changeObservables), false));
+    var actionClicks = filteredClickObservable.pipe(
+    // If a mutation occurs within 0.5 seconds of a click event (timeout({ first: 500 })), it emits the original first click event.
+    (0, rxjs_1.switchMap)(function (click) {
+        return mutationOrNavigate.pipe((0, rxjs_1.timeout)({ first: 500, with: function () { return rxjs_1.EMPTY; } }), (0, rxjs_1.map)(function () { return click; }));
+    }));
+    return actionClicks.subscribe(function (actionClick) {
+        /* istanbul ignore next */
+        amplitude === null || amplitude === void 0 ? void 0 : amplitude.track(constants_1.AMPLITUDE_ELEMENT_CLICKED_EVENT, getEventProperties('click', actionClick.closestTrackedAncestor));
+    });
+}
+exports.trackActionClick = trackActionClick;
+//# sourceMappingURL=track-action-click.js.map

package/lib/cjs/autocapture/track-action-click.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"track-action-click.js","sourceRoot":"","sources":["../../../src/autocapture/track-action-click.ts"],"names":[],"mappings":";;;AAMA,6BAAqE;AAGrE,sCAA8F;AAC9F,0CAA+D;AAE/D,SAAgB,gBAAgB,CAAC,EAchC;QAbC,SAAS,eAAA,EACT,cAAc,oBAAA,EACd,OAAO,aAAA,EACP,kBAAkB,wBAAA,EAClB,gBAAgB,sBAAA,EAChB,sBAAsB,4BAAA;IASd,IAAA,eAAe,GAA6C,cAAc,gBAA3D,EAAE,kBAAkB,GAAyB,cAAc,mBAAvC,EAAE,kBAAkB,GAAK,cAAc,mBAAnB,CAAoB;IAEnF,IAAM,uBAAuB,GAAG,eAAe,CAAC,IAAI,CAClD,IAAA,aAAM,EAAC,UAAC,KAAK;QACX,oFAAoF;QACpF,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,KAAK,CAAC,sBAAsB,CAAC,CAAC;IAClE,CAAC,CAAC,EACF,IAAA,UAAG,EAAC,UAAC,KAAK;QACR,oGAAoG;QACpG,IAAM,oBAAoB,GAAG,IAAA,2BAAiB,EAAC,KAAK,CAAC,KAAK,CAAC,MAAiB,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;QAC5G,KAAK,CAAC,sBAAsB,GAAG,oBAA+B,CAAC;QAE/D,wFAAwF;QACxF,IAAI,KAAK,CAAC,sBAAsB,KAAK,IAAI,EAAE;YACzC,KAAK,CAAC,uBAAuB,GAAG,kBAAkB,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,sBAAsB,CAAC,CAAC;SAC9F;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,EACF,IAAA,aAAM,EAAC,qCAA2B,CAAC,EACnC,IAAA,aAAM,EAAC,UAAC,UAAU;QAChB,uDAAuD;QACvD,OAAO,sBAAsB,CAAC,OAAO,EAAE,UAAU,CAAC,sBAAsB,CAAC,CAAC;IAC5E,CAAC,CAAC,CACH,CAAC;IAEF,IAAM,iBAAiB,GAEnB,CAAC,kBAAkB,CAAC,CAAC;IACzB,0BAA0B;IAC1B,IAAI,kBAAkB,EAAE;QACtB,iBAAiB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;KAC5C;IACD,IAAM,kBAAkB,GAAG,YAAK,wDAAI,iBAAiB,UAAC,CAAC;IAEvD,IAAM,YAAY,GAAG,uBAAuB,CAAC,IAAI;IAC/C,+HAA+H;IAC/H,IAAA,gBAAS,EAAC,UAAC,KAAK;QACd,OAAA,kBAAkB,CAAC,IAAI,CACrB,IAAA,cAAO,EAAC,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,cAAM,OAAA,YAAK,EAAL,CAAK,EAAE,CAAC,EAC1C,IAAA,UAAG,EAAC,cAAM,OAAA,KAAK,EAAL,CAAK,CAAC,CACjB;IAHD,CAGC,CACF,CACF,CAAC;IAEF,OAAO,YAAY,CAAC,SAAS,CAAC,UAAC,WAAW;QACxC,0BAA0B;QAC1B,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,KAAK,CACd,2CAA+B,EAC/B,kBAAkB,CAAC,OAAO,EAAG,WAAwD,CAAC,sBAAsB,CAAC,CAC9G,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC;AAlED,4CAkEC","sourcesContent":["import {\n  AllWindowObservables,\n  AutoCaptureOptionsWithDefaults,\n  ElementBasedTimestampedEvent,\n  ObservablesEnum,\n} from 'src/autocapture-plugin';\nimport { filter, map, switchMap, merge, timeout, EMPTY } from 'rxjs';\nimport { ActionType } from 'src/typings/autocapture';\nimport { BrowserClient } from '@amplitude/analytics-types';\nimport { filterOutNonTrackableEvents, getClosestElement, shouldTrackEvent } from '../helpers';\nimport { AMPLITUDE_ELEMENT_CLICKED_EVENT } from '../constants';\n\nexport function trackActionClick({\n  amplitude,\n  allObservables,\n  options,\n  getEventProperties,\n  shouldTrackEvent,\n  shouldTrackActionClick,\n}: {\n  amplitude: BrowserClient;\n  allObservables: AllWindowObservables;\n  options: AutoCaptureOptionsWithDefaults;\n  getEventProperties: (actionType: ActionType, element: Element) => Record<string, any>;\n  shouldTrackActionClick: shouldTrackEvent;\n  shouldTrackEvent: shouldTrackEvent;\n}) {\n  const { clickObservable, mutationObservable, navigateObservable } = allObservables;\n\n  const filteredClickObservable = clickObservable.pipe(\n    filter((click) => {\n      // Filter out regularly tracked click events that are already handled in trackClicks\n      return !shouldTrackEvent('click', click.closestTrackedAncestor);\n    }),\n    map((click) => {\n      // overwrite the closestTrackedAncestor with the closest element that is on the actionClickAllowlist\n      const closestActionClickEl = getClosestElement(click.event.target as Element, options.actionClickAllowlist);\n      click.closestTrackedAncestor = closestActionClickEl as Element;\n\n      // overwrite the targetElementProperties with the properties of the closestActionClickEl\n      if (click.closestTrackedAncestor !== null) {\n        click.targetElementProperties = getEventProperties(click.type, click.closestTrackedAncestor);\n      }\n      return click;\n    }),\n    filter(filterOutNonTrackableEvents),\n    filter((clickEvent) => {\n      // Only track change on elements that should be tracked\n      return shouldTrackActionClick('click', clickEvent.closestTrackedAncestor);\n    }),\n  );\n\n  const changeObservables: Array<\n    AllWindowObservables[ObservablesEnum.MutationObservable] | AllWindowObservables[ObservablesEnum.NavigateObservable]\n  > = [mutationObservable];\n  /* istanbul ignore next */\n  if (navigateObservable) {\n    changeObservables.push(navigateObservable);\n  }\n  const mutationOrNavigate = merge(...changeObservables);\n\n  const actionClicks = filteredClickObservable.pipe(\n    // If a mutation occurs within 0.5 seconds of a click event (timeout({ first: 500 })), it emits the original first click event.\n    switchMap((click) =>\n      mutationOrNavigate.pipe(\n        timeout({ first: 500, with: () => EMPTY }),\n        map(() => click),\n      ),\n    ),\n  );\n\n  return actionClicks.subscribe((actionClick) => {\n    /* istanbul ignore next */\n    amplitude?.track(\n      AMPLITUDE_ELEMENT_CLICKED_EVENT,\n      getEventProperties('click', (actionClick as ElementBasedTimestampedEvent<MouseEvent>).closestTrackedAncestor),\n    );\n  });\n}\n"]}

package/lib/cjs/autocapture/track-change.d.ts

@@ -0,0 +1,11 @@
+import { AllWindowObservables } from 'src/autocapture-plugin';
+import { ActionType } from 'src/typings/autocapture';
+import { BrowserClient } from '@amplitude/analytics-types';
+import { shouldTrackEvent } from '../helpers';
+export declare function trackChange({ amplitude, allObservables, getEventProperties, shouldTrackEvent, }: {
+    amplitude: BrowserClient;
+    allObservables: AllWindowObservables;
+    getEventProperties: (actionType: ActionType, element: Element) => Record<string, any>;
+    shouldTrackEvent: shouldTrackEvent;
+}): import("rxjs").Subscription;
+//# sourceMappingURL=track-change.d.ts.map

package/lib/cjs/autocapture/track-change.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"track-change.d.ts","sourceRoot":"","sources":["../../../src/autocapture/track-change.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAA+B,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAG3E,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,cAAc,EACd,kBAAkB,EAClB,gBAAgB,GACjB,EAAE;IACD,SAAS,EAAE,aAAa,CAAC;IACzB,cAAc,EAAE,oBAAoB,CAAC;IACrC,kBAAkB,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACtF,gBAAgB,EAAE,gBAAgB,CAAC;CACpC,+BAeA"}

package/lib/cjs/autocapture/track-change.js

@@ -0,0 +1,19 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.trackChange = void 0;
+var rxjs_1 = require("rxjs");
+var helpers_1 = require("../helpers");
+var constants_1 = require("../constants");
+function trackChange(_a) {
+    var amplitude = _a.amplitude, allObservables = _a.allObservables, getEventProperties = _a.getEventProperties, shouldTrackEvent = _a.shouldTrackEvent;
+    var changeObservable = allObservables.changeObservable;
+    var filteredChangeObservable = changeObservable.pipe((0, rxjs_1.filter)(helpers_1.filterOutNonTrackableEvents), (0, rxjs_1.filter)(function (changeEvent) {
+        // Only track change on elements that should be tracked,
+        return shouldTrackEvent('change', changeEvent.closestTrackedAncestor);
+    }));
+    return filteredChangeObservable.subscribe(function (changeEvent) {
+        /* istanbul ignore next */
+        amplitude === null || amplitude === void 0 ? void 0 : amplitude.track(constants_1.AMPLITUDE_ELEMENT_CHANGED_EVENT, getEventProperties('change', changeEvent.closestTrackedAncestor));
+    });
+}
+exports.trackChange = trackChange;
+//# sourceMappingURL=track-change.js.map

package/lib/cjs/autocapture/track-change.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"track-change.js","sourceRoot":"","sources":["../../../src/autocapture/track-change.ts"],"names":[],"mappings":";;AACA,6BAA8B;AAG9B,sCAA2E;AAC3E,0CAA+D;AAE/D,SAAgB,WAAW,CAAC,EAU3B;QATC,SAAS,eAAA,EACT,cAAc,oBAAA,EACd,kBAAkB,wBAAA,EAClB,gBAAgB,sBAAA;IAOR,IAAA,gBAAgB,GAAK,cAAc,iBAAnB,CAAoB;IAE5C,IAAM,wBAAwB,GAAG,gBAAgB,CAAC,IAAI,CACpD,IAAA,aAAM,EAAC,qCAA2B,CAAC,EACnC,IAAA,aAAM,EAAC,UAAC,WAAW;QACjB,wDAAwD;QACxD,OAAO,gBAAgB,CAAC,QAAQ,EAAE,WAAW,CAAC,sBAAsB,CAAC,CAAC;IACxE,CAAC,CAAC,CACH,CAAC;IAEF,OAAO,wBAAwB,CAAC,SAAS,CAAC,UAAC,WAAW;QACpD,0BAA0B;QAC1B,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,KAAK,CAAC,2CAA+B,EAAE,kBAAkB,CAAC,QAAQ,EAAE,WAAW,CAAC,sBAAsB,CAAC,CAAC,CAAC;IACtH,CAAC,CAAC,CAAC;AACL,CAAC;AAzBD,kCAyBC","sourcesContent":["import { AllWindowObservables } from 'src/autocapture-plugin';\nimport { filter } from 'rxjs';\nimport { ActionType } from 'src/typings/autocapture';\nimport { BrowserClient } from '@amplitude/analytics-types';\nimport { filterOutNonTrackableEvents, shouldTrackEvent } from '../helpers';\nimport { AMPLITUDE_ELEMENT_CHANGED_EVENT } from '../constants';\n\nexport function trackChange({\n  amplitude,\n  allObservables,\n  getEventProperties,\n  shouldTrackEvent,\n}: {\n  amplitude: BrowserClient;\n  allObservables: AllWindowObservables;\n  getEventProperties: (actionType: ActionType, element: Element) => Record<string, any>;\n  shouldTrackEvent: shouldTrackEvent;\n}) {\n  const { changeObservable } = allObservables;\n\n  const filteredChangeObservable = changeObservable.pipe(\n    filter(filterOutNonTrackableEvents),\n    filter((changeEvent) => {\n      // Only track change on elements that should be tracked,\n      return shouldTrackEvent('change', changeEvent.closestTrackedAncestor);\n    }),\n  );\n\n  return filteredChangeObservable.subscribe((changeEvent) => {\n    /* istanbul ignore next */\n    amplitude?.track(AMPLITUDE_ELEMENT_CHANGED_EVENT, getEventProperties('change', changeEvent.closestTrackedAncestor));\n  });\n}\n"]}

package/lib/cjs/autocapture/track-click.d.ts

@@ -0,0 +1,10 @@
+import { AllWindowObservables, AutoCaptureOptionsWithDefaults } from 'src/autocapture-plugin';
+import { BrowserClient } from '@amplitude/analytics-types';
+import { shouldTrackEvent } from '../helpers';
+export declare function trackClicks({ amplitude, allObservables, options, shouldTrackEvent, }: {
+    amplitude: BrowserClient;
+    allObservables: AllWindowObservables;
+    options: AutoCaptureOptionsWithDefaults;
+    shouldTrackEvent: shouldTrackEvent;
+}): import("rxjs").Subscription;
+//# sourceMappingURL=track-click.d.ts.map

package/lib/cjs/autocapture/track-click.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"track-click.d.ts","sourceRoot":"","sources":["../../../src/autocapture/track-click.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,8BAA8B,EAAE,MAAM,wBAAwB,CAAC;AAE9F,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAA+B,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAK3E,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,cAAc,EACd,OAAO,EACP,gBAAgB,GACjB,EAAE;IACD,SAAS,EAAE,aAAa,CAAC;IACzB,cAAc,EAAE,oBAAoB,CAAC;IACrC,OAAO,EAAE,8BAA8B,CAAC;IACxC,gBAAgB,EAAE,gBAAgB,CAAC;CACpC,+BAiDA"}

package/lib/cjs/autocapture/track-click.js

@@ -0,0 +1,53 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.trackClicks = void 0;
+var tslib_1 = require("tslib");
+var rxjs_1 = require("rxjs");
+var helpers_1 = require("../helpers");
+var constants_1 = require("../constants");
+var RAGE_CLICK_THRESHOLD = 5;
+function trackClicks(_a) {
+    var amplitude = _a.amplitude, allObservables = _a.allObservables, options = _a.options, shouldTrackEvent = _a.shouldTrackEvent;
+    var clickObservable = allObservables.clickObservable;
+    // Trigger if the target of the click event has changed and position is different
+    // Keeping track of position is important to avoid false positives when the user clicks on the same
+    // element where certain frameworks could replace the element instance between rerenders
+    var comparisonTrigger = clickObservable.pipe((0, rxjs_1.pairwise)(), (0, rxjs_1.filter)(function (_a) {
+        var _b = tslib_1.__read(_a, 2), prev = _b[0], current = _b[1];
+        var targetChanged = prev.event.target !== current.event.target;
+        /* istanbul ignore next */
+        var samePos = Math.abs(current.event.screenX - prev.event.screenX) <= 20 &&
+            Math.abs(current.event.screenY - prev.event.screenY) <= 20;
+        return targetChanged && !samePos;
+    }));
+    // Trigger if there is no click event within 1 second
+    var timeoutTrigger = clickObservable.pipe((0, rxjs_1.debounceTime)(options.debounceTime), (0, rxjs_1.map)(function () { return 'timeout'; }));
+    var triggers = (0, rxjs_1.merge)(comparisonTrigger, timeoutTrigger);
+    // Get buffers of clicks, if the buffer length is over 5, it is rage click
+    var bufferedClicks = clickObservable.pipe((0, rxjs_1.delay)(0), (0, rxjs_1.filter)(helpers_1.filterOutNonTrackableEvents), (0, rxjs_1.filter)(function (click) {
+        // Only track clicks on elements that should be tracked,
+        return shouldTrackEvent('click', click.closestTrackedAncestor);
+    }), (0, rxjs_1.buffer)(triggers));
+    return bufferedClicks.subscribe(function (clicks) {
+        var e_1, _a;
+        // TODO: update this when rage clicks are added
+        var clickType = clicks.length >= RAGE_CLICK_THRESHOLD ? constants_1.AMPLITUDE_ELEMENT_CLICKED_EVENT : constants_1.AMPLITUDE_ELEMENT_CLICKED_EVENT;
+        try {
+            for (var clicks_1 = tslib_1.__values(clicks), clicks_1_1 = clicks_1.next(); !clicks_1_1.done; clicks_1_1 = clicks_1.next()) {
+                var click = clicks_1_1.value;
+                /* istanbul ignore next */
+                amplitude === null || amplitude === void 0 ? void 0 : amplitude.track(clickType, click.targetElementProperties, {
+                    time: click.timestamp,
+                });
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (clicks_1_1 && !clicks_1_1.done && (_a = clicks_1.return)) _a.call(clicks_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+    });
+}
+exports.trackClicks = trackClicks;
+//# sourceMappingURL=track-click.js.map

package/lib/cjs/autocapture/track-click.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"track-click.js","sourceRoot":"","sources":["../../../src/autocapture/track-click.ts"],"names":[],"mappings":";;;AACA,6BAAiF;AAEjF,sCAA2E;AAC3E,0CAA+D;AAE/D,IAAM,oBAAoB,GAAG,CAAC,CAAC;AAE/B,SAAgB,WAAW,CAAC,EAU3B;QATC,SAAS,eAAA,EACT,cAAc,oBAAA,EACd,OAAO,aAAA,EACP,gBAAgB,sBAAA;IAOR,IAAA,eAAe,GAAK,cAAc,gBAAnB,CAAoB;IAE3C,iFAAiF;IACjF,mGAAmG;IACnG,wFAAwF;IACxF,IAAM,iBAAiB,GAAG,eAAe,CAAC,IAAI,CAC5C,IAAA,eAAQ,GAAE,EACV,IAAA,aAAM,EAAC,UAAC,EAAe;YAAf,KAAA,qBAAe,EAAd,IAAI,QAAA,EAAE,OAAO,QAAA;QACpB,IAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC;QACjE,0BAA0B;QAC1B,IAAM,OAAO,GACX,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE;YAC1D,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QAC7D,OAAO,aAAa,IAAI,CAAC,OAAO,CAAC;IACnC,CAAC,CAAC,CACH,CAAC;IAEF,qDAAqD;IACrD,IAAM,cAAc,GAAG,eAAe,CAAC,IAAI,CACzC,IAAA,mBAAY,EAAC,OAAO,CAAC,YAAY,CAAC,EAClC,IAAA,UAAG,EAAC,cAAM,OAAA,SAAkB,EAAlB,CAAkB,CAAC,CAC9B,CAAC;IAEF,IAAM,QAAQ,GAAG,IAAA,YAAK,EAAC,iBAAiB,EAAE,cAAc,CAAC,CAAC;IAE1D,0EAA0E;IAC1E,IAAM,cAAc,GAAG,eAAe,CAAC,IAAI,CACzC,IAAA,YAAK,EAAC,CAAC,CAAC,EACR,IAAA,aAAM,EAAC,qCAA2B,CAAC,EACnC,IAAA,aAAM,EAAC,UAAC,KAAK;QACX,wDAAwD;QACxD,OAAO,gBAAgB,CAAC,OAAO,EAAE,KAAK,CAAC,sBAAsB,CAAC,CAAC;IACjE,CAAC,CAAC,EACF,IAAA,aAAM,EAAC,QAAQ,CAAC,CACjB,CAAC;IAEF,OAAO,cAAc,CAAC,SAAS,CAAC,UAAC,MAAM;;QACrC,+CAA+C;QAC/C,IAAM,SAAS,GACb,MAAM,CAAC,MAAM,IAAI,oBAAoB,CAAC,CAAC,CAAC,2CAA+B,CAAC,CAAC,CAAC,2CAA+B,CAAC;;YAE5G,KAAoB,IAAA,WAAA,iBAAA,MAAM,CAAA,8BAAA,kDAAE;gBAAvB,IAAM,KAAK,mBAAA;gBACd,0BAA0B;gBAC1B,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,uBAAuB,EAAE;oBACzD,IAAI,EAAE,KAAK,CAAC,SAAS;iBACtB,CAAC,CAAC;aACJ;;;;;;;;;IACH,CAAC,CAAC,CAAC;AACL,CAAC;AA3DD,kCA2DC","sourcesContent":["import { AllWindowObservables, AutoCaptureOptionsWithDefaults } from 'src/autocapture-plugin';\nimport { buffer, filter, map, debounceTime, merge, pairwise, delay } from 'rxjs';\nimport { BrowserClient } from '@amplitude/analytics-types';\nimport { filterOutNonTrackableEvents, shouldTrackEvent } from '../helpers';\nimport { AMPLITUDE_ELEMENT_CLICKED_EVENT } from '../constants';\n\nconst RAGE_CLICK_THRESHOLD = 5;\n\nexport function trackClicks({\n  amplitude,\n  allObservables,\n  options,\n  shouldTrackEvent,\n}: {\n  amplitude: BrowserClient;\n  allObservables: AllWindowObservables;\n  options: AutoCaptureOptionsWithDefaults;\n  shouldTrackEvent: shouldTrackEvent;\n}) {\n  const { clickObservable } = allObservables;\n\n  // Trigger if the target of the click event has changed and position is different\n  // Keeping track of position is important to avoid false positives when the user clicks on the same\n  // element where certain frameworks could replace the element instance between rerenders\n  const comparisonTrigger = clickObservable.pipe(\n    pairwise(),\n    filter(([prev, current]) => {\n      const targetChanged = prev.event.target !== current.event.target;\n      /* istanbul ignore next */\n      const samePos =\n        Math.abs(current.event.screenX - prev.event.screenX) <= 20 &&\n        Math.abs(current.event.screenY - prev.event.screenY) <= 20;\n      return targetChanged && !samePos;\n    }),\n  );\n\n  // Trigger if there is no click event within 1 second\n  const timeoutTrigger = clickObservable.pipe(\n    debounceTime(options.debounceTime),\n    map(() => 'timeout' as const),\n  );\n\n  const triggers = merge(comparisonTrigger, timeoutTrigger);\n\n  // Get buffers of clicks, if the buffer length is over 5, it is rage click\n  const bufferedClicks = clickObservable.pipe(\n    delay(0),\n    filter(filterOutNonTrackableEvents),\n    filter((click) => {\n      // Only track clicks on elements that should be tracked,\n      return shouldTrackEvent('click', click.closestTrackedAncestor);\n    }),\n    buffer(triggers),\n  );\n\n  return bufferedClicks.subscribe((clicks) => {\n    // TODO: update this when rage clicks are added\n    const clickType =\n      clicks.length >= RAGE_CLICK_THRESHOLD ? AMPLITUDE_ELEMENT_CLICKED_EVENT : AMPLITUDE_ELEMENT_CLICKED_EVENT;\n\n    for (const click of clicks) {\n      /* istanbul ignore next */\n      amplitude?.track(clickType, click.targetElementProperties, {\n        time: click.timestamp,\n      });\n    }\n  });\n}\n"]}

package/lib/cjs/autocapture-plugin.d.ts

@@ -1,8 +1,38 @@
 import { BrowserClient, BrowserConfig, EnrichmentPlugin } from '@amplitude/analytics-types';
+import { Observable } from 'rxjs';
 import { Messenger } from './libs/messenger';
 import { ActionType } from './typings/autocapture';
+import { HasEventTargetAddRemove } from 'rxjs/internal/observable/fromEvent';
+declare global {
+    interface Window {
+        navigation: HasEventTargetAddRemove<Event>;
+    }
+}
+interface NavigateEvent extends Event {
+    readonly navigationType: 'reload' | 'push' | 'replace' | 'traverse';
+    readonly destination: {
+        readonly url: string;
+        readonly key: string | null;
+        readonly id: string | null;
+        readonly index: number;
+        readonly sameDocument: boolean;
+        getState(): any;
+    };
+    readonly canIntercept: boolean;
+    readonly userInitiated: boolean;
+    readonly hashChange: boolean;
+    readonly signal: AbortSignal;
+    readonly formData: FormData | null;
+    readonly downloadRequest: string | null;
+    readonly info: any;
+    readonly hasUAVisualTransition: boolean;
+    /** @see https://github.com/WICG/navigation-api/pull/264 */
+    readonly sourceElement: Element | null;
+    scroll(): void;
+}
 type BrowserEnrichmentPlugin = EnrichmentPlugin<BrowserClient, BrowserConfig>;
 export declare const DEFAULT_CSS_SELECTOR_ALLOWLIST: string[];
+export declare const DEFAULT_ACTION_CLICK_ALLOWLIST: string[];
 export declare const DEFAULT_DATA_ATTRIBUTE_PREFIX = "data-amp-track-";
 export interface AutocaptureOptions {
     /**
@@ -38,7 +68,43 @@ export interface AutocaptureOptions {
         enabled?: boolean;
         messenger?: Messenger;
     };
+    /**
+     * Debounce time in milliseconds for tracking events.
+     * This is used to detect rage clicks.
+     */
+    debounceTime?: number;
+    /**
+     * CSS selector allowlist for tracking clicks that result in a DOM change/navigation on elements not already allowed by the cssSelectorAllowlist
+     */
+    actionClickAllowlist?: string[];
+}
+export type AutoCaptureOptionsWithDefaults = Required<Pick<AutocaptureOptions, 'debounceTime' | 'cssSelectorAllowlist' | 'actionClickAllowlist'>> & AutocaptureOptions;
+export declare enum ObservablesEnum {
+    ClickObservable = "clickObservable",
+    ChangeObservable = "changeObservable",
+    NavigateObservable = "navigateObservable",
+    MutationObservable = "mutationObservable"
+}
+type BaseTimestampedEvent<T> = {
+    event: T;
+    timestamp: number;
+    type: 'rage' | 'click' | 'change' | 'error' | 'navigate' | 'mutation';
+};
+export type ElementBasedEvent = MouseEvent | Event;
+export type ElementBasedTimestampedEvent<T> = BaseTimestampedEvent<T> & {
+    event: MouseEvent | Event;
+    type: 'click' | 'change';
+    closestTrackedAncestor: Element;
+    targetElementProperties: Record<string, any>;
+};
+export type TimestampedEvent<T> = BaseTimestampedEvent<T> | ElementBasedTimestampedEvent<T>;
+export interface AllWindowObservables {
+    [ObservablesEnum.ClickObservable]: Observable<ElementBasedTimestampedEvent<MouseEvent>>;
+    [ObservablesEnum.ChangeObservable]: Observable<ElementBasedTimestampedEvent<Event>>;
+    [ObservablesEnum.NavigateObservable]: Observable<TimestampedEvent<NavigateEvent>> | undefined;
+    [ObservablesEnum.MutationObservable]: Observable<TimestampedEvent<MutationRecord[]>>;
 }
+export declare function isElementBasedEvent<T>(event: BaseTimestampedEvent<T>): event is ElementBasedTimestampedEvent<T>;
 export declare const autocapturePlugin: (options?: AutocaptureOptions) => BrowserEnrichmentPlugin;
 export {};
 //# sourceMappingURL=autocapture-plugin.d.ts.map

package/lib/cjs/autocapture-plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocapture-plugin.d.ts","sourceRoot":"","sources":["../../src/autocapture-plugin.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,gBAAgB,EAAU,MAAM,4BAA4B,CAAC;AAYpG,OAAO,EAAE,SAAS,EAAmB,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGnD,KAAK,uBAAuB,GAAG,gBAAgB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;AAE9E,eAAO,MAAM,8BAA8B,UAS1C,CAAC;AACF,eAAO,MAAM,6BAA6B,oBAAoB,CAAC;AAQ/D,MAAM,WAAW,kBAAkB;IACjC;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAEhC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAEvC;;;;;;;OAOG;IACH,wBAAwB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC;IAEjF;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;OAEG;IACH,oBAAoB,CAAC,EAAE;QACrB,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,SAAS,CAAC,EAAE,SAAS,CAAC;KACvB,CAAC;CACH;AAED,eAAO,MAAM,iBAAiB,aAAa,kBAAkB,KAAQ,uBA2OpE,CAAC"}
+{"version":3,"file":"autocapture-plugin.d.ts","sourceRoot":"","sources":["../../src/autocapture-plugin.ts"],"names":[],"mappings":"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"}

package/lib/cjs/autocapture-plugin.js

@@ -1,11 +1,15 @@
 var _this = this;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.autocapturePlugin = exports.DEFAULT_DATA_ATTRIBUTE_PREFIX = exports.DEFAULT_CSS_SELECTOR_ALLOWLIST = void 0;
+exports.autocapturePlugin = exports.isElementBasedEvent = exports.ObservablesEnum = exports.DEFAULT_DATA_ATTRIBUTE_PREFIX = exports.DEFAULT_ACTION_CLICK_ALLOWLIST = exports.DEFAULT_CSS_SELECTOR_ALLOWLIST = void 0;
 var tslib_1 = require("tslib");
 var constants = tslib_1.__importStar(require("./constants"));
+var rxjs_1 = require("rxjs");
 var helpers_1 = require("./helpers");
 var messenger_1 = require("./libs/messenger");
 var hierarchy_1 = require("./hierarchy");
+var track_click_1 = require("./autocapture/track-click");
+var track_change_1 = require("./autocapture/track-change");
+var track_action_click_1 = require("./autocapture/track-action-click");
 exports.DEFAULT_CSS_SELECTOR_ALLOWLIST = [
     'a',
     'button',
@@ -16,84 +20,71 @@ exports.DEFAULT_CSS_SELECTOR_ALLOWLIST = [
     '[data-amp-default-track]',
     '.amp-default-track',
 ];
+exports.DEFAULT_ACTION_CLICK_ALLOWLIST = ['div', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 exports.DEFAULT_DATA_ATTRIBUTE_PREFIX = 'data-amp-track-';
+var ObservablesEnum;
+(function (ObservablesEnum) {
+    ObservablesEnum["ClickObservable"] = "clickObservable";
+    ObservablesEnum["ChangeObservable"] = "changeObservable";
+    // ErrorObservable = 'errorObservable',
+    ObservablesEnum["NavigateObservable"] = "navigateObservable";
+    ObservablesEnum["MutationObservable"] = "mutationObservable";
+})(ObservablesEnum = exports.ObservablesEnum || (exports.ObservablesEnum = {}));
+// Type predicate
+function isElementBasedEvent(event) {
+    return event.type === 'click' || event.type === 'change';
+}
+exports.isElementBasedEvent = isElementBasedEvent;
 var autocapturePlugin = function (options) {
+    var _a, _b, _c;
     if (options === void 0) { options = {}; }
-    var _a = options.cssSelectorAllowlist, cssSelectorAllowlist = _a === void 0 ? exports.DEFAULT_CSS_SELECTOR_ALLOWLIST : _a, pageUrlAllowlist = options.pageUrlAllowlist, shouldTrackEventResolver = options.shouldTrackEventResolver, _b = options.dataAttributePrefix, dataAttributePrefix = _b === void 0 ? exports.DEFAULT_DATA_ATTRIBUTE_PREFIX : _b, _c = options.visualTaggingOptions, visualTaggingOptions = _c === void 0 ? {
+    var _d = options.dataAttributePrefix, dataAttributePrefix = _d === void 0 ? exports.DEFAULT_DATA_ATTRIBUTE_PREFIX : _d, _e = options.visualTaggingOptions, visualTaggingOptions = _e === void 0 ? {
         enabled: true,
         messenger: new messenger_1.WindowMessenger(),
-    } : _c;
+    } : _e;
+    options.cssSelectorAllowlist = (_a = options.cssSelectorAllowlist) !== null && _a !== void 0 ? _a : exports.DEFAULT_CSS_SELECTOR_ALLOWLIST;
+    options.actionClickAllowlist = (_b = options.actionClickAllowlist) !== null && _b !== void 0 ? _b : exports.DEFAULT_ACTION_CLICK_ALLOWLIST;
+    options.debounceTime = (_c = options.debounceTime) !== null && _c !== void 0 ? _c : 1000;
     var name = constants.PLUGIN_NAME;
     var type = 'enrichment';
-    var observer;
-    var eventListeners = [];
+    var subscriptions = [];
     var logger = undefined;
-    var addEventListener = function (element, type, handler) {
-        element.addEventListener(type, handler);
-        eventListeners.push({
-            element: element,
-            type: type,
-            handler: handler,
-        });
-    };
-    var removeEventListeners = function () {
-        eventListeners.forEach(function (_ref) {
-            var element = _ref.element, type = _ref.type, handler = _ref.handler;
-            /* istanbul ignore next */
-            element === null || element === void 0 ? void 0 : element.removeEventListener(type, handler);
-        });
-        eventListeners = [];
-    };
-    var shouldTrackEvent = function (actionType, element) {
-        var _a, _b, _c;
-        /* istanbul ignore if */
-        if (!element) {
-            return false;
-        }
-        /* istanbul ignore next */
-        var tag = (_b = (_a = element === null || element === void 0 ? void 0 : element.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase) === null || _b === void 0 ? void 0 : _b.call(_a);
-        // Text nodes have no tag
-        if (!tag) {
-            return false;
-        }
-        if (shouldTrackEventResolver) {
-            return shouldTrackEventResolver(actionType, element);
-        }
-        if (!(0, helpers_1.isPageUrlAllowed)(window.location.href, pageUrlAllowlist)) {
-            return false;
-        }
+    // Create observables on events on the window
+    var createObservables = function () {
+        var _a;
+        // Create Observables from direct user events
+        var clickObservable = (0, rxjs_1.fromEvent)(document, 'click', { capture: true }).pipe((0, rxjs_1.map)(function (click) { return addAdditionalEventProperties(click, 'click'); }));
+        var changeObservable = (0, rxjs_1.fromEvent)(document, 'change', { capture: true }).pipe((0, rxjs_1.map)(function (change) { return addAdditionalEventProperties(change, 'change'); }));
+        // Create Observable from unhandled errors
+        // const errorObservable = fromEvent<ErrorEvent>(window, 'error').pipe(
+        //   map((error) => addAdditionalEventProperties(error, 'error')),
+        // );
+        // Create observable for URL changes
+        var navigateObservable;
         /* istanbul ignore next */
-        var elementType = (element === null || element === void 0 ? void 0 : element.type) || '';
-        if (typeof elementType === 'string') {
-            switch (elementType.toLowerCase()) {
-                case 'hidden':
-                    return false;
-                case 'password':
-                    return false;
-            }
-        }
-        /* istanbul ignore if */
-        if (cssSelectorAllowlist) {
-            var hasMatchAnyAllowedSelector = cssSelectorAllowlist.some(function (selector) { var _a; return !!((_a = element === null || element === void 0 ? void 0 : element.matches) === null || _a === void 0 ? void 0 : _a.call(element, selector)); });
-            if (!hasMatchAnyAllowedSelector) {
-                return false;
-            }
-        }
-        switch (tag) {
-            case 'input':
-            case 'select':
-            case 'textarea':
-                return actionType === 'change' || actionType === 'click';
-            default: {
-                /* istanbul ignore next */
-                var computedStyle = (_c = window === null || window === void 0 ? void 0 : window.getComputedStyle) === null || _c === void 0 ? void 0 : _c.call(window, element);
-                /* istanbul ignore next */
-                if (computedStyle && computedStyle.getPropertyValue('cursor') === 'pointer' && actionType === 'click') {
-                    return true;
-                }
-                return actionType === 'click';
-            }
+        if (window.navigation) {
+            navigateObservable = (0, rxjs_1.fromEvent)(window.navigation, 'navigate').pipe((0, rxjs_1.map)(function (navigate) { return addAdditionalEventProperties(navigate, 'navigate'); }));
         }
+        // Track DOM Mutations
+        var mutationObservable = new rxjs_1.Observable(function (observer) {
+            var mutationObserver = new MutationObserver(function (mutations) {
+                observer.next(mutations);
+            });
+            mutationObserver.observe(document.body, {
+                childList: true,
+                attributes: true,
+                characterData: true,
+                subtree: true,
+            });
+            return function () { return mutationObserver.disconnect(); };
+        }).pipe((0, rxjs_1.map)(function (mutation) { return addAdditionalEventProperties(mutation, 'mutation'); }));
+        return _a = {},
+            _a[ObservablesEnum.ClickObservable] = clickObservable,
+            _a[ObservablesEnum.ChangeObservable] = changeObservable,
+            // [ObservablesEnum.ErrorObservable]: errorObservable,
+            _a[ObservablesEnum.NavigateObservable] = navigateObservable,
+            _a[ObservablesEnum.MutationObservable] = mutationObservable,
+            _a;
     };
     // Returns the Amplitude event properties for the given element.
     var getEventProperties = function (actionType, element) {
@@ -130,8 +121,25 @@ var autocapturePlugin = function (options) {
         }
         return (0, helpers_1.removeEmptyProperties)(properties);
     };
+    var addAdditionalEventProperties = function (event, type) {
+        var baseEvent = {
+            event: event,
+            timestamp: Date.now(),
+            type: type,
+        };
+        if (isElementBasedEvent(baseEvent) && baseEvent.event.target !== null) {
+            // Retrieve additional event properties from the target element
+            var closestTrackedAncestor = (0, helpers_1.getClosestElement)(baseEvent.event.target, options.cssSelectorAllowlist);
+            if (closestTrackedAncestor) {
+                baseEvent.closestTrackedAncestor = closestTrackedAncestor;
+                baseEvent.targetElementProperties = getEventProperties(baseEvent.type, closestTrackedAncestor);
+            }
+            return baseEvent;
+        }
+        return baseEvent;
+    };
     var setup = function (config, amplitude) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-        var addListener, attachListeners;
+        var shouldTrackEvent, shouldTrackActionClick, allObservables, clickTrackingSubscription, changeSubscription, actionClickSubscription, allowlist, actionClickAllowlist;
         var _a, _b, _c;
         return tslib_1.__generator(this, function (_d) {
             if (!amplitude) {
@@ -144,67 +152,40 @@ var autocapturePlugin = function (options) {
             if (typeof document === 'undefined') {
                 return [2 /*return*/];
             }
-            addListener = function (el) {
-                if (shouldTrackEvent('click', el)) {
-                    addEventListener(el, 'click', function (event) {
-                        // Limit to only the innermost element that matches the selectors, avoiding all propagated event after matching.
-                        /* istanbul ignore next */
-                        if ((event === null || event === void 0 ? void 0 : event.target) != (event === null || event === void 0 ? void 0 : event.currentTarget) &&
-                            (0, helpers_1.getClosestElement)(event === null || event === void 0 ? void 0 : event.target, cssSelectorAllowlist) != (event === null || event === void 0 ? void 0 : event.currentTarget)) {
-                            return;
-                        }
-                        /* istanbul ignore next */
-                        amplitude === null || amplitude === void 0 ? void 0 : amplitude.track(constants.AMPLITUDE_ELEMENT_CLICKED_EVENT, getEventProperties('click', el));
-                    });
-                }
-                if (shouldTrackEvent('change', el)) {
-                    addEventListener(el, 'change', function (event) {
-                        // Limit to only the innermost element that matches the selectors, avoiding all propagated event after matching.
-                        /* istanbul ignore next */
-                        if ((event === null || event === void 0 ? void 0 : event.target) != (event === null || event === void 0 ? void 0 : event.currentTarget) &&
-                            (0, helpers_1.getClosestElement)(event === null || event === void 0 ? void 0 : event.target, cssSelectorAllowlist) != (event === null || event === void 0 ? void 0 : event.currentTarget)) {
-                            return;
-                        }
-                        /* istanbul ignore next */
-                        amplitude === null || amplitude === void 0 ? void 0 : amplitude.track(constants.AMPLITUDE_ELEMENT_CHANGED_EVENT, getEventProperties('change', el));
-                    });
-                }
-            };
-            if (typeof MutationObserver !== 'undefined') {
-                observer = new MutationObserver(function (mutations) {
-                    mutations.forEach(function (mutation) {
-                        mutation.addedNodes.forEach(function (node) {
-                            addListener(node);
-                            if ('querySelectorAll' in node && typeof node.querySelectorAll === 'function') {
-                                (0, helpers_1.querySelectUniqueElements)(node, cssSelectorAllowlist).map(addListener);
-                            }
-                        });
-                    });
-                });
-            }
-            attachListeners = function () {
-                var allElements = (0, helpers_1.querySelectUniqueElements)(document.body, cssSelectorAllowlist);
-                allElements.forEach(addListener);
-                /* istanbul ignore next */
-                observer === null || observer === void 0 ? void 0 : observer.observe(document.body, {
-                    subtree: true,
-                    childList: true,
-                });
-            };
-            if (document.body) {
-                attachListeners();
-            }
-            else {
-                // This is to handle the case where the plugin is loaded before the body is available.
-                // E.g., for non-reactive frameworks.
-                window.addEventListener('load', attachListeners);
-            }
+            shouldTrackEvent = (0, helpers_1.createShouldTrackEvent)(options, options.cssSelectorAllowlist);
+            shouldTrackActionClick = (0, helpers_1.createShouldTrackEvent)(options, options.actionClickAllowlist);
+            allObservables = createObservables();
+            clickTrackingSubscription = (0, track_click_1.trackClicks)({
+                allObservables: allObservables,
+                options: options,
+                amplitude: amplitude,
+                shouldTrackEvent: shouldTrackEvent,
+            });
+            subscriptions.push(clickTrackingSubscription);
+            changeSubscription = (0, track_change_1.trackChange)({
+                allObservables: allObservables,
+                getEventProperties: getEventProperties,
+                amplitude: amplitude,
+                shouldTrackEvent: shouldTrackEvent,
+            });
+            subscriptions.push(changeSubscription);
+            actionClickSubscription = (0, track_action_click_1.trackActionClick)({
+                allObservables: allObservables,
+                options: options,
+                getEventProperties: getEventProperties,
+                amplitude: amplitude,
+                shouldTrackEvent: shouldTrackEvent,
+                shouldTrackActionClick: shouldTrackActionClick,
+            });
+            subscriptions.push(actionClickSubscription);
             /* istanbul ignore next */
             (_b = config === null || config === void 0 ? void 0 : config.loggerProvider) === null || _b === void 0 ? void 0 : _b.log("".concat(name, " has been successfully added."));
             // Setup visual tagging selector
             if (window.opener && visualTaggingOptions.enabled) {
+                allowlist = options.cssSelectorAllowlist;
+                actionClickAllowlist = options.actionClickAllowlist;
                 /* istanbul ignore next */
-                (_c = visualTaggingOptions.messenger) === null || _c === void 0 ? void 0 : _c.setup(tslib_1.__assign(tslib_1.__assign({ logger: config === null || config === void 0 ? void 0 : config.loggerProvider }, ((config === null || config === void 0 ? void 0 : config.serverZone) && { endpoint: constants.AMPLITUDE_ORIGINS_MAP[config.serverZone] })), { isElementSelectable: shouldTrackEvent }));
+                (_c = visualTaggingOptions.messenger) === null || _c === void 0 ? void 0 : _c.setup(tslib_1.__assign(tslib_1.__assign({ logger: config === null || config === void 0 ? void 0 : config.loggerProvider }, ((config === null || config === void 0 ? void 0 : config.serverZone) && { endpoint: constants.AMPLITUDE_ORIGINS_MAP[config.serverZone] })), { isElementSelectable: (0, helpers_1.createShouldTrackEvent)(options, tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(allowlist), false), tslib_1.__read(actionClickAllowlist), false)), cssSelectorAllowlist: allowlist, actionClickAllowlist: actionClickAllowlist }));
             }
             return [2 /*return*/];
         });
@@ -215,11 +196,22 @@ var autocapturePlugin = function (options) {
         });
     }); };
     var teardown = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-        return tslib_1.__generator(this, function (_a) {
-            if (observer) {
-                observer.disconnect();
+        var subscriptions_1, subscriptions_1_1, subscription;
+        var e_1, _a;
+        return tslib_1.__generator(this, function (_b) {
+            try {
+                for (subscriptions_1 = tslib_1.__values(subscriptions), subscriptions_1_1 = subscriptions_1.next(); !subscriptions_1_1.done; subscriptions_1_1 = subscriptions_1.next()) {
+                    subscription = subscriptions_1_1.value;
+                    subscription.unsubscribe();
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (subscriptions_1_1 && !subscriptions_1_1.done && (_a = subscriptions_1.return)) _a.call(subscriptions_1);
+                }
+                finally { if (e_1) throw e_1.error; }
             }
-            removeEventListeners();
             return [2 /*return*/];
         });
     }); };