mixpanel-browser 2.69.1 → 2.71.0

package/src/autocapture/index.js

@@ -1,11 +1,12 @@
 import { _, document, safewrap, safewrapClass } from '../utils';
 import { window } from '../window';
 import {
-    getPropsForDOMEvent, logger, minDOMApisSupported,
-    EV_CHANGE, EV_CLICK, EV_HASHCHANGE, EV_MP_LOCATION_CHANGE, EV_POPSTATE,
-    EV_SCROLLEND, EV_SUBMIT
+    getPolyfillScrollEndFunction, getPropsForDOMEvent, logger, minDOMApisSupported,
+    EV_CHANGE, EV_CLICK, EV_HASHCHANGE, EV_MP_LOCATION_CHANGE, EV_LOAD,
+    EV_POPSTATE, EV_SCROLL, EV_SCROLLEND, EV_SUBMIT, EV_VISIBILITYCHANGE
 } from './utils';
 import { RageClickTracker } from './rageclick';
+import { DeadClickTracker, DEFAULT_DEAD_CLICK_TIMEOUT_MS } from './deadclick';
 
 var AUTOCAPTURE_CONFIG_KEY = 'autocapture';
 var LEGACY_PAGEVIEW_CONFIG_KEY = 'track_pageview';
@@ -26,10 +27,12 @@ var CONFIG_CAPTURE_TEXT_CONTENT = 'capture_text_content';
 var CONFIG_SCROLL_CAPTURE_ALL = 'scroll_capture_all';
 var CONFIG_SCROLL_CHECKPOINTS = 'scroll_depth_percent_checkpoints';
 var CONFIG_TRACK_CLICK = 'click';
+var CONFIG_TRACK_DEAD_CLICK = 'dead_click';
 var CONFIG_TRACK_INPUT = 'input';
 var CONFIG_TRACK_PAGEVIEW = 'pageview';
 var CONFIG_TRACK_RAGE_CLICK = 'rage_click';
 var CONFIG_TRACK_SCROLL = 'scroll';
+var CONFIG_TRACK_PAGE_LEAVE = 'page_leave';
 var CONFIG_TRACK_SUBMIT = 'submit';
 
 var CONFIG_DEFAULTS = {};
@@ -44,10 +47,12 @@ CONFIG_DEFAULTS[CONFIG_CAPTURE_TEXT_CONTENT] = false;
 CONFIG_DEFAULTS[CONFIG_SCROLL_CAPTURE_ALL] = false;
 CONFIG_DEFAULTS[CONFIG_SCROLL_CHECKPOINTS] = [25, 50, 75, 100];
 CONFIG_DEFAULTS[CONFIG_TRACK_CLICK] = true;
+CONFIG_DEFAULTS[CONFIG_TRACK_DEAD_CLICK] = true;
 CONFIG_DEFAULTS[CONFIG_TRACK_INPUT] = true;
 CONFIG_DEFAULTS[CONFIG_TRACK_PAGEVIEW] = PAGEVIEW_OPTION_FULL_URL;
 CONFIG_DEFAULTS[CONFIG_TRACK_RAGE_CLICK] = true;
 CONFIG_DEFAULTS[CONFIG_TRACK_SCROLL] = true;
+CONFIG_DEFAULTS[CONFIG_TRACK_PAGE_LEAVE] = false;
 CONFIG_DEFAULTS[CONFIG_TRACK_SUBMIT] = true;
 
 var DEFAULT_PROPS = {
@@ -55,10 +60,12 @@ var DEFAULT_PROPS = {
 };
 
 var MP_EV_CLICK = '$mp_click';
+var MP_EV_DEAD_CLICK = '$mp_dead_click';
 var MP_EV_INPUT = '$mp_input_change';
 var MP_EV_RAGE_CLICK = '$mp_rage_click';
 var MP_EV_SCROLL = '$mp_scroll';
 var MP_EV_SUBMIT = '$mp_submit';
+var MP_EV_PAGE_LEAVE = '$mp_page_leave';
 
 /**
  * Autocapture: manages automatic event tracking
@@ -66,6 +73,9 @@ var MP_EV_SUBMIT = '$mp_submit';
  */
 var Autocapture = function(mp) {
     this.mp = mp;
+    this.maxScrollViewDepth = 0;
+    this.hasTrackedScrollSession = false;
+    this.previousScrollHeight = 0;
 };
 
 Autocapture.prototype.init = function() {
@@ -73,13 +83,15 @@ Autocapture.prototype.init = function() {
         logger.critical('Autocapture unavailable: missing required DOM APIs');
         return;
     }
-
+    this.initPageListeners();
     this.initPageviewTracking();
     this.initClickTracking();
+    this.initDeadClickTracking();
     this.initInputTracking();
     this.initScrollTracking();
     this.initSubmitTracking();
     this.initRageClickTracking();
+    this.initPageLeaveTracking();
 };
 
 Autocapture.prototype.getFullConfig = function() {
@@ -160,7 +172,8 @@ Autocapture.prototype.trackDomEvent = function(ev, mpEventName) {
 
     var isCapturedForHeatMap = this.mp.is_recording_heatmap_data() && (
         (mpEventName === MP_EV_CLICK && !this.getConfig(CONFIG_TRACK_CLICK)) ||
-        (mpEventName === MP_EV_RAGE_CLICK && !this._getRageClickConfig())
+        (mpEventName === MP_EV_RAGE_CLICK && !this._getClickTrackingConfig(CONFIG_TRACK_RAGE_CLICK)) ||
+        (mpEventName === MP_EV_DEAD_CLICK && !this._getClickTrackingConfig(CONFIG_TRACK_DEAD_CLICK))
     );
 
     var props = getPropsForDOMEvent(ev, {
@@ -179,11 +192,45 @@ Autocapture.prototype.trackDomEvent = function(ev, mpEventName) {
     }
 };
 
-Autocapture.prototype._getRageClickConfig = function() {
-    var config = this.getConfig(CONFIG_TRACK_RAGE_CLICK);
+Autocapture.prototype.initPageListeners = function() {
+    window.removeEventListener(EV_POPSTATE, this.listenerPopstate);
+    window.removeEventListener(EV_HASHCHANGE, this.listenerHashchange);
+
+    if (!this.pageviewTrackingConfig() && !this.getConfig(CONFIG_TRACK_PAGE_LEAVE) && !this.mp.get_config('record_heatmap_data')) {
+        // These are all the configs that use these listeners
+        return;
+    }
+
+    this.listenerPopstate = function() {
+        window.dispatchEvent(new Event(EV_MP_LOCATION_CHANGE));
+    };
+    this.listenerHashchange = function() {
+        window.dispatchEvent(new Event(EV_MP_LOCATION_CHANGE));
+    };
+
+    window.addEventListener(EV_POPSTATE, this.listenerPopstate);
+    window.addEventListener(EV_HASHCHANGE, this.listenerHashchange);
+    var nativePushState = window.history.pushState;
+    if (typeof nativePushState === 'function') {
+        window.history.pushState = function(state, unused, url) {
+            nativePushState.call(window.history, state, unused, url);
+            window.dispatchEvent(new Event(EV_MP_LOCATION_CHANGE));
+        };
+    }
+    var nativeReplaceState = window.history.replaceState;
+    if (typeof nativeReplaceState === 'function') {
+        window.history.replaceState = function(state, unused, url) {
+            nativeReplaceState.call(window.history, state, unused, url);
+            window.dispatchEvent(new Event(EV_MP_LOCATION_CHANGE));
+        };
+    }
+};
+
+Autocapture.prototype._getClickTrackingConfig = function(configKey) {
+    var config = this.getConfig(configKey);
 
     if (!config) {
-        return null; // rage click tracking disabled
+        return null; // click tracking disabled
     }
 
     if (config === true) {
@@ -197,6 +244,68 @@ Autocapture.prototype._getRageClickConfig = function() {
     return {}; // fallback to defaults for any other truthy value
 };
 
+Autocapture.prototype._trackPageLeave = function(ev, currentUrl, currentScrollHeight) {
+    if (this.hasTrackedScrollSession) {
+        // User has navigated away already ending their impression.
+        return;
+    }
+    this.hasTrackedScrollSession = true;
+    var viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+    var scrollPercentage = Math.round(Math.max(this.maxScrollViewDepth - viewportHeight, 0) / (currentScrollHeight - viewportHeight) * 100);
+    var foldLinePercentage = Math.round((viewportHeight / currentScrollHeight) * 100);
+    if (currentScrollHeight <= viewportHeight) {
+        // If the content fits within the viewport, consider it fully scrolled
+        scrollPercentage = 100;
+        foldLinePercentage = 100;
+    }
+
+    var props = _.extend({
+        '$max_scroll_view_depth': this.maxScrollViewDepth,
+        '$max_scroll_percentage': scrollPercentage,
+        '$fold_line_percentage': foldLinePercentage,
+        '$scroll_height':  currentScrollHeight,
+        '$event_type': ev.type,
+        '$current_url': currentUrl || _.info.currentUrl(),
+        '$viewportHeight': viewportHeight, // This is the fold line
+        '$viewportWidth':  Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
+    }, 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'});
+};
+
+Autocapture.prototype._initScrollDepthTracking = function() {
+    window.removeEventListener(EV_SCROLL, this.listenerScrollDepth);
+    window.removeEventListener(EV_SCROLLEND, this.listenerScrollDepth);
+
+    if (!this.mp.get_config('record_heatmap_data')) {
+        return;
+    }
+
+    logger.log('Initializing scroll depth tracking');
+
+    this.maxScrollViewDepth = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+
+    var updateScrollDepth = function() {
+        if (this.currentUrlBlocked()) {
+            return;
+        }
+        var scrollViewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) + window.scrollY;
+        if (scrollViewHeight > this.maxScrollViewDepth) {
+            this.maxScrollViewDepth = scrollViewHeight;
+        }
+        this.previousScrollHeight = document.body.scrollHeight;
+    }.bind(this);
+
+    var scrollEndPolyfill = getPolyfillScrollEndFunction(updateScrollDepth);
+    this.listenerScrollDepth = scrollEndPolyfill.listener;
+    window.addEventListener(scrollEndPolyfill.eventType, this.listenerScrollDepth);
+};
+
 Autocapture.prototype.initClickTracking = function() {
     window.removeEventListener(EV_CLICK, this.listenerClick);
 
@@ -205,12 +314,49 @@ Autocapture.prototype.initClickTracking = function() {
     }
     logger.log('Initializing click tracking');
 
-    this.listenerClick = window.addEventListener(EV_CLICK, function(ev) {
+    this.listenerClick = function(ev) {
         if (!this.getConfig(CONFIG_TRACK_CLICK) && !this.mp.is_recording_heatmap_data()) {
             return;
         }
         this.trackDomEvent(ev, MP_EV_CLICK);
-    }.bind(this));
+    }.bind(this);
+    window.addEventListener(EV_CLICK, this.listenerClick);
+};
+
+Autocapture.prototype.initDeadClickTracking = function() {
+    var deadClickConfig = this._getClickTrackingConfig(CONFIG_TRACK_DEAD_CLICK);
+
+    if (!deadClickConfig && !this.mp.get_config('record_heatmap_data')) {
+        this.stopDeadClickTracking();
+        return;
+    }
+
+    logger.log('Initializing dead click tracking');
+    if (!this._deadClickTracker) {
+        this._deadClickTracker = new DeadClickTracker(function(deadClickEvent) {
+            this.trackDomEvent(deadClickEvent, MP_EV_DEAD_CLICK);
+        }.bind(this));
+        this._deadClickTracker.startTracking();
+    }
+
+    if (!this.listenerDeadClick) {
+        this.listenerDeadClick = function(ev) {
+            var currentDeadClickConfig = this._getClickTrackingConfig(CONFIG_TRACK_DEAD_CLICK);
+            if (!currentDeadClickConfig && !this.mp.is_recording_heatmap_data()) {
+                return;
+            }
+            if (this.currentUrlBlocked()) {
+                return;
+            }
+            // Normalize config to ensure timeout_ms is always set
+            var normalizedConfig = currentDeadClickConfig || {};
+            if (!normalizedConfig['timeout_ms']) {
+                normalizedConfig['timeout_ms'] = DEFAULT_DEAD_CLICK_TIMEOUT_MS;
+            }
+            this._deadClickTracker.trackClick(ev, normalizedConfig);
+        }.bind(this);
+        window.addEventListener(EV_CLICK, this.listenerDeadClick);
+    }
 };
 
 Autocapture.prototype.initInputTracking = function() {
@@ -221,17 +367,16 @@ Autocapture.prototype.initInputTracking = function() {
     }
     logger.log('Initializing input tracking');
 
-    this.listenerChange = window.addEventListener(EV_CHANGE, function(ev) {
+    this.listenerChange = function(ev) {
         if (!this.getConfig(CONFIG_TRACK_INPUT)) {
             return;
         }
         this.trackDomEvent(ev, MP_EV_INPUT);
-    }.bind(this));
+    }.bind(this);
+    window.addEventListener(EV_CHANGE, this.listenerChange);
 };
 
 Autocapture.prototype.initPageviewTracking = function() {
-    window.removeEventListener(EV_POPSTATE, this.listenerPopstate);
-    window.removeEventListener(EV_HASHCHANGE, this.listenerHashchange);
     window.removeEventListener(EV_MP_LOCATION_CHANGE, this.listenerLocationchange);
 
     if (!this.pageviewTrackingConfig()) {
@@ -248,27 +393,7 @@ Autocapture.prototype.initPageviewTracking = function() {
         previousTrackedUrl = _.info.currentUrl();
     }
 
-    this.listenerPopstate = window.addEventListener(EV_POPSTATE, function() {
-        window.dispatchEvent(new Event(EV_MP_LOCATION_CHANGE));
-    });
-    this.listenerHashchange = window.addEventListener(EV_HASHCHANGE, function() {
-        window.dispatchEvent(new Event(EV_MP_LOCATION_CHANGE));
-    });
-    var nativePushState = window.history.pushState;
-    if (typeof nativePushState === 'function') {
-        window.history.pushState = function(state, unused, url) {
-            nativePushState.call(window.history, state, unused, url);
-            window.dispatchEvent(new Event(EV_MP_LOCATION_CHANGE));
-        };
-    }
-    var nativeReplaceState = window.history.replaceState;
-    if (typeof nativeReplaceState === 'function') {
-        window.history.replaceState = function(state, unused, url) {
-            nativeReplaceState.call(window.history, state, unused, url);
-            window.dispatchEvent(new Event(EV_MP_LOCATION_CHANGE));
-        };
-    }
-    this.listenerLocationchange = window.addEventListener(EV_MP_LOCATION_CHANGE, safewrap(function() {
+    this.listenerLocationchange = safewrap(function() {
         if (this.currentUrlBlocked()) {
             return;
         }
@@ -295,13 +420,14 @@ Autocapture.prototype.initPageviewTracking = function() {
                 logger.log('Path change: re-initializing scroll depth checkpoints');
             }
         }
-    }.bind(this)));
+    }.bind(this));
+    window.addEventListener(EV_MP_LOCATION_CHANGE, this.listenerLocationchange);
 };
 
 Autocapture.prototype.initRageClickTracking = function() {
     window.removeEventListener(EV_CLICK, this.listenerRageClick);
 
-    var rageClickConfig = this._getRageClickConfig();
+    var rageClickConfig = this._getClickTrackingConfig(CONFIG_TRACK_RAGE_CLICK);
     if (!rageClickConfig && !this.mp.get_config('record_heatmap_data')) {
         return;
     }
@@ -312,7 +438,7 @@ Autocapture.prototype.initRageClickTracking = function() {
     }
 
     this.listenerRageClick = function(ev) {
-        var currentRageClickConfig = this._getRageClickConfig();
+        var currentRageClickConfig = this._getClickTrackingConfig(CONFIG_TRACK_RAGE_CLICK);
         if (!currentRageClickConfig && !this.mp.is_recording_heatmap_data()) {
             return;
         }
@@ -330,6 +456,8 @@ Autocapture.prototype.initRageClickTracking = function() {
 
 Autocapture.prototype.initScrollTracking = function() {
     window.removeEventListener(EV_SCROLLEND, this.listenerScroll);
+    window.removeEventListener(EV_SCROLL, this.listenerScroll);
+
 
     if (!this.getConfig(CONFIG_TRACK_SCROLL)) {
         return;
@@ -337,7 +465,7 @@ Autocapture.prototype.initScrollTracking = function() {
     logger.log('Initializing scroll tracking');
     this.lastScrollCheckpoint = 0;
 
-    this.listenerScroll = window.addEventListener(EV_SCROLLEND, safewrap(function() {
+    var scrollTrackFunction = function() {
         if (!this.getConfig(CONFIG_TRACK_SCROLL)) {
             return;
         }
@@ -376,7 +504,11 @@ Autocapture.prototype.initScrollTracking = function() {
         if (shouldTrack) {
             this.mp.track(MP_EV_SCROLL, props);
         }
-    }.bind(this)));
+    }.bind(this);
+
+    var scrollEndPolyfill = getPolyfillScrollEndFunction(scrollTrackFunction);
+    this.listenerScroll = scrollEndPolyfill.listener;
+    window.addEventListener(scrollEndPolyfill.eventType, this.listenerScroll);
 };
 
 Autocapture.prototype.initSubmitTracking = function() {
@@ -387,12 +519,76 @@ Autocapture.prototype.initSubmitTracking = function() {
     }
     logger.log('Initializing submit tracking');
 
-    this.listenerSubmit = window.addEventListener(EV_SUBMIT, function(ev) {
+    this.listenerSubmit = function(ev) {
         if (!this.getConfig(CONFIG_TRACK_SUBMIT)) {
             return;
         }
         this.trackDomEvent(ev, MP_EV_SUBMIT);
+    }.bind(this);
+    window.addEventListener(EV_SUBMIT, this.listenerSubmit);
+};
+
+Autocapture.prototype.initPageLeaveTracking = function() {
+    // Capture page_leave both when the user navigates away from the page (visibilitychange) as well
+    // as when they navigate to a different page within the SPA (popstate/pushstate/hashchange).
+    document.removeEventListener(EV_VISIBILITYCHANGE, this.listenerPageLeaveVisibilitychange);
+    window.removeEventListener(EV_MP_LOCATION_CHANGE, this.listenerPageLeaveLocationchange);
+    window.removeEventListener(EV_LOAD, this.listenerPageLoad);
+
+    if (!this.getConfig(CONFIG_TRACK_PAGE_LEAVE) && !this.mp.get_config('record_heatmap_data')) {
+        return;
+    }
+
+    logger.log('Initializing page visibility tracking.');
+    this._initScrollDepthTracking();
+    var previousTrackedUrl = _.info.currentUrl();
+
+    // Initialize previousScrollHeight on `load` which handles async loading
+    // https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
+    this.listenerPageLoad = function() {
+        this.previousScrollHeight = document.body.scrollHeight;
+    }.bind(this);
+    window.addEventListener(EV_LOAD, this.listenerPageLoad);
+
+    // Track page navigation events similar to how initPageviewTracking does it
+    this.listenerPageLeaveLocationchange = safewrap(function(ev) {
+        if (this.currentUrlBlocked()) {
+            return;
+        }
+
+        var currentUrl = _.info.currentUrl();
+        // Track all URL changes including query string or fragment changes as separate scroll sessions
+        var shouldTrack = currentUrl !== previousTrackedUrl;
+
+        if (shouldTrack) {
+            this._trackPageLeave(ev, previousTrackedUrl, this.previousScrollHeight);
+            previousTrackedUrl = currentUrl;
+            // Fragment navigation should call scroll(end) and trigger listener, don't add window.scrollY here.
+            this.maxScrollViewDepth = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+            this.previousScrollHeight = document.body.scrollHeight;
+            this.hasTrackedScrollSession = false;
+        }
     }.bind(this));
+    window.addEventListener(EV_MP_LOCATION_CHANGE, this.listenerPageLeaveLocationchange);
+
+    this.listenerPageLeaveVisibilitychange = function(ev) {
+        if (document.hidden) {
+            this._trackPageLeave(ev, previousTrackedUrl, this.previousScrollHeight);
+        }
+    }.bind(this);
+    document.addEventListener(EV_VISIBILITYCHANGE, this.listenerPageLeaveVisibilitychange);
+};
+
+Autocapture.prototype.stopDeadClickTracking = function() {
+    if (this.listenerDeadClick) {
+        window.removeEventListener(EV_CLICK, this.listenerDeadClick);
+        this.listenerDeadClick = null;
+    }
+
+    if (this._deadClickTracker) {
+        this._deadClickTracker.stopTracking();
+        this._deadClickTracker = null;
+    }
 };
 
 // TODO integrate error_reporter from mixpanel instance

package/src/autocapture/shadow-dom-observer.js

@@ -0,0 +1,100 @@
+import { logger, weakSetSupported } from './utils';
+
+function ShadowDOMObserver(changeCallback, observerConfig) {
+    this.changeCallback = changeCallback || function() {};
+    this.observerConfig = observerConfig;
+
+    this.observedShadowRoots = null;
+    this.shadowObservers = [];
+}
+
+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'];
+};
+
+
+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);
+
+    // Check each element in path for shadow roots
+    for (var i = 0; i < path.length; i++) {
+        var element = path[i];
+
+        if (element && element.shadowRoot) {
+            this.observeShadowRoot(element.shadowRoot);
+        }
+    }
+};
+
+
+ShadowDOMObserver.prototype.observeShadowRoot = function(shadowRoot) {
+    if (!this.observedShadowRoots || this.observedShadowRoots.has(shadowRoot)) {
+        return;
+    }
+
+    var self = this;
+
+    try {
+        this.observedShadowRoots.add(shadowRoot);
+
+        var observer = new window.MutationObserver(function() {
+            self.changeCallback();
+        });
+
+        observer.observe(shadowRoot, this.observerConfig);
+        this.shadowObservers.push(observer);
+    } catch (e) {
+        logger.critical('Error while observing shadow root', e);
+    }
+};
+
+
+ShadowDOMObserver.prototype.start = function() {
+    if (this.observedShadowRoots) {
+        return;
+    }
+
+    if (!weakSetSupported()) {
+        logger.critical('Shadow DOM observation unavailable: WeakSet not supported');
+        return;
+    }
+
+    this.observedShadowRoots = new WeakSet();
+};
+
+ShadowDOMObserver.prototype.stop = function() {
+    if (!this.observedShadowRoots) {
+        return;
+    }
+
+    for (var i = 0; i < this.shadowObservers.length; i++) {
+        try {
+            this.shadowObservers[i].disconnect();
+        } catch (e) {
+            logger.critical('Error while disconnecting shadow DOM observer', e);
+        }
+    }
+    this.shadowObservers = [];
+    this.observedShadowRoots = null;
+};
+
+export { ShadowDOMObserver };