@statsig/web-analytics 3.17.2 → 3.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statsig/web-analytics",
-  "version": "3.17.2",
+  "version": "3.18.0",
   "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.17.2",
-    "@statsig/js-client": "3.17.2"
+    "@statsig/client-core": "3.18.0",
+    "@statsig/js-client": "3.18.0"
   },
   "jsdelivr": "./build/statsig-web-analytics.min.js",
   "type": "commonjs",

package/src/AutoCapture.d.ts

@@ -13,26 +13,24 @@ export declare function runStatsigAutoCapture(client: PrecomputedEvaluationsInte
 export declare class AutoCapture {
     private _client;
     private _errorBoundary;
-    private _startTime;
-    private _deepestScroll;
     private _disabledEvents;
     private _previousLoggedPageViewUrl;
     private _eventFilterFunc?;
     private _hasLoggedPageViewEnd;
-    private _inactiveTimer;
+    private _engagementManager;
+    private _rageClickManager;
     constructor(_client: PrecomputedEvaluationsInterface, options?: AutoCaptureOptions);
     private _addEventHandlers;
     private _addPageViewTracking;
     private _autoLogEvent;
-    private _bumpInactiveTimer;
     private _initialize;
     private _logError;
     private _logSessionStart;
     private _tryLogPageView;
     private _tryLogPageViewEnd;
+    private _logRageClick;
     private _logPerformance;
     private _enqueueAutoCapture;
-    private _scrollEventHandler;
     private _isNewSession;
     private _getSessionFromClient;
 }

package/src/AutoCapture.js

@@ -3,9 +3,11 @@ 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 Utils_1 = require("./Utils");
-const payloadUtils_1 = require("./payloadUtils");
-const PAGE_INACTIVE_TIMEOUT = 600000;
+const EngagementManager_1 = require("./EngagementManager");
+const RageClickManager_1 = require("./RageClickManager");
+const commonUtils_1 = require("./commonUtils");
+const eventUtils_1 = require("./eventUtils");
+const metadataUtils_1 = require("./metadataUtils");
 const AUTO_EVENT_MAPPING = {
     submit: AutoCaptureEvent_1.AutoCaptureEventName.FORM_SUBMIT,
     click: AutoCaptureEvent_1.AutoCaptureEventName.CLICK,
@@ -28,12 +30,9 @@ class AutoCapture {
     constructor(_client, options) {
         var _a, _b, _c;
         this._client = _client;
-        this._startTime = Date.now();
-        this._deepestScroll = 0;
         this._disabledEvents = {};
         this._previousLoggedPageViewUrl = null;
         this._hasLoggedPageViewEnd = false;
-        this._inactiveTimer = null;
         const { sdkKey, errorBoundary, values } = _client.getContext();
         this._disabledEvents = (_b = (_a = values === null || values === void 0 ? void 0 : values.auto_capture_settings) === null || _a === void 0 ? void 0 : _a.disabled_events) !== null && _b !== void 0 ? _b : {};
         this._errorBoundary = errorBoundary;
@@ -44,6 +43,8 @@ class AutoCapture {
             this._disabledEvents =
                 (_b = (_a = values === null || values === void 0 ? void 0 : values.auto_capture_settings) === null || _a === void 0 ? void 0 : _a.disabled_events) !== null && _b !== void 0 ? _b : this._disabledEvents;
         });
+        this._engagementManager = new EngagementManager_1.EngagementManager();
+        this._rageClickManager = new RageClickManager_1.default();
         this._eventFilterFunc = options === null || options === void 0 ? void 0 : options.eventFilterFunc;
         const doc = (0, client_core_1._getDocumentSafe)();
         if (!(0, client_core_1._isServerEnv)()) {
@@ -65,17 +66,24 @@ class AutoCapture {
             return;
         }
         const eventHandler = (event, userAction = true) => {
-            this._autoLogEvent(event || win.event);
+            var _a;
+            const e = event || ((_a = (0, client_core_1._getWindowSafe)()) === null || _a === void 0 ? void 0 : _a.event);
+            this._autoLogEvent(e);
             if (userAction) {
-                this._bumpInactiveTimer();
+                this._engagementManager.bumpInactiveTimer();
+            }
+            if (e.type === 'click' && e instanceof MouseEvent) {
+                const isRageClick = this._rageClickManager.isRageClick(e.clientX, e.clientY, Date.now());
+                if (isRageClick) {
+                    this._logRageClick(e);
+                }
             }
         };
-        (0, Utils_1._registerEventHandler)(doc, 'click', (e) => eventHandler(e));
-        (0, Utils_1._registerEventHandler)(doc, 'submit', (e) => eventHandler(e));
-        (0, Utils_1._registerEventHandler)(win, 'error', (e) => eventHandler(e, false));
-        (0, Utils_1._registerEventHandler)(win, 'pagehide', () => this._tryLogPageViewEnd());
-        (0, Utils_1._registerEventHandler)(win, 'beforeunload', () => this._tryLogPageViewEnd());
-        (0, Utils_1._registerEventHandler)(win, 'scroll', () => this._scrollEventHandler());
+        (0, commonUtils_1._registerEventHandler)(doc, 'click', (e) => eventHandler(e));
+        (0, commonUtils_1._registerEventHandler)(doc, 'submit', (e) => eventHandler(e));
+        (0, commonUtils_1._registerEventHandler)(win, 'error', (e) => eventHandler(e, false));
+        (0, commonUtils_1._registerEventHandler)(win, 'pagehide', () => this._tryLogPageViewEnd());
+        (0, commonUtils_1._registerEventHandler)(win, 'beforeunload', () => this._tryLogPageViewEnd());
     }
     _addPageViewTracking() {
         const win = (0, client_core_1._getWindowSafe)();
@@ -83,7 +91,7 @@ class AutoCapture {
         if (!win || !doc) {
             return;
         }
-        (0, Utils_1._registerEventHandler)(win, 'popstate', () => this._tryLogPageView());
+        (0, commonUtils_1._registerEventHandler)(win, 'popstate', () => this._tryLogPageView());
         window.history.pushState = new Proxy(window.history.pushState, {
             apply: (target, thisArg, [state, unused, url]) => {
                 target.apply(thisArg, [state, unused, url]);
@@ -99,33 +107,23 @@ class AutoCapture {
             this._logError(event);
             return;
         }
-        const target = (0, Utils_1._getTargetNode)(event);
+        const target = (0, commonUtils_1._getTargetNode)(event);
         if (!target) {
             return;
         }
-        if (!(0, Utils_1._shouldLogEvent)(event, target)) {
+        if (!(0, commonUtils_1._shouldLogEvent)(event, target)) {
             return;
         }
         const eventName = AUTO_EVENT_MAPPING[eventType];
         if (!eventName) {
             return;
         }
-        const { value, metadata } = (0, Utils_1._gatherEventData)(target);
-        this._enqueueAutoCapture(eventName, value, metadata);
-    }
-    _bumpInactiveTimer() {
-        const win = (0, client_core_1._getWindowSafe)();
-        if (!win) {
-            return;
-        }
-        if (this._inactiveTimer) {
-            clearTimeout(this._inactiveTimer);
-        }
-        this._inactiveTimer = win.setTimeout(() => {
-            this._tryLogPageViewEnd(true);
-        }, PAGE_INACTIVE_TIMEOUT);
+        const { value, metadata } = (0, eventUtils_1._gatherEventData)(target);
+        const allMetadata = (0, metadataUtils_1._gatherAllMetadata)((0, commonUtils_1._getSafeUrl)());
+        this._enqueueAutoCapture(eventName, value, Object.assign(Object.assign({}, allMetadata), metadata));
     }
     _initialize() {
+        this._engagementManager.startInactivityTracking(() => this._tryLogPageViewEnd(true));
         this._addEventHandlers();
         this._addPageViewTracking();
         this._logSessionStart();
@@ -159,40 +157,49 @@ class AutoCapture {
             if (!this._isNewSession(session)) {
                 return;
             }
-            this._enqueueAutoCapture(AutoCaptureEvent_1.AutoCaptureEventName.SESSION_START, (0, Utils_1._getSanitizedPageUrl)(), { sessionID: session.data.sessionID }, { flushImmediately: true });
+            this._enqueueAutoCapture(AutoCaptureEvent_1.AutoCaptureEventName.SESSION_START, (0, commonUtils_1._getSanitizedPageUrl)(), { sessionID: session.data.sessionID }, { flushImmediately: true });
         }
         catch (err) {
             this._errorBoundary.logError('AC::logSession', err);
         }
     }
     _tryLogPageView() {
-        const url = (0, Utils_1._getSafeUrl)();
+        const url = (0, commonUtils_1._getSafeUrl)();
         const last = this._previousLoggedPageViewUrl;
         if (last && url.href === last.href) {
             return;
         }
+        this._engagementManager.setLastPageViewTime(Date.now());
         this._previousLoggedPageViewUrl = url;
         this._hasLoggedPageViewEnd = false;
-        const payload = (0, payloadUtils_1._gatherPageViewPayload)(url);
-        this._enqueueAutoCapture(AutoCaptureEvent_1.AutoCaptureEventName.PAGE_VIEW, (0, Utils_1._getSanitizedPageUrl)(), payload, {
+        const payload = (0, metadataUtils_1._gatherAllMetadata)(url);
+        this._enqueueAutoCapture(AutoCaptureEvent_1.AutoCaptureEventName.PAGE_VIEW, (0, commonUtils_1._getSanitizedPageUrl)(), payload, {
             flushImmediately: true,
             addNewSessionMetadata: true,
         });
-        this._bumpInactiveTimer();
+        this._engagementManager.bumpInactiveTimer();
     }
     _tryLogPageViewEnd(dueToInactivity = false) {
         if (this._hasLoggedPageViewEnd) {
             return;
         }
         this._hasLoggedPageViewEnd = true;
-        this._enqueueAutoCapture(AutoCaptureEvent_1.AutoCaptureEventName.PAGE_VIEW_END, (0, Utils_1._getSanitizedPageUrl)(), {
-            scrollDepth: this._deepestScroll,
-            pageViewLength: Date.now() - this._startTime,
-            dueToInactivity,
-        }, { flushImmediately: true });
+        const scrollMetrics = this._engagementManager.getScrollMetrics();
+        const pageViewLength = this._engagementManager.getPageViewLength();
+        this._enqueueAutoCapture(AutoCaptureEvent_1.AutoCaptureEventName.PAGE_VIEW_END, (0, commonUtils_1._getSanitizedPageUrl)(), Object.assign(Object.assign({}, scrollMetrics), { pageViewLength,
+            dueToInactivity }), {
+            flushImmediately: true,
+        });
+    }
+    _logRageClick(e) {
+        const { value, metadata } = (0, eventUtils_1._gatherEventData)(e.target);
+        this._enqueueAutoCapture(AutoCaptureEvent_1.AutoCaptureEventName.RAGE_CLICK, value, Object.assign(Object.assign({ x: e.clientX, y: e.clientY, timestamp: Date.now() }, (0, metadataUtils_1._gatherAllMetadata)((0, commonUtils_1._getSafeUrl)())), metadata));
     }
     _logPerformance() {
         const win = (0, client_core_1._getWindowSafe)();
+        if (!win || !win.performance) {
+            return;
+        }
         if (typeof (win === null || win === void 0 ? void 0 : win.performance) === 'undefined' ||
             typeof win.performance.getEntriesByType !== 'function' ||
             typeof win.performance.getEntriesByName !== 'function') {
@@ -217,14 +224,7 @@ class AutoCapture {
                 fpEntries[0] instanceof PerformancePaintTiming) {
                 metadata['first_contentful_paint_time_ms'] = fpEntries[0].startTime;
             }
-            const networkInfo = (0, Utils_1._getSafeNetworkInformation)();
-            if (networkInfo) {
-                metadata['effective_connection_type'] = networkInfo.effectiveType;
-                metadata['rtt_ms'] = networkInfo.rtt;
-                metadata['downlink_kbps'] = networkInfo.downlink;
-                metadata['save_data'] = networkInfo.saveData;
-            }
-            this._enqueueAutoCapture(AutoCaptureEvent_1.AutoCaptureEventName.PERFORMANCE, (0, Utils_1._getSanitizedPageUrl)(), metadata);
+            this._enqueueAutoCapture(AutoCaptureEvent_1.AutoCaptureEventName.PERFORMANCE, (0, commonUtils_1._getSanitizedPageUrl)(), Object.assign(Object.assign({}, metadata), (0, metadataUtils_1._getNetworkInfo)()));
         }, 1);
     }
     _enqueueAutoCapture(eventName, value, metadata, options) {
@@ -258,15 +258,6 @@ class AutoCapture {
             this._errorBoundary.logError('AC::enqueue', err);
         }
     }
-    _scrollEventHandler() {
-        var _a, _b, _c, _d;
-        const scrollHeight = (_b = (_a = (0, client_core_1._getDocumentSafe)()) === null || _a === void 0 ? void 0 : _a.body.scrollHeight) !== null && _b !== void 0 ? _b : 1;
-        const win = (0, client_core_1._getWindowSafe)();
-        const scrollY = (_c = win === null || win === void 0 ? void 0 : win.scrollY) !== null && _c !== void 0 ? _c : 1;
-        const innerHeight = (_d = win === null || win === void 0 ? void 0 : win.innerHeight) !== null && _d !== void 0 ? _d : 1;
-        this._deepestScroll = Math.max(this._deepestScroll, Math.min(100, Math.round(((scrollY + innerHeight) / scrollHeight) * 100)));
-        this._bumpInactiveTimer();
-    }
     _isNewSession(session) {
         // within the last second
         return Math.abs(session.data.startTime - Date.now()) < 1000;

package/src/AutoCaptureEvent.d.ts

@@ -7,6 +7,7 @@ export declare const AutoCaptureEventName: {
     readonly PERFORMANCE: "auto_capture::performance";
     readonly FORM_SUBMIT: "auto_capture::form_submit";
     readonly CLICK: "auto_capture::click";
+    readonly RAGE_CLICK: "auto_capture::rage_click";
 };
 export type AutoCaptureEventName = (typeof AutoCaptureEventName)[keyof typeof AutoCaptureEventName] & string;
 export type AutoCaptureEvent = StatsigEvent & {

package/src/AutoCaptureEvent.js

@@ -9,4 +9,5 @@ exports.AutoCaptureEventName = {
     PERFORMANCE: 'auto_capture::performance',
     FORM_SUBMIT: 'auto_capture::form_submit',
     CLICK: 'auto_capture::click',
+    RAGE_CLICK: 'auto_capture::rage_click',
 };

package/src/EngagementManager.d.ts

@@ -0,0 +1,23 @@
+export declare class EngagementManager {
+    private _lastScrollY;
+    private _maxScrollY;
+    private _lastScrollPercentage;
+    private _maxScrollPercentage;
+    private _lastPageViewTime;
+    private _inactiveTimer;
+    private _onInactivityCallback;
+    constructor();
+    private _initializeScrollTracking;
+    private _handleScroll;
+    getScrollMetrics(): {
+        lastScrollY: number;
+        maxScrollY: number;
+        lastScrollPercentage: number;
+        maxScrollPercentage: number;
+        scrollDepth: number;
+    };
+    getPageViewLength(): number;
+    setLastPageViewTime(time: number): void;
+    startInactivityTracking(callback: () => void): void;
+    bumpInactiveTimer(): void;
+}

package/src/EngagementManager.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EngagementManager = void 0;
+const client_core_1 = require("@statsig/client-core");
+const PAGE_INACTIVE_TIMEOUT = 600000; // 10 minutes
+class EngagementManager {
+    constructor() {
+        this._lastScrollY = 0;
+        this._maxScrollY = 0;
+        this._lastScrollPercentage = 0;
+        this._maxScrollPercentage = 0;
+        this._lastPageViewTime = Date.now();
+        this._inactiveTimer = null;
+        this._onInactivityCallback = null;
+        this._initializeScrollTracking();
+    }
+    _initializeScrollTracking() {
+        const win = (0, client_core_1._getWindowSafe)();
+        if (!win)
+            return;
+        win.addEventListener('scroll', () => this._handleScroll());
+        win.addEventListener('scrollend', () => this._handleScroll());
+        win.addEventListener('resize', () => this._handleScroll());
+    }
+    _handleScroll() {
+        const win = (0, client_core_1._getWindowSafe)();
+        const doc = (0, client_core_1._getDocumentSafe)();
+        if (!win || !doc)
+            return;
+        const scrollHeight = doc.body.scrollHeight;
+        const scrollY = win.scrollY || doc.documentElement.scrollTop || 0;
+        const innerHeight = win.innerHeight;
+        this._lastScrollY = scrollY;
+        this._maxScrollY = Math.max(this._maxScrollY, scrollY);
+        const currentScrollPercentage = Math.min(100, Math.round(((scrollY + innerHeight) / scrollHeight) * 100));
+        this._lastScrollPercentage = currentScrollPercentage;
+        this._maxScrollPercentage = Math.max(this._maxScrollPercentage, currentScrollPercentage);
+        this.bumpInactiveTimer();
+    }
+    getScrollMetrics() {
+        return {
+            lastScrollY: this._lastScrollY,
+            maxScrollY: this._maxScrollY,
+            lastScrollPercentage: this._lastScrollPercentage,
+            maxScrollPercentage: this._maxScrollPercentage,
+            scrollDepth: this._maxScrollPercentage, // deprecated
+        };
+    }
+    getPageViewLength() {
+        return Date.now() - this._lastPageViewTime;
+    }
+    setLastPageViewTime(time) {
+        this._lastPageViewTime = time;
+    }
+    startInactivityTracking(callback) {
+        this._onInactivityCallback = callback;
+    }
+    bumpInactiveTimer() {
+        const win = (0, client_core_1._getWindowSafe)();
+        if (!win) {
+            return;
+        }
+        if (this._inactiveTimer) {
+            clearTimeout(this._inactiveTimer);
+        }
+        this._inactiveTimer = win.setTimeout(() => {
+            if (this._onInactivityCallback) {
+                this._onInactivityCallback();
+            }
+        }, PAGE_INACTIVE_TIMEOUT);
+    }
+}
+exports.EngagementManager = EngagementManager;

package/src/RageClickManager.d.ts

@@ -0,0 +1,4 @@
+export default class RageClickManager {
+    private _clicks;
+    isRageClick(x: number, y: number, timestamp: number): boolean;
+}

package/src/RageClickManager.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const RAGE_CLICK_THRESHOLD_PX = 30;
+const RAGE_CLICK_TIMEOUT_MS = 1000;
+const RAGE_CLICK_CLICK_COUNT = 3;
+class RageClickManager {
+    constructor() {
+        this._clicks = [];
+    }
+    isRageClick(x, y, timestamp) {
+        // Remove clicks outside the timeout window
+        this._clicks = this._clicks.filter((click) => timestamp - click.timestamp < RAGE_CLICK_TIMEOUT_MS);
+        const isCloseEnough = (click) => {
+            const dx = x - click.x;
+            const dy = y - click.y;
+            return Math.abs(dx) + Math.abs(dy) <= RAGE_CLICK_THRESHOLD_PX;
+        };
+        // If previous clicks exist, check spatial threshold
+        if (this._clicks.length > 0 &&
+            !isCloseEnough(this._clicks[this._clicks.length - 1])) {
+            this._clicks = [];
+        }
+        this._clicks.push({ x, y, timestamp });
+        return this._clicks.length >= RAGE_CLICK_CLICK_COUNT;
+    }
+}
+exports.default = RageClickManager;

package/src/{Utils.d.ts → commonUtils.d.ts}

@@ -4,15 +4,14 @@ interface NetworkInformation {
     rtt: number;
     saveData: boolean;
 }
-export declare function _gatherDatasetProperties(el: Element): Record<string, string>;
-export declare function _gatherEventData(target: Element): {
-    value: string;
-    metadata: Record<string, string | null>;
-};
+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;
 export declare function _getSafeUrl(): URL;
 export declare function _getSanitizedPageUrl(): string;
 export declare function _registerEventHandler(element: Document | Window, eventType: string, handler: (event: Event) => void): void;
 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 {};

package/src/{Utils.js → commonUtils.js}

@@ -1,51 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports._getSafeNetworkInformation = exports._registerEventHandler = exports._getSanitizedPageUrl = exports._getSafeUrl = exports._shouldLogEvent = exports._getTargetNode = exports._gatherEventData = exports._gatherDatasetProperties = void 0;
+exports._getAnchorNodeInHierarchy = exports._getSafeTimezoneOffset = exports._getSafeTimezone = exports._getSafeNetworkInformation = exports._registerEventHandler = exports._getSanitizedPageUrl = exports._getSafeUrl = exports._shouldLogEvent = exports._getTargetNode = exports._stripEmptyValues = void 0;
 const client_core_1 = require("@statsig/client-core");
-function _gatherDatasetProperties(el) {
-    const dataset = {};
-    if (!el) {
-        return dataset;
-    }
-    const attr = el === null || el === void 0 ? void 0 : el.dataset;
-    if (!attr) {
-        return dataset;
-    }
-    for (const key in attr) {
-        dataset[`data-${key}`] = attr[key] || '';
-    }
-    return dataset;
-}
-exports._gatherDatasetProperties = _gatherDatasetProperties;
-function _gatherEventData(target) {
-    var _a;
-    const tagName = target.tagName.toLowerCase();
-    const metadata = {};
-    const value = (0, client_core_1._getCurrentPageUrlSafe)() || '';
-    metadata['tagName'] = tagName;
-    if (tagName === 'form') {
-        metadata['action'] = target.getAttribute('action');
-        metadata['method'] = (_a = target.getAttribute('method')) !== null && _a !== void 0 ? _a : 'GET';
-        metadata['formName'] = target.getAttribute('name');
-        metadata['formId'] = target.getAttribute('id');
-    }
-    if (['input', 'select', 'textarea'].includes(tagName) &&
-        target.getAttribute('type') !== 'password') {
-        metadata['content'] = target.value;
-        metadata['inputName'] = target.getAttribute('name');
-    }
-    const anchor = _getAnchorNodeInHierarchy(target);
-    if (anchor) {
-        metadata['href'] = anchor.getAttribute('href');
-    }
-    if (tagName === 'button' || anchor) {
-        metadata['content'] = (target.textContent || '').trim();
-        const dataset = _gatherDatasetProperties(anchor || target);
-        Object.assign(metadata, dataset);
-    }
-    return { value, metadata };
+function _stripEmptyValues(obj) {
+    return Object.fromEntries(Object.entries(obj).filter(([_, value]) => value != null && value !== '' && value !== undefined));
 }
-exports._gatherEventData = _gatherEventData;
+exports._stripEmptyValues = _stripEmptyValues;
 function _getTargetNode(e) {
     if (!e) {
         return null;
@@ -125,6 +85,24 @@ function _getSafeNetworkInformation() {
     return connection;
 }
 exports._getSafeNetworkInformation = _getSafeNetworkInformation;
+function _getSafeTimezone() {
+    try {
+        return Intl.DateTimeFormat().resolvedOptions().timeZone;
+    }
+    catch (e) {
+        return null;
+    }
+}
+exports._getSafeTimezone = _getSafeTimezone;
+function _getSafeTimezoneOffset() {
+    try {
+        return new Date().getTimezoneOffset();
+    }
+    catch (e) {
+        return null;
+    }
+}
+exports._getSafeTimezoneOffset = _getSafeTimezoneOffset;
 function _getAnchorNodeInHierarchy(node) {
     if (!node) {
         return null;
@@ -142,3 +120,4 @@ function _getAnchorNodeInHierarchy(node) {
     }
     return null;
 }
+exports._getAnchorNodeInHierarchy = _getAnchorNodeInHierarchy;

package/src/eventUtils.d.ts

@@ -0,0 +1,5 @@
+export declare function _gatherEventData(target: Element): {
+    value: string;
+    metadata: Record<string, unknown>;
+};
+export declare function _getMetadataFromElement(target: Element): Record<string, unknown>;

package/src/eventUtils.js

@@ -0,0 +1,178 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports._getMetadataFromElement = exports._gatherEventData = void 0;
+const client_core_1 = require("@statsig/client-core");
+const commonUtils_1 = require("./commonUtils");
+const MAX_ATTRIBUTE_LENGTH = 1000;
+const MAX_CLASS_LIST_LENGTH = 100;
+const MAX_SELECTOR_DEPTH = 50;
+function _gatherEventData(target) {
+    const tagName = target.tagName.toLowerCase();
+    const metadata = {};
+    const value = (0, client_core_1._getCurrentPageUrlSafe)() || '';
+    metadata['tagName'] = tagName;
+    const elementMetadata = _getMetadataFromElement(target);
+    Object.assign(metadata, elementMetadata);
+    if (tagName === 'form') {
+        Object.assign(metadata, _getFormMetadata(target));
+    }
+    if (['input', 'select', 'textarea'].includes(tagName) &&
+        target.getAttribute('type') !== 'password') {
+        Object.assign(metadata, _getInputMetadata(target));
+    }
+    const anchor = (0, commonUtils_1._getAnchorNodeInHierarchy)(target);
+    if (anchor) {
+        Object.assign(metadata, _getAnchorMetadata(anchor));
+    }
+    if (tagName === 'button' || anchor) {
+        Object.assign(metadata, _getButtonMetadata(anchor || target));
+    }
+    return { value, metadata };
+}
+exports._gatherEventData = _gatherEventData;
+function _getFormMetadata(target) {
+    var _a;
+    const metadata = {};
+    metadata['action'] = target.getAttribute('action');
+    metadata['method'] = (_a = target.getAttribute('method')) !== null && _a !== void 0 ? _a : 'GET';
+    metadata['formName'] = target.getAttribute('name');
+    metadata['formId'] = target.getAttribute('id');
+    return metadata;
+}
+function _getInputMetadata(target) {
+    const metadata = {};
+    metadata['content'] = target.value;
+    metadata['inputName'] = target.getAttribute('name');
+    return metadata;
+}
+function _getAnchorMetadata(anchor) {
+    const metadata = {};
+    metadata['href'] = anchor.getAttribute('href');
+    return metadata;
+}
+function _getButtonMetadata(target) {
+    const metadata = {};
+    metadata['content'] = (target.textContent || '').trim();
+    const dataset = _gatherDatasetProperties(target);
+    Object.assign(metadata, dataset);
+    return metadata;
+}
+function _gatherDatasetProperties(el) {
+    const dataset = {};
+    if (!el) {
+        return dataset;
+    }
+    const attr = el === null || el === void 0 ? void 0 : el.dataset;
+    if (!attr) {
+        return dataset;
+    }
+    for (const key in attr) {
+        dataset[`data-${key}`] = attr[key] || '';
+    }
+    return dataset;
+}
+function _truncateString(str, maxLength) {
+    if (!str)
+        return null;
+    return str.length > maxLength ? str.substring(0, maxLength) + '...' : str;
+}
+function _getMetadataFromElement(target) {
+    const metadata = {};
+    const classList = Array.from(target.classList);
+    metadata['classList'] =
+        classList.length > 0 ? classList.slice(0, MAX_CLASS_LIST_LENGTH) : null;
+    metadata['class'] = _normalizeClassAttribute(_truncateString(target.getAttribute('class'), MAX_ATTRIBUTE_LENGTH) || '');
+    metadata['id'] = _truncateString(target.getAttribute('id'), MAX_ATTRIBUTE_LENGTH);
+    metadata['ariaLabel'] = _truncateString(target.getAttribute('aria-label'), MAX_ATTRIBUTE_LENGTH);
+    metadata['selector'] = _generateCssSelector(target);
+    return metadata;
+}
+exports._getMetadataFromElement = _getMetadataFromElement;
+function _normalizeClassAttribute(className) {
+    return className.replace(/\s+/g, ' ').trim();
+}
+function hasNextSiblingWithSameTag(element) {
+    let sibling = element.nextElementSibling;
+    while (sibling) {
+        if (sibling.tagName === element.tagName) {
+            return true;
+        }
+        sibling = sibling.nextElementSibling;
+    }
+    return false;
+}
+function getElementSelector(element) {
+    const tagName = element.tagName.toLowerCase();
+    // 1. Use ID if available
+    if (element.id) {
+        return `#${element.id}`;
+    }
+    // 2. Build class-based selector
+    let selector = tagName;
+    if (element.className && typeof element.className === 'string') {
+        const classes = element.className.trim().split(/\s+/);
+        if (classes.length > 0 && classes[0] !== '') {
+            selector += '.' + classes.join('.');
+        }
+    }
+    const parent = element.parentElement;
+    if (parent && parent.children.length > 1) {
+        let nthChild = 1;
+        let nthOfType = 1;
+        let sibling = element.previousElementSibling;
+        while (sibling) {
+            nthChild++;
+            if (sibling.tagName === element.tagName) {
+                nthOfType++;
+            }
+            sibling = sibling.previousElementSibling;
+        }
+        selector += `:nth-child(${nthChild})`;
+        // Only add nth-of-type if there are other elements with the same tag
+        if (nthOfType > 1 || hasNextSiblingWithSameTag(element)) {
+            selector += `:nth-of-type(${nthOfType})`;
+        }
+    }
+    return selector;
+}
+function _generateCssSelector(element) {
+    if (!element) {
+        return '';
+    }
+    // Handle case where element has no parent (e.g., detached element)
+    if (!element.parentNode) {
+        const tagName = element.tagName.toLowerCase();
+        if (element.id) {
+            return `#${element.id}`;
+        }
+        let selector = tagName;
+        if (element.className && typeof element.className === 'string') {
+            const classes = element.className.trim().split(/\s+/);
+            if (classes.length > 0 && classes[0] !== '') {
+                selector += '.' + classes.join('.');
+            }
+        }
+        return selector;
+    }
+    // Build the full selector path
+    const selectors = [];
+    let currentElement = element;
+    let depth = 0;
+    while (currentElement &&
+        currentElement.nodeType === Node.ELEMENT_NODE &&
+        depth < MAX_SELECTOR_DEPTH) {
+        const selector = getElementSelector(currentElement);
+        selectors.unshift(selector);
+        // Stop if we found an ID (since IDs should be unique)
+        if (currentElement.id) {
+            break;
+        }
+        currentElement = currentElement.parentElement;
+        // Stop at document body to avoid going too far up
+        if (currentElement && currentElement.tagName.toLowerCase() === 'body') {
+            break;
+        }
+        depth++;
+    }
+    return selectors.join(' > ');
+}

package/src/metadataUtils.d.ts

@@ -0,0 +1,3 @@
+export declare function _gatherCommonMetadata(url: URL): Record<string, string | number | null>;
+export declare function _gatherAllMetadata(url: URL): Record<string, string | number>;
+export declare function _getNetworkInfo(): Record<string, string | number | boolean>;

package/src/metadataUtils.js

@@ -0,0 +1,124 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports._getNetworkInfo = exports._gatherAllMetadata = exports._gatherCommonMetadata = void 0;
+const client_core_1 = require("@statsig/client-core");
+const commonUtils_1 = require("./commonUtils");
+function _gatherCommonMetadata(url) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const safeDoc = (0, client_core_1._getDocumentSafe)();
+    const safeWnd = (0, client_core_1._getWindowSafe)();
+    return (0, commonUtils_1._stripEmptyValues)(Object.assign({ title: safeDoc === null || safeDoc === void 0 ? void 0 : safeDoc.title, current_url: (_a = safeWnd === null || safeWnd === void 0 ? void 0 : safeWnd.location) === null || _a === void 0 ? void 0 : _a.href, user_agent: ((_b = safeWnd === null || safeWnd === void 0 ? void 0 : safeWnd.navigator) === null || _b === void 0 ? void 0 : _b.userAgent) &&
+            ((_d = (_c = safeWnd === null || safeWnd === void 0 ? void 0 : safeWnd.navigator) === null || _c === void 0 ? void 0 : _c.userAgent) === null || _d === void 0 ? void 0 : _d.length) > 200
+            ? safeWnd.navigator.userAgent.substring(0, 200)
+            : (_e = safeWnd === null || safeWnd === void 0 ? void 0 : safeWnd.navigator) === null || _e === void 0 ? void 0 : _e.userAgent, locale: (_f = safeWnd === null || safeWnd === void 0 ? void 0 : safeWnd.navigator) === null || _f === void 0 ? void 0 : _f.language, hostname: url.hostname, pathname: url.pathname, screen_width: (_g = safeWnd === null || safeWnd === void 0 ? void 0 : safeWnd.screen) === null || _g === void 0 ? void 0 : _g.width, screen_height: (_h = safeWnd === null || safeWnd === void 0 ? void 0 : safeWnd.screen) === null || _h === void 0 ? void 0 : _h.height, viewport_width: safeWnd === null || safeWnd === void 0 ? void 0 : safeWnd.innerWidth, viewport_height: safeWnd === null || safeWnd === void 0 ? void 0 : safeWnd.innerHeight, timestamp: Date.now(), timezone: (0, commonUtils_1._getSafeTimezone)(), timezone_offset: (0, commonUtils_1._getSafeTimezoneOffset)() }, _getNetworkInfo()));
+}
+exports._gatherCommonMetadata = _gatherCommonMetadata;
+function _gatherAllMetadata(url) {
+    const safeDoc = (0, client_core_1._getDocumentSafe)();
+    const safeWnd = (0, client_core_1._getWindowSafe)();
+    if (!safeDoc || !safeWnd) {
+        return {};
+    }
+    const referrerInfo = getReferrerInfo(safeDoc);
+    const commonInfo = _gatherCommonMetadata(url);
+    const campaignParams = getCampaignParams(url);
+    const queryParams = {};
+    url.searchParams.forEach((v, k) => {
+        queryParams[k] = v;
+    });
+    return Object.assign(Object.assign({}, commonInfo), (0, commonUtils_1._stripEmptyValues)(Object.assign(Object.assign(Object.assign({}, referrerInfo), campaignParams), queryParams)));
+}
+exports._gatherAllMetadata = _gatherAllMetadata;
+function _getNetworkInfo() {
+    const networkInfo = (0, commonUtils_1._getSafeNetworkInformation)();
+    const result = {};
+    if ((networkInfo === null || networkInfo === void 0 ? void 0 : networkInfo.effectiveType) !== undefined) {
+        result['effective_connection_type'] = networkInfo.effectiveType;
+    }
+    if ((networkInfo === null || networkInfo === void 0 ? void 0 : networkInfo.rtt) !== undefined) {
+        result['rtt_ms'] = networkInfo.rtt;
+    }
+    if ((networkInfo === null || networkInfo === void 0 ? void 0 : networkInfo.downlink) !== undefined) {
+        result['downlink_mbps'] = networkInfo.downlink;
+        result['downlink_kbps'] = networkInfo.downlink * 1000; // deprecated
+    }
+    if ((networkInfo === null || networkInfo === void 0 ? void 0 : networkInfo.saveData) !== undefined) {
+        result['save_data'] = networkInfo.saveData;
+    }
+    return result;
+}
+exports._getNetworkInfo = _getNetworkInfo;
+function getReferrerInfo(safeDoc) {
+    const referrer = (safeDoc === null || safeDoc === void 0 ? void 0 : safeDoc.referrer) || '';
+    if (!referrer) {
+        return {
+            referrer: null,
+            referrer_domain: null,
+            referrer_path: null,
+            searchEngine: '',
+            searchQuery: '',
+        };
+    }
+    try {
+        const url = new URL(referrer);
+        const host = url.hostname;
+        const searchEngine = ['google', 'bing', 'yahoo', 'duckduckgo', 'baidu'].find((e) => host.includes(e + '.')) || '';
+        const searchQuery = url.searchParams.get(searchEngine === 'yahoo' ? 'p' : 'q') || '';
+        return {
+            referrer,
+            referrer_domain: url.hostname,
+            referrer_path: url.pathname,
+            searchEngine,
+            searchQuery,
+        };
+    }
+    catch (e) {
+        return {
+            referrer: null,
+            referrer_domain: null,
+            referrer_path: null,
+            searchEngine: '',
+            searchQuery: '',
+        };
+    }
+}
+function getCampaignParams(url) {
+    const urlParams = url.searchParams;
+    const campaignParams = {};
+    const commonUtms = [
+        'utm_source',
+        'utm_medium',
+        'utm_campaign',
+        'utm_term',
+        'utm_content',
+        'msclkid', // Bing
+        'dclid', // DoubleClick
+        'fbclid', // Facebook
+        'gad_source', // Google
+        'gclid', // Google
+        'gclsrc', // Google
+        'wbraid', // Google
+        'utm_id', // Hubspot
+        'irclid', // Impact
+        'igshid', // Instagram
+        '_kx', // Klaviyo
+        'li_fat_id', // LinkedIn
+        'mc_cid', // Mailchimp
+        'mc_eid', // Mailchimp
+        'epik', // Pinterest
+        'qclid', // Quora
+        'rdt_cid', // Reddit
+        'sccid', // Snapchat
+        'ttc', // TikTok
+        'ttclid', // TikTok
+        'ttc_id', // TikTok
+        'twclid', // Twitter
+    ];
+    commonUtms.forEach((p) => {
+        const val = urlParams.get(p);
+        if (val) {
+            campaignParams[p] = val;
+        }
+    });
+    return campaignParams;
+}

package/src/payloadUtils.d.ts

@@ -1 +0,0 @@
-export declare function _gatherPageViewPayload(url: URL): Record<string, string | number>;

package/src/payloadUtils.js

@@ -1,73 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports._gatherPageViewPayload = void 0;
-const client_core_1 = require("@statsig/client-core");
-function _gatherPageViewPayload(url) {
-    var _a, _b;
-    const safeDoc = (0, client_core_1._getDocumentSafe)();
-    const safeWnd = (0, client_core_1._getWindowSafe)();
-    if (!safeDoc || !safeWnd) {
-        return {};
-    }
-    const navigator = safeWnd === null || safeWnd === void 0 ? void 0 : safeWnd.navigator;
-    const referrer = (safeDoc === null || safeDoc === void 0 ? void 0 : safeDoc.referrer) || '';
-    let refUrl = new URL('empty:');
-    if (referrer) {
-        try {
-            refUrl = new URL(referrer || 'empty:');
-        }
-        catch (e) {
-            /* empty */
-        }
-    }
-    const searchInfo = getSearchInfo(refUrl);
-    const campaignParams = getCampaignParams(url);
-    const queryParams = {};
-    url.searchParams.forEach((v, k) => {
-        queryParams[k] = v;
-    });
-    return Object.assign(Object.assign(Object.assign(Object.assign({}, searchInfo), campaignParams), queryParams), { title: (safeDoc === null || safeDoc === void 0 ? void 0 : safeDoc.title) || '', locale: (navigator === null || navigator === void 0 ? void 0 : navigator.language) || 'unknown', hostname: url.hostname || 'unknown', pathname: url.pathname || 'unknown', referrer, screen_width: ((_a = safeWnd === null || safeWnd === void 0 ? void 0 : safeWnd.screen) === null || _a === void 0 ? void 0 : _a.width) || 'unknown', screen_height: ((_b = safeWnd === null || safeWnd === void 0 ? void 0 : safeWnd.screen) === null || _b === void 0 ? void 0 : _b.height) || 'unknown', viewport_width: (safeWnd === null || safeWnd === void 0 ? void 0 : safeWnd.innerWidth) || 'unknown', viewport_height: (safeWnd === null || safeWnd === void 0 ? void 0 : safeWnd.innerHeight) || 'unknown' });
-}
-exports._gatherPageViewPayload = _gatherPageViewPayload;
-function getCampaignParams(url) {
-    const urlParams = url.searchParams;
-    const campaignParams = {};
-    const commonUtms = [
-        'utm_source',
-        'utm_medium',
-        'utm_campaign',
-        'utm_term',
-        'utm_content',
-        'gclid', // Google
-        'gclsrc', // Google
-        'dclid', // DoubleClick
-        'fbclid', // Facebook
-        'msclkid', // Bing
-        'mc_eid', // Mailchimp
-        'mc_cid', // Mailchimp
-        'twclid', // Twitter
-        'li_fat_id', // LinkedIn
-        'igshid', // Instagram
-        'utm_id', // Hubspot
-        'ttc', // TikTok
-        'ttclid', // TikTok
-        'ttc_id', // TikTok
-    ];
-    commonUtms.forEach((p) => {
-        const val = urlParams.get(p);
-        if (val) {
-            campaignParams[p] = val;
-        }
-    });
-    return campaignParams;
-}
-function getSearchEngine(refUrl) {
-    const host = refUrl.hostname;
-    const engine = ['google', 'bing', 'yahoo', 'duckduckgo', 'baidu'].find((e) => host.includes(e + '.'));
-    return engine || '';
-}
-function getSearchInfo(refUrl) {
-    const searchEngine = getSearchEngine(refUrl);
-    const searchQuery = refUrl.searchParams.get(searchEngine === 'yahoo' ? 'p' : 'q') || '';
-    return { searchEngine, searchQuery };
-}