mixpanel-browser 2.59.0 → 2.60.0

package/dist/mixpanel.globals.js

@@ -3,7 +3,7 @@
 
     var Config = {
         DEBUG: false,
-        LIB_VERSION: '2.59.0'
+        LIB_VERSION: '2.60.0'
     };
 
     // since es6 imports are static and we run unit tests from the console, window won't be defined when importing this file
@@ -2197,7 +2197,7 @@
         }
     }
 
-    function getPropertiesFromElement(el) {
+    function getPropertiesFromElement(el, ev, blockAttrsSet, extraAttrs, allowElementCallback, allowSelectors) {
         var props = {
             '$classes': getClassName(el).split(' '),
             '$tag_name': el.tagName.toLowerCase()
@@ -2207,9 +2207,9 @@
             props['$id'] = elId;
         }
 
-        if (shouldTrackElement(el)) {
-            _.each(TRACKED_ATTRS, function(attr) {
-                if (el.hasAttribute(attr)) {
+        if (shouldTrackElementDetails(el, ev, allowElementCallback, allowSelectors)) {
+            _.each(TRACKED_ATTRS.concat(extraAttrs), function(attr) {
+                if (el.hasAttribute(attr) && !blockAttrsSet[attr]) {
                     var attrVal = el.getAttribute(attr);
                     if (shouldTrackValue(attrVal)) {
                         props['$attr-' + attr] = attrVal;
@@ -2233,8 +2233,21 @@
         return props;
     }
 
-    function getPropsForDOMEvent(ev, blockSelectors, captureTextContent) {
-        blockSelectors = blockSelectors || [];
+    function getPropsForDOMEvent(ev, config) {
+        var allowElementCallback = config.allowElementCallback;
+        var allowSelectors = config.allowSelectors || [];
+        var blockAttrs = config.blockAttrs || [];
+        var blockElementCallback = config.blockElementCallback;
+        var blockSelectors = config.blockSelectors || [];
+        var captureTextContent = config.captureTextContent || false;
+        var captureExtraAttrs = config.captureExtraAttrs || [];
+
+        // convert array to set every time, as the config may have changed
+        var blockAttrsSet = {};
+        _.each(blockAttrs, function(attr) {
+            blockAttrsSet[attr] = true;
+        });
+
         var props = null;
 
         var target = typeof ev.target === 'undefined' ? ev.srcElement : ev.target;
@@ -2242,7 +2255,11 @@
             target = target.parentNode;
         }
 
-        if (shouldTrackDomEvent(target, ev)) {
+        if (
+            shouldTrackDomEvent(target, ev) &&
+            isElementAllowed(target, ev, allowElementCallback, allowSelectors) &&
+            !isElementBlocked(target, ev, blockElementCallback, blockSelectors)
+        ) {
             var targetElementList = [target];
             var curEl = target;
             while (curEl.parentNode && !isTag(curEl, 'body')) {
@@ -2253,37 +2270,20 @@
             var elementsJson = [];
             var href, explicitNoTrack = false;
             _.each(targetElementList, function(el) {
-                var shouldTrackEl = shouldTrackElement(el);
+                var shouldTrackDetails = shouldTrackElementDetails(el, ev, allowElementCallback, allowSelectors);
 
                 // if the element or a parent element is an anchor tag
                 // include the href as a property
-                if (el.tagName.toLowerCase() === 'a') {
+                if (!blockAttrsSet['href'] && el.tagName.toLowerCase() === 'a') {
                     href = el.getAttribute('href');
-                    href = shouldTrackEl && shouldTrackValue(href) && href;
+                    href = shouldTrackDetails && shouldTrackValue(href) && href;
                 }
 
-                // allow users to programmatically prevent tracking of elements by adding classes such as 'mp-no-track'
-                var classes = getClasses(el);
-                _.each(OPT_OUT_CLASSES, function(cls) {
-                    if (classes[cls]) {
-                        explicitNoTrack = true;
-                    }
-                });
-
-                if (!explicitNoTrack) {
-                    // programmatically prevent tracking of elements that match CSS selectors
-                    _.each(blockSelectors, function(sel) {
-                        try {
-                            if (el['matches'](sel)) {
-                                explicitNoTrack = true;
-                            }
-                        } catch (err) {
-                            logger$3.critical('Error while checking selector: ' + sel, err);
-                        }
-                    });
+                if (isElementBlocked(el, ev, blockElementCallback, blockSelectors)) {
+                    explicitNoTrack = true;
                 }
 
-                elementsJson.push(getPropertiesFromElement(el));
+                elementsJson.push(getPropertiesFromElement(el, ev, blockAttrsSet, captureExtraAttrs, allowElementCallback, allowSelectors));
             }, this);
 
             if (!explicitNoTrack) {
@@ -2297,9 +2297,17 @@
                     '$viewportHeight': Math.max(docElement['clientHeight'], win['innerHeight'] || 0),
                     '$viewportWidth': Math.max(docElement['clientWidth'], win['innerWidth'] || 0)
                 };
+                _.each(captureExtraAttrs, function(attr) {
+                    if (!blockAttrsSet[attr] && target.hasAttribute(attr)) {
+                        var attrVal = target.getAttribute(attr);
+                        if (shouldTrackValue(attrVal)) {
+                            props['$el_attr__' + attr] = attrVal;
+                        }
+                    }
+                });
 
                 if (captureTextContent) {
-                    elementText = getSafeText(target);
+                    elementText = getSafeText(target, ev, allowElementCallback, allowSelectors);
                     if (elementText && elementText.length) {
                         props['$el_text'] = elementText;
                     }
@@ -2315,14 +2323,22 @@
                 }
                 // prioritize text content from "real" click target if different from original target
                 if (captureTextContent) {
-                    var elementText = getSafeText(target);
+                    var elementText = getSafeText(target, ev, allowElementCallback, allowSelectors);
                     if (elementText && elementText.length) {
                         props['$el_text'] = elementText;
                     }
                 }
 
                 if (target) {
-                    var targetProps = getPropertiesFromElement(target);
+                    // target may have been recalculated; check allowlists and blocklists again
+                    if (
+                        !isElementAllowed(target, ev, allowElementCallback, allowSelectors) ||
+                        isElementBlocked(target, ev, blockElementCallback, blockSelectors)
+                    ) {
+                        return null;
+                    }
+
+                    var targetProps = getPropertiesFromElement(target, ev, blockAttrsSet, captureExtraAttrs, allowElementCallback, allowSelectors);
                     props['$target'] = targetProps;
                     // pull up more props onto main event props
                     props['$el_classes'] = targetProps['$classes'];
@@ -2338,19 +2354,20 @@
     }
 
 
-    /*
+    /**
      * Get the direct text content of an element, protecting against sensitive data collection.
      * Concats textContent of each of the element's text node children; this avoids potential
      * collection of sensitive data that could happen if we used element.textContent and the
      * element had sensitive child elements, since element.textContent includes child content.
      * Scrubs values that look like they could be sensitive (i.e. cc or ssn number).
      * @param {Element} el - element to get the text of
+     * @param {Array<string>} allowSelectors - CSS selectors for elements that should be included
      * @returns {string} the element's direct text content
      */
-    function getSafeText(el) {
+    function getSafeText(el, ev, allowElementCallback, allowSelectors) {
         var elText = '';
 
-        if (shouldTrackElement(el) && el.childNodes && el.childNodes.length) {
+        if (shouldTrackElementDetails(el, ev, allowElementCallback, allowSelectors) && el.childNodes && el.childNodes.length) {
             _.each(el.childNodes, function(child) {
                 if (isTextNode(child) && child.textContent) {
                     elText += _.trim(child.textContent)
@@ -2389,6 +2406,75 @@
         return target;
     }
 
+    function isElementAllowed(el, ev, allowElementCallback, allowSelectors) {
+        if (allowElementCallback) {
+            try {
+                if (!allowElementCallback(el, ev)) {
+                    return false;
+                }
+            } catch (err) {
+                logger$3.critical('Error while checking element in allowElementCallback', err);
+                return false;
+            }
+        }
+
+        if (!allowSelectors.length) {
+            // no allowlist; all elements are fair game
+            return true;
+        }
+
+        for (var i = 0; i < allowSelectors.length; i++) {
+            var sel = allowSelectors[i];
+            try {
+                if (el['matches'](sel)) {
+                    return true;
+                }
+            } catch (err) {
+                logger$3.critical('Error while checking selector: ' + sel, err);
+            }
+        }
+        return false;
+    }
+
+    function isElementBlocked(el, ev, blockElementCallback, blockSelectors) {
+        var i;
+
+        if (blockElementCallback) {
+            try {
+                if (blockElementCallback(el, ev)) {
+                    return true;
+                }
+            } catch (err) {
+                logger$3.critical('Error while checking element in blockElementCallback', err);
+                return true;
+            }
+        }
+
+        if (blockSelectors && blockSelectors.length) {
+            // programmatically prevent tracking of elements that match CSS selectors
+            for (i = 0; i < blockSelectors.length; i++) {
+                var sel = blockSelectors[i];
+                try {
+                    if (el['matches'](sel)) {
+                        return true;
+                    }
+                } catch (err) {
+                    logger$3.critical('Error while checking selector: ' + sel, err);
+                }
+            }
+        }
+
+        // allow users to programmatically prevent tracking of elements by adding default classes such as 'mp-no-track'
+        var classes = getClasses(el);
+        for (i = 0; i < OPT_OUT_CLASSES.length; i++) {
+            if (classes[OPT_OUT_CLASSES[i]]) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
     /*
      * Check whether a DOM node has nodeType Node.ELEMENT_NODE
      * @param {Node} node - node to check
@@ -2463,11 +2549,16 @@
      * Check whether a DOM element should be "tracked" or if it may contain sensitive data
      * using a variety of heuristics.
      * @param {Element} el - element to check
+     * @param {Array<string>} allowSelectors - CSS selectors for elements that should be included
      * @returns {boolean} whether the element should be tracked
      */
-    function shouldTrackElement(el) {
+    function shouldTrackElementDetails(el, ev, allowElementCallback, allowSelectors) {
         var i;
 
+        if (!isElementAllowed(el, ev, allowElementCallback, allowSelectors)) {
+            return false;
+        }
+
         for (var curEl = el; curEl.parentNode && !isTag(curEl, 'body'); curEl = curEl.parentNode) {
             var classes = getClasses(curEl);
             for (i = 0; i < SENSITIVE_DATA_CLASSES.length; i++) {
@@ -2557,9 +2648,17 @@
     var PAGEVIEW_OPTION_URL_WITH_PATH_AND_QUERY_STRING = 'url-with-path-and-query-string';
     var PAGEVIEW_OPTION_URL_WITH_PATH = 'url-with-path';
 
+    var CONFIG_ALLOW_ELEMENT_CALLBACK = 'allow_element_callback';
+    var CONFIG_ALLOW_SELECTORS = 'allow_selectors';
+    var CONFIG_ALLOW_URL_REGEXES = 'allow_url_regexes';
+    var CONFIG_BLOCK_ATTRS = 'block_attrs';
+    var CONFIG_BLOCK_ELEMENT_CALLBACK = 'block_element_callback';
     var CONFIG_BLOCK_SELECTORS = 'block_selectors';
     var CONFIG_BLOCK_URL_REGEXES = 'block_url_regexes';
+    var CONFIG_CAPTURE_EXTRA_ATTRS = 'capture_extra_attrs';
     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_INPUT = 'input';
     var CONFIG_TRACK_PAGEVIEW = 'pageview';
@@ -2567,7 +2666,16 @@
     var CONFIG_TRACK_SUBMIT = 'submit';
 
     var CONFIG_DEFAULTS = {};
+    CONFIG_DEFAULTS[CONFIG_ALLOW_SELECTORS] = [];
+    CONFIG_DEFAULTS[CONFIG_ALLOW_URL_REGEXES] = [];
+    CONFIG_DEFAULTS[CONFIG_BLOCK_ATTRS] = [];
+    CONFIG_DEFAULTS[CONFIG_BLOCK_ELEMENT_CALLBACK] = null;
+    CONFIG_DEFAULTS[CONFIG_BLOCK_SELECTORS] = [];
+    CONFIG_DEFAULTS[CONFIG_BLOCK_URL_REGEXES] = [];
+    CONFIG_DEFAULTS[CONFIG_CAPTURE_EXTRA_ATTRS] = [];
     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_INPUT] = true;
     CONFIG_DEFAULTS[CONFIG_TRACK_PAGEVIEW] = PAGEVIEW_OPTION_FULL_URL;
@@ -2622,13 +2730,37 @@
     };
 
     Autocapture.prototype.currentUrlBlocked = function() {
+        var i;
+        var currentUrl = _.info.currentUrl();
+
+        var allowUrlRegexes = this.getConfig(CONFIG_ALLOW_URL_REGEXES) || [];
+        if (allowUrlRegexes.length) {
+            // we're using an allowlist, only track if current URL matches
+            var allowed = false;
+            for (i = 0; i < allowUrlRegexes.length; i++) {
+                var allowRegex = allowUrlRegexes[i];
+                try {
+                    if (currentUrl.match(allowRegex)) {
+                        allowed = true;
+                        break;
+                    }
+                } catch (err) {
+                    logger$3.critical('Error while checking block URL regex: ' + allowRegex, err);
+                    return true;
+                }
+            }
+            if (!allowed) {
+                // wasn't allowed by any regex
+                return true;
+            }
+        }
+
         var blockUrlRegexes = this.getConfig(CONFIG_BLOCK_URL_REGEXES) || [];
         if (!blockUrlRegexes || !blockUrlRegexes.length) {
             return false;
         }
 
-        var currentUrl = _.info.currentUrl();
-        for (var i = 0; i < blockUrlRegexes.length; i++) {
+        for (i = 0; i < blockUrlRegexes.length; i++) {
             try {
                 if (currentUrl.match(blockUrlRegexes[i])) {
                     return true;
@@ -2656,11 +2788,15 @@
             return;
         }
 
-        var props = getPropsForDOMEvent(
-            ev,
-            this.getConfig(CONFIG_BLOCK_SELECTORS),
-            this.getConfig(CONFIG_CAPTURE_TEXT_CONTENT)
-        );
+        var props = getPropsForDOMEvent(ev, {
+            allowElementCallback: this.getConfig(CONFIG_ALLOW_ELEMENT_CALLBACK),
+            allowSelectors: this.getConfig(CONFIG_ALLOW_SELECTORS),
+            blockAttrs: this.getConfig(CONFIG_BLOCK_ATTRS),
+            blockElementCallback: this.getConfig(CONFIG_BLOCK_ELEMENT_CALLBACK),
+            blockSelectors: this.getConfig(CONFIG_BLOCK_SELECTORS),
+            captureExtraAttrs: this.getConfig(CONFIG_CAPTURE_EXTRA_ATTRS),
+            captureTextContent: this.getConfig(CONFIG_CAPTURE_TEXT_CONTENT)
+        });
         if (props) {
             _.extend(props, DEFAULT_PROPS);
             this.mp.track(mpEventName, props);
@@ -2745,13 +2881,14 @@
 
             var currentUrl = _.info.currentUrl();
             var shouldTrack = false;
+            var didPathChange = currentUrl.split('#')[0].split('?')[0] !== previousTrackedUrl.split('#')[0].split('?')[0];
             var trackPageviewOption = this.pageviewTrackingConfig();
             if (trackPageviewOption === PAGEVIEW_OPTION_FULL_URL) {
                 shouldTrack = currentUrl !== previousTrackedUrl;
             } else if (trackPageviewOption === PAGEVIEW_OPTION_URL_WITH_PATH_AND_QUERY_STRING) {
                 shouldTrack = currentUrl.split('#')[0] !== previousTrackedUrl.split('#')[0];
             } else if (trackPageviewOption === PAGEVIEW_OPTION_URL_WITH_PATH) {
-                shouldTrack = currentUrl.split('#')[0].split('?')[0] !== previousTrackedUrl.split('#')[0].split('?')[0];
+                shouldTrack = didPathChange;
             }
 
             if (shouldTrack) {
@@ -2759,6 +2896,10 @@
                 if (tracked) {
                     previousTrackedUrl = currentUrl;
                 }
+                if (didPathChange) {
+                    this.lastScrollCheckpoint = 0;
+                    logger$3.log('Path change: re-initializing scroll depth checkpoints');
+                }
             }
         }.bind(this)));
     };
@@ -2770,6 +2911,7 @@
             return;
         }
         logger$3.log('Initializing scroll tracking');
+        this.lastScrollCheckpoint = 0;
 
         this.listenerScroll = win.addEventListener(EV_SCROLLEND, safewrap(function() {
             if (!this.getConfig(CONFIG_TRACK_SCROLL)) {
@@ -2779,6 +2921,11 @@
                 return;
             }
 
+            var shouldTrack = this.getConfig(CONFIG_SCROLL_CAPTURE_ALL);
+            var scrollCheckpoints = (this.getConfig(CONFIG_SCROLL_CHECKPOINTS) || [])
+                .slice()
+                .sort(function(a, b) { return a - b; });
+
             var scrollTop = win.scrollY;
             var props = _.extend({'$scroll_top': scrollTop}, DEFAULT_PROPS);
             try {
@@ -2786,10 +2933,25 @@
                 var scrollPercentage = Math.round((scrollTop / (scrollHeight - win.innerHeight)) * 100);
                 props['$scroll_height'] = scrollHeight;
                 props['$scroll_percentage'] = scrollPercentage;
+                if (scrollPercentage > this.lastScrollCheckpoint) {
+                    for (var i = 0; i < scrollCheckpoints.length; i++) {
+                        var checkpoint = scrollCheckpoints[i];
+                        if (
+                            scrollPercentage >= checkpoint &&
+                            this.lastScrollCheckpoint < checkpoint
+                        ) {
+                            props['$scroll_checkpoint'] = checkpoint;
+                            this.lastScrollCheckpoint = checkpoint;
+                            shouldTrack = true;
+                        }
+                    }
+                }
             } catch (err) {
                 logger$3.critical('Error while calculating scroll percentage', err);
             }
-            this.mp.track(MP_EV_SCROLL, props);
+            if (shouldTrack) {
+                this.mp.track(MP_EV_SCROLL, props);
+            }
         }.bind(this)));
     };
 
@@ -5241,8 +5403,12 @@
                     if (!(k in union_q)) {
                         union_q[k] = [];
                     }
-                    // We may send duplicates, the server will dedup them.
-                    union_q[k] = union_q[k].concat(v);
+                    // Prevent duplicate values
+                    _.each(v, function(item) {
+                        if (!_.include(union_q[k], item)) {
+                            union_q[k].push(item);
+                        }
+                    });
                 }
             });
             this._pop_from_people_queue(UNSET_ACTION, q_data);