mixpanel-browser 2.71.0 → 2.72.0

package/dist/mixpanel-with-async-recorder.cjs.d.ts

@@ -43,20 +43,22 @@ export interface OutTrackingOptions extends ClearOptOutInOutOptions {
 export type RageClickConfig =
   | boolean
   | {
-    /** Distance threshold in pixels for clicks to be considered within the same area (default: 30) */
-    threshold_px?: number;
-    /** Time window in milliseconds for clicks to be considered rapid (default: 1000) */
-    timeout_ms?: number;
-    /** Number of clicks required to trigger a rage click event (default: 3) */
-    click_count?: number;
-  };
+      /** Distance threshold in pixels for clicks to be considered within the same area (default: 30) */
+      threshold_px?: number;
+      /** Time window in milliseconds for clicks to be considered rapid (default: 1000) */
+      timeout_ms?: number;
+      /** Number of clicks required to trigger a rage click event (default: 3) */
+      click_count?: number;
+      /** Whether to only track rage clicks on interactive elements like buttons, links, inputs (default: false) */
+      interactive_elements_only?: boolean;
+    };
 
 export type DeadClickConfig =
   | boolean
   | {
-    /** Time in milliseconds to wait after a click before qualifying it as dead (default: 500) */
-    timeout_ms?: number;
-  };
+      /** Time in milliseconds to wait after a click before qualifying it as dead (default: 500) */
+      timeout_ms?: number;
+    };
 
 export interface RegisterOptions {
   persistent: boolean;
@@ -149,6 +151,10 @@ export interface AutocaptureConfig {
   block_element_callback?: (element: Element, event: Event) => boolean;
 }
 
+export interface FlagsConfig {
+  context: Dict;
+}
+
 export interface Config {
   api_host: string;
   api_routes: {
@@ -165,6 +171,7 @@ export interface Config {
   cookie_domain: string;
   cross_site_cookie: boolean;
   cross_subdomain_cookie: boolean;
+  flags: boolean | FlagsConfig;
   persistence: Persistence;
   persistence_name: string;
   cookie_name: string;
@@ -277,11 +284,41 @@ export interface Group {
   unset(prop: string, callback?: Callback): void;
 }
 
+export interface FlagsVariant {
+  key: string;
+  value: any;
+  experiment_id?: string;
+  is_experiment_active?: boolean;
+  is_qa_tester?: boolean;
+}
+
+export interface FlagsUpdateContextOptions {
+  replace?: boolean;
+}
+
+export interface FlagsManager {
+  are_flags_ready(): boolean;
+  get_variant(
+    featureName: string,
+    fallback: FlagsVariant
+  ): Promise<FlagsVariant>;
+  get_variant_sync(featureName: string, fallback: FlagsVariant): FlagsVariant;
+  get_variant_value(featureName: string, fallbackValue: any): Promise<any>;
+  get_variant_value_sync(featureName: string, fallbackValue: any): any;
+  is_enabled(featureName: string, fallbackValue?: boolean): Promise<boolean>;
+  is_enabled_sync(featureName: string, fallbackValue?: boolean): boolean;
+  update_context(
+    context: Dict,
+    options?: FlagsUpdateContextOptions
+  ): Promise<void>;
+}
+
 export interface Mixpanel {
   add_group(group_key: string, group_id: string, callback?: Callback): void;
   alias(alias: string, original?: string): void;
   clear_opt_in_out_tracking(options?: Partial<ClearOptOutInOutOptions>): void;
   disable(events?: string[]): void;
+  flags: FlagsManager;
   get_config(prop_name?: string): any;
   get_distinct_id(): any;
   get_group(group_key: string, group_id: string): Group;

package/dist/mixpanel-with-async-recorder.cjs.js

@@ -2,7 +2,7 @@
 
 var Config = {
     DEBUG: false,
-    LIB_VERSION: '2.71.0'
+    LIB_VERSION: '2.72.0'
 };
 
 // since es6 imports are static and we run unit tests from the console, window won't be defined when importing this file
@@ -2892,20 +2892,65 @@ function isDefinitelyNonInteractive(element) {
     return false;
 }
 
+/**
+ * Get the composed path of a click event for elements embedded in shadow DOM.
+ * @param {Event} event - event to get the composed path from
+ * @returns {Array} the composed path of the click event
+*/
+function getClickEventComposedPath(event) {
+    if ('composedPath' in event) {
+        return event['composedPath']();
+    }
+
+    return [];
+}
+
+/**
+ * Get the element from a click event, accounting for elements embedded in shadow DOM.
+ * @param {Event} event - event to get the target from
+ * @returns {Element | null} the element that was the target of the click event
+ */
+function getClickEventTargetElement(event) {
+    var path = getClickEventComposedPath(event);
+
+    if (path && path.length > 0) {
+        return path[0];
+    }
+
+    return event['target'] || event['srcElement'];
+}
+
 /** @const */ var DEFAULT_RAGE_CLICK_THRESHOLD_PX = 30;
 /** @const */ var DEFAULT_RAGE_CLICK_TIMEOUT_MS = 1000;
 /** @const */ var DEFAULT_RAGE_CLICK_CLICK_COUNT = 4;
+/** @const */ var DEFAULT_RAGE_CLICK_INTERACTIVE_ELEMENTS_ONLY = false;
 
 function RageClickTracker() {
     this.clicks = [];
 }
 
-RageClickTracker.prototype.isRageClick = function(x, y, options) {
+/**
+ * Determines if a click event is part of a rage click sequence.
+ * @param {Event} event - the original click event.
+ * @param {import('../index.d.ts').RageClickConfig} options - configuration options for rage click detection.
+ * @returns {boolean} - true if the click is considered a rage click, false otherwise.
+ */
+RageClickTracker.prototype.isRageClick = function(event, options) {
     options = options || {};
     var thresholdPx = options['threshold_px'] || DEFAULT_RAGE_CLICK_THRESHOLD_PX;
     var timeoutMs = options['timeout_ms'] || DEFAULT_RAGE_CLICK_TIMEOUT_MS;
     var clickCount = options['click_count'] || DEFAULT_RAGE_CLICK_CLICK_COUNT;
+    var interactiveElementsOnly = options['interactive_elements_only'] || DEFAULT_RAGE_CLICK_INTERACTIVE_ELEMENTS_ONLY;
+
+    if (interactiveElementsOnly) {
+        var target = getClickEventTargetElement(event);
+        if (!target || isDefinitelyNonInteractive(target)) {
+            return false;
+        }
+    }
+
     var timestamp = Date.now();
+    var x = event['pageX'], y = event['pageY'];
 
     var lastClick = this.clicks[this.clicks.length - 1];
     if (
@@ -2936,28 +2981,16 @@ ShadowDOMObserver.prototype.getEventTarget = function(event) {
     if (!this.observedShadowRoots) {
         return;
     }
-    var path = this.getComposedPath(event);
-    if (path && path.length) {
-        return path[0];
-    }
 
-    return event['target'] || event['srcElement'];
+    return getClickEventTargetElement(event);
 };
 
-
-ShadowDOMObserver.prototype.getComposedPath = function(event) {
-    if ('composedPath' in event) {
-        return event['composedPath']();
-    }
-
-    return [];
-};
 ShadowDOMObserver.prototype.observeFromEvent = function(event) {
     if (!this.observedShadowRoots) {
         return;
     }
 
-    var path = this.getComposedPath(event);
+    var path = getClickEventComposedPath(event);
 
     // Check each element in path for shadow roots
     for (var i = 0; i < path.length; i++) {
@@ -3509,6 +3542,11 @@ Autocapture.prototype._trackPageLeave = function(ev, currentUrl, currentScrollHe
         // User has navigated away already ending their impression.
         return;
     }
+
+    if (!this.getConfig(CONFIG_TRACK_PAGE_LEAVE) && !this.mp.is_recording_heatmap_data()) {
+        return;
+    }
+
     this.hasTrackedScrollSession = true;
     var viewportHeight = Math.max(document$1.documentElement.clientHeight, win.innerHeight || 0);
     var scrollPercentage = Math.round(Math.max(this.maxScrollViewDepth - viewportHeight, 0) / (currentScrollHeight - viewportHeight) * 100);
@@ -3528,12 +3566,9 @@ Autocapture.prototype._trackPageLeave = function(ev, currentUrl, currentScrollHe
         '$current_url': currentUrl || _.info.currentUrl(),
         '$viewportHeight': viewportHeight, // This is the fold line
         '$viewportWidth':  Math.max(document$1.documentElement.clientWidth, win.innerWidth || 0),
+        '$captured_for_heatmap': this.mp.is_recording_heatmap_data()
     }, DEFAULT_PROPS);
 
-    if (this.mp.is_recording_heatmap_data() && !this.getConfig(CONFIG_TRACK_PAGE_LEAVE)) {
-        props['$captured_for_heatmap'] = true;
-    }
-
     // Send with beacon transport to ensure event is sent before unload
     this.mp.track(MP_EV_PAGE_LEAVE, props, {transport: 'sendBeacon'});
 };
@@ -3707,7 +3742,7 @@ Autocapture.prototype.initRageClickTracking = function() {
             return;
         }
 
-        if (this._rageClickTracker.isRageClick(ev['pageX'], ev['pageY'], currentRageClickConfig)) {
+        if (this._rageClickTracker.isRageClick(ev, currentRageClickConfig)) {
             this.trackDomEvent(ev, MP_EV_RAGE_CLICK);
         }
     }.bind(this);
@@ -6895,6 +6930,7 @@ var DEFAULT_CONFIG = {
     'record_block_selector':             'img, video, audio',
     'record_canvas':                     false,
     'record_collect_fonts':              false,
+    'record_console':                    true,
     'record_heatmap_data':               false,
     'record_idle_timeout_ms':            30 * 60 * 1000, // 30 minutes
     'record_mask_text_class':            new RegExp('^(mp-mask|fs-mask|amp-mask|rr-mask|ph-mask)$'),

package/dist/mixpanel-with-recorder.d.ts

@@ -43,20 +43,22 @@ export interface OutTrackingOptions extends ClearOptOutInOutOptions {
 export type RageClickConfig =
   | boolean
   | {
-    /** Distance threshold in pixels for clicks to be considered within the same area (default: 30) */
-    threshold_px?: number;
-    /** Time window in milliseconds for clicks to be considered rapid (default: 1000) */
-    timeout_ms?: number;
-    /** Number of clicks required to trigger a rage click event (default: 3) */
-    click_count?: number;
-  };
+      /** Distance threshold in pixels for clicks to be considered within the same area (default: 30) */
+      threshold_px?: number;
+      /** Time window in milliseconds for clicks to be considered rapid (default: 1000) */
+      timeout_ms?: number;
+      /** Number of clicks required to trigger a rage click event (default: 3) */
+      click_count?: number;
+      /** Whether to only track rage clicks on interactive elements like buttons, links, inputs (default: false) */
+      interactive_elements_only?: boolean;
+    };
 
 export type DeadClickConfig =
   | boolean
   | {
-    /** Time in milliseconds to wait after a click before qualifying it as dead (default: 500) */
-    timeout_ms?: number;
-  };
+      /** Time in milliseconds to wait after a click before qualifying it as dead (default: 500) */
+      timeout_ms?: number;
+    };
 
 export interface RegisterOptions {
   persistent: boolean;
@@ -149,6 +151,10 @@ export interface AutocaptureConfig {
   block_element_callback?: (element: Element, event: Event) => boolean;
 }
 
+export interface FlagsConfig {
+  context: Dict;
+}
+
 export interface Config {
   api_host: string;
   api_routes: {
@@ -165,6 +171,7 @@ export interface Config {
   cookie_domain: string;
   cross_site_cookie: boolean;
   cross_subdomain_cookie: boolean;
+  flags: boolean | FlagsConfig;
   persistence: Persistence;
   persistence_name: string;
   cookie_name: string;
@@ -277,11 +284,41 @@ export interface Group {
   unset(prop: string, callback?: Callback): void;
 }
 
+export interface FlagsVariant {
+  key: string;
+  value: any;
+  experiment_id?: string;
+  is_experiment_active?: boolean;
+  is_qa_tester?: boolean;
+}
+
+export interface FlagsUpdateContextOptions {
+  replace?: boolean;
+}
+
+export interface FlagsManager {
+  are_flags_ready(): boolean;
+  get_variant(
+    featureName: string,
+    fallback: FlagsVariant
+  ): Promise<FlagsVariant>;
+  get_variant_sync(featureName: string, fallback: FlagsVariant): FlagsVariant;
+  get_variant_value(featureName: string, fallbackValue: any): Promise<any>;
+  get_variant_value_sync(featureName: string, fallbackValue: any): any;
+  is_enabled(featureName: string, fallbackValue?: boolean): Promise<boolean>;
+  is_enabled_sync(featureName: string, fallbackValue?: boolean): boolean;
+  update_context(
+    context: Dict,
+    options?: FlagsUpdateContextOptions
+  ): Promise<void>;
+}
+
 export interface Mixpanel {
   add_group(group_key: string, group_id: string, callback?: Callback): void;
   alias(alias: string, original?: string): void;
   clear_opt_in_out_tracking(options?: Partial<ClearOptOutInOutOptions>): void;
   disable(events?: string[]): void;
+  flags: FlagsManager;
   get_config(prop_name?: string): any;
   get_distinct_id(): any;
   get_group(group_key: string, group_id: string): Group;