mixpanel-browser 2.63.0 → 2.65.0

package/dist/mixpanel.globals.js

@@ -3,7 +3,7 @@
 
     var Config = {
         DEBUG: false,
-        LIB_VERSION: '2.63.0'
+        LIB_VERSION: '2.65.0'
     };
 
     // since es6 imports are static and we run unit tests from the console, window won't be defined when importing this file
@@ -1871,6 +1871,9 @@
                 return 'Microsoft Edge';
             } else if (_.includes(user_agent, 'FBIOS')) {
                 return 'Facebook Mobile';
+            } else if (_.includes(user_agent, 'Whale/')) {
+                // https://user-agents.net/browsers/whale-browser
+                return 'Whale Browser';
             } else if (_.includes(user_agent, 'Chrome')) {
                 return 'Chrome';
             } else if (_.includes(user_agent, 'CriOS')) {
@@ -1922,7 +1925,8 @@
                 'Android Mobile': /android\s(\d+(\.\d+)?)/,
                 'Samsung Internet': /SamsungBrowser\/(\d+(\.\d+)?)/,
                 'Internet Explorer': /(rv:|MSIE )(\d+(\.\d+)?)/,
-                'Mozilla': /rv:(\d+(\.\d+)?)/
+                'Mozilla': /rv:(\d+(\.\d+)?)/,
+                'Whale Browser': /Whale\/(\d+(\.\d+)?)/
             };
             var regex = versionRegexs[browser];
             if (regex === undefined) {
@@ -2159,7 +2163,7 @@
         'href', 'name', 'role', 'title', 'type'
     ];
 
-    var logger$3 = console_with_prefix('autocapture');
+    var logger$4 = console_with_prefix('autocapture');
 
 
     function getClasses(el) {
@@ -2245,6 +2249,7 @@
         var blockSelectors = config.blockSelectors || [];
         var captureTextContent = config.captureTextContent || false;
         var captureExtraAttrs = config.captureExtraAttrs || [];
+        var capturedForHeatMap = config.capturedForHeatMap || false;
 
         // convert array to set every time, as the config may have changed
         var blockAttrsSet = {};
@@ -2299,7 +2304,9 @@
                     '$elements':  elementsJson,
                     '$el_attr__href': href,
                     '$viewportHeight': Math.max(docElement['clientHeight'], win['innerHeight'] || 0),
-                    '$viewportWidth': Math.max(docElement['clientWidth'], win['innerWidth'] || 0)
+                    '$viewportWidth': Math.max(docElement['clientWidth'], win['innerWidth'] || 0),
+                    '$pageHeight': document$1['body']['offsetHeight'] || 0,
+                    '$pageWidth': document$1['body']['offsetWidth'] || 0,
                 };
                 _.each(captureExtraAttrs, function(attr) {
                     if (!blockAttrsSet[attr] && target.hasAttribute(attr)) {
@@ -2323,6 +2330,9 @@
                             props['$' + prop] = ev[prop];
                         }
                     });
+                    if (capturedForHeatMap) {
+                        props['$captured_for_heatmap'] = true;
+                    }
                     target = guessRealClickTarget(ev);
                 }
                 // prioritize text content from "real" click target if different from original target
@@ -2417,7 +2427,7 @@
                     return false;
                 }
             } catch (err) {
-                logger$3.critical('Error while checking element in allowElementCallback', err);
+                logger$4.critical('Error while checking element in allowElementCallback', err);
                 return false;
             }
         }
@@ -2434,7 +2444,7 @@
                     return true;
                 }
             } catch (err) {
-                logger$3.critical('Error while checking selector: ' + sel, err);
+                logger$4.critical('Error while checking selector: ' + sel, err);
             }
         }
         return false;
@@ -2449,7 +2459,7 @@
                     return true;
                 }
             } catch (err) {
-                logger$3.critical('Error while checking element in blockElementCallback', err);
+                logger$4.critical('Error while checking element in blockElementCallback', err);
                 return true;
             }
         }
@@ -2463,7 +2473,7 @@
                         return true;
                     }
                 } catch (err) {
-                    logger$3.critical('Error while checking selector: ' + sel, err);
+                    logger$4.critical('Error while checking selector: ' + sel, err);
                 }
             }
         }
@@ -2669,22 +2679,22 @@
     var CONFIG_TRACK_SCROLL = 'scroll';
     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;
-    CONFIG_DEFAULTS[CONFIG_TRACK_SCROLL] = true;
-    CONFIG_DEFAULTS[CONFIG_TRACK_SUBMIT] = true;
+    var CONFIG_DEFAULTS$1 = {};
+    CONFIG_DEFAULTS$1[CONFIG_ALLOW_SELECTORS] = [];
+    CONFIG_DEFAULTS$1[CONFIG_ALLOW_URL_REGEXES] = [];
+    CONFIG_DEFAULTS$1[CONFIG_BLOCK_ATTRS] = [];
+    CONFIG_DEFAULTS$1[CONFIG_BLOCK_ELEMENT_CALLBACK] = null;
+    CONFIG_DEFAULTS$1[CONFIG_BLOCK_SELECTORS] = [];
+    CONFIG_DEFAULTS$1[CONFIG_BLOCK_URL_REGEXES] = [];
+    CONFIG_DEFAULTS$1[CONFIG_CAPTURE_EXTRA_ATTRS] = [];
+    CONFIG_DEFAULTS$1[CONFIG_CAPTURE_TEXT_CONTENT] = false;
+    CONFIG_DEFAULTS$1[CONFIG_SCROLL_CAPTURE_ALL] = false;
+    CONFIG_DEFAULTS$1[CONFIG_SCROLL_CHECKPOINTS] = [25, 50, 75, 100];
+    CONFIG_DEFAULTS$1[CONFIG_TRACK_CLICK] = true;
+    CONFIG_DEFAULTS$1[CONFIG_TRACK_INPUT] = true;
+    CONFIG_DEFAULTS$1[CONFIG_TRACK_PAGEVIEW] = PAGEVIEW_OPTION_FULL_URL;
+    CONFIG_DEFAULTS$1[CONFIG_TRACK_SCROLL] = true;
+    CONFIG_DEFAULTS$1[CONFIG_TRACK_SUBMIT] = true;
 
     var DEFAULT_PROPS = {
         '$mp_autocapture': true
@@ -2705,7 +2715,7 @@
 
     Autocapture.prototype.init = function() {
         if (!minDOMApisSupported()) {
-            logger$3.critical('Autocapture unavailable: missing required DOM APIs');
+            logger$4.critical('Autocapture unavailable: missing required DOM APIs');
             return;
         }
 
@@ -2722,10 +2732,10 @@
             // Autocapture is completely off
             return {};
         } else if (_.isObject(autocaptureConfig)) {
-            return _.extend({}, CONFIG_DEFAULTS, autocaptureConfig);
+            return _.extend({}, CONFIG_DEFAULTS$1, autocaptureConfig);
         } else {
             // Autocapture config is non-object truthy value, return default
-            return CONFIG_DEFAULTS;
+            return CONFIG_DEFAULTS$1;
         }
     };
 
@@ -2749,7 +2759,7 @@
                         break;
                     }
                 } catch (err) {
-                    logger$3.critical('Error while checking block URL regex: ' + allowRegex, err);
+                    logger$4.critical('Error while checking block URL regex: ' + allowRegex, err);
                     return true;
                 }
             }
@@ -2770,7 +2780,7 @@
                     return true;
                 }
             } catch (err) {
-                logger$3.critical('Error while checking block URL regex: ' + blockUrlRegexes[i], err);
+                logger$4.critical('Error while checking block URL regex: ' + blockUrlRegexes[i], err);
                 return true;
             }
         }
@@ -2799,7 +2809,8 @@
             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)
+            captureTextContent: this.getConfig(CONFIG_CAPTURE_TEXT_CONTENT),
+            capturedForHeatMap: mpEventName === MP_EV_CLICK && !this.getConfig(CONFIG_TRACK_CLICK) && this.mp.is_recording_heatmap_data(),
         });
         if (props) {
             _.extend(props, DEFAULT_PROPS);
@@ -2810,13 +2821,13 @@
     Autocapture.prototype.initClickTracking = function() {
         win.removeEventListener(EV_CLICK, this.listenerClick);
 
-        if (!this.getConfig(CONFIG_TRACK_CLICK)) {
+        if (!this.getConfig(CONFIG_TRACK_CLICK) && !this.mp.get_config('record_heatmap_data')) {
             return;
         }
-        logger$3.log('Initializing click tracking');
+        logger$4.log('Initializing click tracking');
 
         this.listenerClick = win.addEventListener(EV_CLICK, function(ev) {
-            if (!this.getConfig(CONFIG_TRACK_CLICK)) {
+            if (!this.getConfig(CONFIG_TRACK_CLICK) && !this.mp.is_recording_heatmap_data()) {
                 return;
             }
             this.trackDomEvent(ev, MP_EV_CLICK);
@@ -2829,7 +2840,7 @@
         if (!this.getConfig(CONFIG_TRACK_INPUT)) {
             return;
         }
-        logger$3.log('Initializing input tracking');
+        logger$4.log('Initializing input tracking');
 
         this.listenerChange = win.addEventListener(EV_CHANGE, function(ev) {
             if (!this.getConfig(CONFIG_TRACK_INPUT)) {
@@ -2847,7 +2858,7 @@
         if (!this.pageviewTrackingConfig()) {
             return;
         }
-        logger$3.log('Initializing pageview tracking');
+        logger$4.log('Initializing pageview tracking');
 
         var previousTrackedUrl = '';
         var tracked = false;
@@ -2902,7 +2913,7 @@
                 }
                 if (didPathChange) {
                     this.lastScrollCheckpoint = 0;
-                    logger$3.log('Path change: re-initializing scroll depth checkpoints');
+                    logger$4.log('Path change: re-initializing scroll depth checkpoints');
                 }
             }
         }.bind(this)));
@@ -2914,7 +2925,7 @@
         if (!this.getConfig(CONFIG_TRACK_SCROLL)) {
             return;
         }
-        logger$3.log('Initializing scroll tracking');
+        logger$4.log('Initializing scroll tracking');
         this.lastScrollCheckpoint = 0;
 
         this.listenerScroll = win.addEventListener(EV_SCROLLEND, safewrap(function() {
@@ -2951,7 +2962,7 @@
                     }
                 }
             } catch (err) {
-                logger$3.critical('Error while calculating scroll percentage', err);
+                logger$4.critical('Error while calculating scroll percentage', err);
             }
             if (shouldTrack) {
                 this.mp.track(MP_EV_SCROLL, props);
@@ -2965,7 +2976,7 @@
         if (!this.getConfig(CONFIG_TRACK_SUBMIT)) {
             return;
         }
-        logger$3.log('Initializing submit tracking');
+        logger$4.log('Initializing submit tracking');
 
         this.listenerSubmit = win.addEventListener(EV_SUBMIT, function(ev) {
             if (!this.getConfig(CONFIG_TRACK_SUBMIT)) {
@@ -2978,6 +2989,202 @@
     // TODO integrate error_reporter from mixpanel instance
     safewrapClass(Autocapture);
 
+    var fetch = win['fetch'];
+    var logger$3 = console_with_prefix('flags');
+
+    var FLAGS_CONFIG_KEY = 'flags';
+
+    var CONFIG_CONTEXT = 'context';
+    var CONFIG_DEFAULTS = {};
+    CONFIG_DEFAULTS[CONFIG_CONTEXT] = {};
+
+    /**
+     * FeatureFlagManager: support for Mixpanel's feature flagging product
+     * @constructor
+     */
+    var FeatureFlagManager = function(initOptions) {
+        this.getMpConfig = initOptions.getConfigFunc;
+        this.getDistinctId = initOptions.getDistinctIdFunc;
+        this.track = initOptions.trackingFunc;
+    };
+
+    FeatureFlagManager.prototype.init = function() {
+        if (!minApisSupported()) {
+            logger$3.critical('Feature Flags unavailable: missing minimum required APIs');
+            return;
+        }
+
+        this.flags = null;
+        this.fetchFlags();
+
+        this.trackedFeatures = new Set();
+    };
+
+    FeatureFlagManager.prototype.getFullConfig = function() {
+        var ffConfig = this.getMpConfig(FLAGS_CONFIG_KEY);
+        if (!ffConfig) {
+            // flags are completely off
+            return {};
+        } else if (_.isObject(ffConfig)) {
+            return _.extend({}, CONFIG_DEFAULTS, ffConfig);
+        } else {
+            // config is non-object truthy value, return default
+            return CONFIG_DEFAULTS;
+        }
+    };
+
+    FeatureFlagManager.prototype.getConfig = function(key) {
+        return this.getFullConfig()[key];
+    };
+
+    FeatureFlagManager.prototype.isSystemEnabled = function() {
+        return !!this.getMpConfig(FLAGS_CONFIG_KEY);
+    };
+
+    FeatureFlagManager.prototype.areFlagsReady = function() {
+        if (!this.isSystemEnabled()) {
+            logger$3.error('Feature Flags not enabled');
+        }
+        return !!this.flags;
+    };
+
+    FeatureFlagManager.prototype.fetchFlags = function() {
+        if (!this.isSystemEnabled()) {
+            return;
+        }
+
+        var distinctId = this.getDistinctId();
+        logger$3.log('Fetching flags for distinct ID: ' + distinctId);
+        var reqParams = {
+            'context': _.extend({'distinct_id': distinctId}, this.getConfig(CONFIG_CONTEXT))
+        };
+        this.fetchPromise = win['fetch'](this.getMpConfig('api_host') + '/' + this.getMpConfig('api_routes')['flags'], {
+            'method': 'POST',
+            'headers': {
+                'Authorization': 'Basic ' + btoa(this.getMpConfig('token') + ':'),
+                'Content-Type': 'application/octet-stream'
+            },
+            'body': JSON.stringify(reqParams)
+        }).then(function(response) {
+            return response.json().then(function(responseBody) {
+                var responseFlags = responseBody['flags'];
+                if (!responseFlags) {
+                    throw new Error('No flags in API response');
+                }
+                var flags = new Map();
+                _.each(responseFlags, function(data, key) {
+                    flags.set(key, {
+                        'key': data['variant_key'],
+                        'value': data['variant_value']
+                    });
+                });
+                this.flags = flags;
+            }.bind(this)).catch(function(error) {
+                logger$3.error(error);
+            });
+        }.bind(this)).catch(function() {});
+    };
+
+    FeatureFlagManager.prototype.getVariant = function(featureName, fallback) {
+        if (!this.fetchPromise) {
+            return new Promise(function(resolve) {
+                logger$3.critical('Feature Flags not initialized');
+                resolve(fallback);
+            });
+        }
+
+        return this.fetchPromise.then(function() {
+            return this.getVariantSync(featureName, fallback);
+        }.bind(this)).catch(function(error) {
+            logger$3.error(error);
+            return fallback;
+        });
+    };
+
+    FeatureFlagManager.prototype.getVariantSync = function(featureName, fallback) {
+        if (!this.areFlagsReady()) {
+            logger$3.log('Flags not loaded yet');
+            return fallback;
+        }
+        var feature = this.flags.get(featureName);
+        if (!feature) {
+            logger$3.log('No flag found: "' + featureName + '"');
+            return fallback;
+        }
+        this.trackFeatureCheck(featureName, feature);
+        return feature;
+    };
+
+    FeatureFlagManager.prototype.getVariantValue = function(featureName, fallbackValue) {
+        return this.getVariant(featureName, {'value': fallbackValue}).then(function(feature) {
+            return feature['value'];
+        }).catch(function(error) {
+            logger$3.error(error);
+            return fallbackValue;
+        });
+    };
+
+    // TODO remove deprecated method
+    FeatureFlagManager.prototype.getFeatureData = function(featureName, fallbackValue) {
+        logger$3.critical('mixpanel.flags.get_feature_data() is deprecated and will be removed in a future release. Use mixpanel.flags.get_variant_value() instead.');
+        return this.getVariantValue(featureName, fallbackValue);
+    };
+
+    FeatureFlagManager.prototype.getVariantValueSync = function(featureName, fallbackValue) {
+        return this.getVariantSync(featureName, {'value': fallbackValue})['value'];
+    };
+
+    FeatureFlagManager.prototype.isEnabled = function(featureName, fallbackValue) {
+        return this.getVariantValue(featureName).then(function() {
+            return this.isEnabledSync(featureName, fallbackValue);
+        }.bind(this)).catch(function(error) {
+            logger$3.error(error);
+            return fallbackValue;
+        });
+    };
+
+    FeatureFlagManager.prototype.isEnabledSync = function(featureName, fallbackValue) {
+        fallbackValue = fallbackValue || false;
+        var val = this.getVariantValueSync(featureName, fallbackValue);
+        if (val !== true && val !== false) {
+            logger$3.error('Feature flag "' + featureName + '" value: ' + val + ' is not a boolean; returning fallback value: ' + fallbackValue);
+            val = fallbackValue;
+        }
+        return val;
+    };
+
+    FeatureFlagManager.prototype.trackFeatureCheck = function(featureName, feature) {
+        if (this.trackedFeatures.has(featureName)) {
+            return;
+        }
+        this.trackedFeatures.add(featureName);
+        this.track('$experiment_started', {
+            'Experiment name': featureName,
+            'Variant name': feature['key'],
+            '$experiment_type': 'feature_flag'
+        });
+    };
+
+    function minApisSupported() {
+        return !!fetch &&
+          typeof Promise !== 'undefined' &&
+          typeof Map !== 'undefined' &&
+          typeof Set !== 'undefined';
+    }
+
+    safewrapClass(FeatureFlagManager);
+
+    FeatureFlagManager.prototype['are_flags_ready'] = FeatureFlagManager.prototype.areFlagsReady;
+    FeatureFlagManager.prototype['get_variant'] = FeatureFlagManager.prototype.getVariant;
+    FeatureFlagManager.prototype['get_variant_sync'] = FeatureFlagManager.prototype.getVariantSync;
+    FeatureFlagManager.prototype['get_variant_value'] = FeatureFlagManager.prototype.getVariantValue;
+    FeatureFlagManager.prototype['get_variant_value_sync'] = FeatureFlagManager.prototype.getVariantValueSync;
+    FeatureFlagManager.prototype['is_enabled'] = FeatureFlagManager.prototype.isEnabled;
+    FeatureFlagManager.prototype['is_enabled_sync'] = FeatureFlagManager.prototype.isEnabledSync;
+
+    // Deprecated method
+    FeatureFlagManager.prototype['get_feature_data'] = FeatureFlagManager.prototype.getFeatureData;
+
     /* eslint camelcase: "off" */
 
 
@@ -4860,18 +5067,8 @@
      * @param {Function} [callback] If provided, the callback will be called when the server responds
      * @deprecated
      */
-    MixpanelPeople.prototype.track_charge = addOptOutCheckMixpanelPeople(function(amount, properties, callback) {
-        if (!_.isNumber(amount)) {
-            amount = parseFloat(amount);
-            if (isNaN(amount)) {
-                console.error('Invalid value passed to mixpanel.people.track_charge - must be a number');
-                return;
-            }
-        }
-
-        return this.append('$transactions', _.extend({
-            '$amount': amount
-        }, properties), callback);
+    MixpanelPeople.prototype.track_charge = addOptOutCheckMixpanelPeople(function() {
+        console.error('mixpanel.people.track_charge() is deprecated and no longer has any effect.');
     });
 
     /*
@@ -5693,10 +5890,11 @@
     }
 
     var DEFAULT_API_ROUTES = {
-        'track': 'track/',
+        'track':  'track/',
         'engage': 'engage/',
         'groups': 'groups/',
-        'record': 'record/'
+        'record': 'record/',
+        'flags':  'flags/'
     };
 
     /*
@@ -5705,6 +5903,7 @@
     var DEFAULT_CONFIG = {
         'api_host':                          'https://api-js.mixpanel.com',
         'api_routes':                        DEFAULT_API_ROUTES,
+        'api_extra_query_params':            {},
         'api_method':                        'POST',
         'api_transport':                     'XHR',
         'api_payload_format':                PAYLOAD_TYPE_BASE64,
@@ -5714,6 +5913,7 @@
         'cross_site_cookie':                 false,
         'cross_subdomain_cookie':            true,
         'error_reporter':                    NOOP_FUNC,
+        'flags':                             false,
         'persistence':                       'cookie',
         'persistence_name':                  '',
         'cookie_domain':                     '',
@@ -5754,6 +5954,7 @@
         'record_block_selector':             'img, video',
         'record_canvas':                     false,
         'record_collect_fonts':              false,
+        '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)$'),
         'record_mask_text_selector':         '*',
@@ -5969,6 +6170,14 @@
             }, '');
         }
 
+        this.flags = new FeatureFlagManager({
+            getConfigFunc: _.bind(this.get_config, this),
+            getDistinctIdFunc: _.bind(this.get_distinct_id, this),
+            trackingFunc: _.bind(this.track, this)
+        });
+        this.flags.init();
+        this['flags'] = this.flags;
+
         this.autocapture = new Autocapture(this);
         this.autocapture.init();
 
@@ -6094,6 +6303,10 @@
         }
     };
 
+    MixpanelLib.prototype.is_recording_heatmap_data = function () {
+        return this._get_session_replay_id() && this.get_config('record_heatmap_data');
+    };
+
     MixpanelLib.prototype.get_session_recording_properties = function () {
         var props = {};
         var replay_id = this._get_session_replay_id();
@@ -6278,6 +6491,8 @@
             delete data['data'];
         }
 
+        _.extend(data, this.get_config('api_extra_query_params'));
+
         url += '?' + _.HTTPBuildQuery(data);
 
         var lib = this;
@@ -7175,6 +7390,11 @@
                 '$anon_distinct_id': previous_distinct_id
             }, {skip_hooks: true});
         }
+
+        // check feature flags again if distinct id has changed
+        if (new_distinct_id !== previous_distinct_id) {
+            this.flags.fetchFlags();
+        }
     };
 
     /**
@@ -7189,6 +7409,8 @@
             'distinct_id': DEVICE_ID_PREFIX + uuid,
             '$device_id': uuid
         }, '');
+        this.stop_session_recording();
+        this._check_and_start_session_recording();
     };
 
     /**
@@ -7449,7 +7671,7 @@
             }
             Config.DEBUG = Config.DEBUG || this.get_config('debug');
 
-            if ('autocapture' in config && this.autocapture) {
+            if (('autocapture' in config || 'record_heatmap_data' in config) && this.autocapture) {
                 this.autocapture.init();
             }
         }