@statsig/web-analytics 3.20.1 → 3.20.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statsig/web-analytics",
-  "version": "3.20.1",
+  "version": "3.20.3",
   "license": "ISC",
   "homepage": "https://github.com/statsig-io/js-client-monorepo",
   "repository": {
@@ -9,8 +9,8 @@
     "directory": "packages/web-analytics"
   },
   "dependencies": {
-    "@statsig/client-core": "3.20.1",
-    "@statsig/js-client": "3.20.1",
+    "@statsig/client-core": "3.20.3",
+    "@statsig/js-client": "3.20.3",
     "web-vitals": "5.0.3"
   },
   "jsdelivr": "./build/statsig-web-analytics.min.js",

package/src/AutoCapture.d.ts

@@ -21,6 +21,7 @@ export declare class AutoCapture {
     private _rageClickManager;
     private _pageViewLogged;
     private _webVitalsManager;
+    private _deadClickManager;
     constructor(_client: PrecomputedEvaluationsInterface, options?: AutoCaptureOptions);
     private _addEventHandlers;
     private _addPageViewTracking;

package/src/AutoCapture.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AutoCapture = exports.runStatsigAutoCapture = exports.StatsigAutoCapturePlugin = void 0;
 const client_core_1 = require("@statsig/client-core");
 const AutoCaptureEvent_1 = require("./AutoCaptureEvent");
+const DeadClickManager_1 = require("./DeadClickManager");
 const EngagementManager_1 = require("./EngagementManager");
 const RageClickManager_1 = require("./RageClickManager");
 const WebVitalsManager_1 = require("./WebVitalsManager");
@@ -57,6 +58,7 @@ class AutoCapture {
         this._engagementManager = new EngagementManager_1.EngagementManager();
         this._rageClickManager = new RageClickManager_1.default();
         this._webVitalsManager = new WebVitalsManager_1.WebVitalsManager(this._enqueueAutoCapture.bind(this));
+        this._deadClickManager = new DeadClickManager_1.default(this._enqueueAutoCapture.bind(this));
         this._eventFilterFunc = options === null || options === void 0 ? void 0 : options.eventFilterFunc;
         const doc = (0, client_core_1._getDocumentSafe)();
         if (!(0, client_core_1._isServerEnv)()) {
@@ -136,6 +138,7 @@ class AutoCapture {
     }
     _initialize() {
         this._webVitalsManager.startTracking();
+        this._deadClickManager.startTracking();
         this._engagementManager.startInactivityTracking(() => this._tryLogPageViewEnd(true));
         this._addEventHandlers();
         this._addPageViewTracking();

package/src/AutoCaptureEvent.d.ts

@@ -9,6 +9,7 @@ export declare const AutoCaptureEventName: {
     readonly CLICK: "auto_capture::click";
     readonly RAGE_CLICK: "auto_capture::rage_click";
     readonly WEB_VITALS: "auto_capture::web_vitals";
+    readonly DEAD_CLICK: "auto_capture::dead_click";
 };
 export type AutoCaptureEventName = (typeof AutoCaptureEventName)[keyof typeof AutoCaptureEventName] & string;
 export type AutoCaptureEvent = StatsigEvent & {

package/src/AutoCaptureEvent.js

@@ -11,4 +11,5 @@ exports.AutoCaptureEventName = {
     CLICK: 'auto_capture::click',
     RAGE_CLICK: 'auto_capture::rage_click',
     WEB_VITALS: 'auto_capture::web_vitals',
+    DEAD_CLICK: 'auto_capture::dead_click',
 };

package/src/DeadClickManager.d.ts

@@ -0,0 +1,34 @@
+import { AutoCaptureEventName } from './AutoCaptureEvent';
+export declare const DeadClickConfig: {
+    CLICK_CHECK_TIMEOUT: number;
+    SCROLL_DELAY_MS: number;
+    SELECTION_CHANGE_DELAY_MS: number;
+    MUTATION_DELAY_MS: number;
+    ABSOLUTE_DEAD_CLICK_TIMEOUT: number;
+};
+export interface PossibleDeadClick {
+    timestamp: number;
+    eventTarget: HTMLElement;
+    scrollDelayMs?: number;
+    selectionChangeDelayMs?: number;
+    mutationDelayMs?: number;
+    absoluteDelayMs?: number;
+}
+export default class DeadClickManager {
+    private _enqueueFn;
+    private _lastMutationTime;
+    private _lastSelectionChangeTime;
+    private _clickCheckTimer;
+    private _observer;
+    private _clicks;
+    private _deadClickConfig;
+    constructor(_enqueueFn: (eventName: AutoCaptureEventName, value: string, metadata: Record<string, unknown>) => void);
+    startTracking(): void;
+    private _handleClick;
+    private _handleScroll;
+    private _handleSelectionChange;
+    private _setupMutationObserver;
+    private _checkForDeadClick;
+    private _logDeadClick;
+    private _updateClickDelayMs;
+}

package/src/DeadClickManager.js

@@ -0,0 +1,162 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeadClickConfig = void 0;
+const client_core_1 = require("@statsig/client-core");
+const AutoCaptureEvent_1 = require("./AutoCaptureEvent");
+const commonUtils_1 = require("./utils/commonUtils");
+const eventUtils_1 = require("./utils/eventUtils");
+exports.DeadClickConfig = {
+    CLICK_CHECK_TIMEOUT: 1000,
+    SCROLL_DELAY_MS: 100,
+    SELECTION_CHANGE_DELAY_MS: 100,
+    MUTATION_DELAY_MS: 2500,
+    ABSOLUTE_DEAD_CLICK_TIMEOUT: 2750,
+};
+// A dead click is a click that fires an event but produces no meaningful change within a set timeframe.
+class DeadClickManager {
+    constructor(_enqueueFn) {
+        this._enqueueFn = _enqueueFn;
+        this._lastMutationTime = 0;
+        this._lastSelectionChangeTime = 0;
+        this._clicks = [];
+        this._deadClickConfig = exports.DeadClickConfig;
+        this._handleScroll = (0, commonUtils_1.throttle)(() => {
+            const scrollTime = Date.now();
+            this._clicks.forEach((click) => {
+                if (!click.scrollDelayMs) {
+                    click.scrollDelayMs = scrollTime - click.timestamp;
+                }
+            });
+        }, 50);
+    }
+    startTracking() {
+        const win = (0, client_core_1._getWindowSafe)();
+        if (!win) {
+            return;
+        }
+        // `capture: true` - Needed to listen to scroll events on all scrollable elements, not just the window.
+        // docs: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#usecapture
+        //
+        // `passive: true` - Indicates the scroll handler won’t call preventDefault(),
+        // allowing the browser to optimize scrolling performance by not blocking it.
+        // docs: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#passive
+        win.addEventListener('click', (event) => this._handleClick(event), {
+            capture: true,
+        });
+        win.addEventListener('scroll', () => this._handleScroll(), {
+            capture: true,
+            passive: true,
+        });
+        win.addEventListener('selectionchange', () => this._handleSelectionChange());
+        this._setupMutationObserver();
+    }
+    _handleClick(event) {
+        var _a, _b;
+        const eventTarget = event.target;
+        if (!eventTarget) {
+            return;
+        }
+        const click = {
+            timestamp: Date.now(),
+            eventTarget,
+        };
+        if (!commonUtils_1.interactiveElements.includes((_a = eventTarget === null || eventTarget === void 0 ? void 0 : eventTarget.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase())) {
+            this._clicks.push(click);
+        }
+        if (this._clicks.length && !this._clickCheckTimer) {
+            this._clickCheckTimer = (_b = (0, client_core_1._getWindowSafe)()) === null || _b === void 0 ? void 0 : _b.setTimeout(() => {
+                this._checkForDeadClick();
+            }, this._deadClickConfig.CLICK_CHECK_TIMEOUT);
+        }
+    }
+    _handleSelectionChange() {
+        this._lastSelectionChangeTime = Date.now();
+    }
+    _setupMutationObserver() {
+        const doc = (0, client_core_1._getDocumentSafe)();
+        if (!doc) {
+            return;
+        }
+        this._observer = new MutationObserver(() => {
+            this._lastMutationTime = Date.now();
+        });
+        this._observer.observe(doc.body, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            characterData: true,
+        });
+    }
+    _checkForDeadClick() {
+        var _a;
+        if (!this._clicks.length) {
+            return;
+        }
+        clearTimeout(this._clickCheckTimer);
+        this._clickCheckTimer = undefined;
+        const clicksToCheck = this._clicks;
+        this._clicks = [];
+        for (const click of clicksToCheck) {
+            this._updateClickDelayMs(click);
+            const hadScroll = click.scrollDelayMs != null &&
+                click.scrollDelayMs < this._deadClickConfig.SCROLL_DELAY_MS;
+            const hadSelectionChange = click.selectionChangeDelayMs != null &&
+                click.selectionChangeDelayMs <
+                    this._deadClickConfig.SELECTION_CHANGE_DELAY_MS;
+            const hadMutation = click.mutationDelayMs != null &&
+                click.mutationDelayMs < this._deadClickConfig.MUTATION_DELAY_MS;
+            if (hadScroll || hadSelectionChange || hadMutation) {
+                continue;
+            }
+            const scrollTimeout = click.scrollDelayMs != null &&
+                click.scrollDelayMs > this._deadClickConfig.SCROLL_DELAY_MS;
+            const selectionChangeTimeout = click.selectionChangeDelayMs != null &&
+                click.selectionChangeDelayMs >
+                    this._deadClickConfig.SELECTION_CHANGE_DELAY_MS;
+            const mutationTimeout = click.mutationDelayMs != null &&
+                click.mutationDelayMs > this._deadClickConfig.MUTATION_DELAY_MS;
+            const absoluteTimeout = click.absoluteDelayMs != null &&
+                click.absoluteDelayMs >
+                    this._deadClickConfig.ABSOLUTE_DEAD_CLICK_TIMEOUT;
+            if (scrollTimeout ||
+                selectionChangeTimeout ||
+                mutationTimeout ||
+                absoluteTimeout) {
+                this._logDeadClick(click, {
+                    scrollTimeout,
+                    selectionChangeTimeout,
+                    mutationTimeout,
+                    absoluteTimeout,
+                });
+            }
+            else if (click.absoluteDelayMs != null &&
+                click.absoluteDelayMs <
+                    this._deadClickConfig.ABSOLUTE_DEAD_CLICK_TIMEOUT) {
+                this._clicks.push(click);
+            }
+        }
+        if (this._clicks.length && !this._clickCheckTimer) {
+            this._clickCheckTimer = (_a = (0, client_core_1._getWindowSafe)()) === null || _a === void 0 ? void 0 : _a.setTimeout(() => {
+                this._checkForDeadClick();
+            }, this._deadClickConfig.CLICK_CHECK_TIMEOUT);
+        }
+    }
+    _logDeadClick(click, extraMetadata) {
+        const { value, metadata } = (0, eventUtils_1._gatherEventData)(click.eventTarget);
+        this._enqueueFn(AutoCaptureEvent_1.AutoCaptureEventName.DEAD_CLICK, value, Object.assign(Object.assign(Object.assign({}, metadata), extraMetadata), { scrollDelayMs: click.scrollDelayMs, selectionChangeDelayMs: click.selectionChangeDelayMs, mutationDelayMs: click.mutationDelayMs, absoluteDelayMs: click.absoluteDelayMs }));
+    }
+    _updateClickDelayMs(click) {
+        if (!click.mutationDelayMs &&
+            this._lastMutationTime > 0 &&
+            click.timestamp <= this._lastMutationTime) {
+            click.mutationDelayMs = Date.now() - this._lastMutationTime;
+        }
+        if (!click.selectionChangeDelayMs &&
+            this._lastSelectionChangeTime > 0 &&
+            click.timestamp <= this._lastSelectionChangeTime) {
+            click.selectionChangeDelayMs = Date.now() - this._lastSelectionChangeTime;
+        }
+        click.absoluteDelayMs = Date.now() - click.timestamp;
+    }
+}
+exports.default = DeadClickManager;

package/src/utils/commonUtils.d.ts

@@ -4,6 +4,7 @@ interface NetworkInformation {
     rtt: number;
     saveData: boolean;
 }
+export declare const interactiveElements: string[];
 export declare function _stripEmptyValues<T extends Record<string, string | number | null | undefined>>(obj: T): Partial<Record<keyof T, string | number>>;
 export declare function _getTargetNode(e: Event): Element | null;
 export declare function _shouldLogEvent(e: Event, el: Element): boolean;
@@ -15,4 +16,5 @@ export declare function _getSafeNetworkInformation(): NetworkInformation | null;
 export declare function _getSafeTimezone(): string | null;
 export declare function _getSafeTimezoneOffset(): number | null;
 export declare function _getAnchorNodeInHierarchy(node: Element | null): Element | null;
+export declare function throttle<T extends (...args: unknown[]) => void>(fn: T, limit: number): T;
 export {};

package/src/utils/commonUtils.js

@@ -1,7 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports._getAnchorNodeInHierarchy = exports._getSafeTimezoneOffset = exports._getSafeTimezone = exports._getSafeNetworkInformation = exports._registerEventHandler = exports._getSanitizedPageUrl = exports._getSafeUrlString = exports._getSafeUrl = exports._shouldLogEvent = exports._getTargetNode = exports._stripEmptyValues = void 0;
+exports.throttle = exports._getAnchorNodeInHierarchy = exports._getSafeTimezoneOffset = exports._getSafeTimezone = exports._getSafeNetworkInformation = exports._registerEventHandler = exports._getSanitizedPageUrl = exports._getSafeUrlString = exports._getSafeUrl = exports._shouldLogEvent = exports._getTargetNode = exports._stripEmptyValues = exports.interactiveElements = void 0;
 const client_core_1 = require("@statsig/client-core");
+exports.interactiveElements = [
+    'button',
+    'a',
+    'input',
+    'select',
+    'textarea',
+    'form',
+    'select',
+    'label',
+];
 function _stripEmptyValues(obj) {
     return Object.fromEntries(Object.entries(obj).filter(([_, value]) => value != null && value !== '' && value !== undefined));
 }
@@ -26,6 +36,10 @@ function _shouldLogEvent(e, el) {
     }
     const tagName = el.tagName.toLowerCase();
     const eventType = e.type.toLowerCase();
+    const classList = el.classList;
+    if (classList.contains('statsig-no-capture')) {
+        return false;
+    }
     switch (tagName) {
         case 'html':
             return false;
@@ -129,3 +143,14 @@ function _getAnchorNodeInHierarchy(node) {
     return null;
 }
 exports._getAnchorNodeInHierarchy = _getAnchorNodeInHierarchy;
+function throttle(fn, limit) {
+    let lastCall = 0;
+    return function (...args) {
+        const now = Date.now();
+        if (now - lastCall >= limit) {
+            lastCall = now;
+            fn(...args);
+        }
+    };
+}
+exports.throttle = throttle;