mixpanel-browser 2.63.0 → 2.64.0

package/src/autocapture/index.js

@@ -160,7 +160,8 @@ Autocapture.prototype.trackDomEvent = function(ev, mpEventName) {
         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);
@@ -171,13 +172,13 @@ Autocapture.prototype.trackDomEvent = function(ev, mpEventName) {
 Autocapture.prototype.initClickTracking = function() {
     window.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.log('Initializing click tracking');
 
     this.listenerClick = window.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);

package/src/autocapture/utils.js

@@ -114,6 +114,7 @@ function getPropsForDOMEvent(ev, config) {
     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 = {};
@@ -192,6 +193,9 @@ function getPropsForDOMEvent(ev, config) {
                         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

package/src/config.js

@@ -1,6 +1,6 @@
 var Config = {
     DEBUG: false,
-    LIB_VERSION: '2.63.0'
+    LIB_VERSION: '2.64.0'
 };
 
 export default Config;

package/src/flags/index.js

@@ -0,0 +1,191 @@
+import { _, console_with_prefix, safewrapClass } from '../utils'; // eslint-disable-line camelcase
+import { window } from '../window';
+
+var fetch = window['fetch'];
+var logger = 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.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.isEnabled = function() {
+    return !!this.getMpConfig(FLAGS_CONFIG_KEY);
+};
+
+FeatureFlagManager.prototype.areFeaturesReady = function() {
+    if (!this.isEnabled()) {
+        logger.error('Feature Flags not enabled');
+    }
+    return !!this.flags;
+};
+
+FeatureFlagManager.prototype.fetchFlags = function() {
+    if (!this.isEnabled()) {
+        return;
+    }
+
+    var distinctId = this.getDistinctId();
+    logger.log('Fetching flags for distinct ID: ' + distinctId);
+    var reqParams = {
+        'context': _.extend({'distinct_id': distinctId}, this.getConfig(CONFIG_CONTEXT))
+    };
+    this.fetchPromise = window['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'],
+                    'data': data['variant_value']
+                });
+            });
+            this.flags = flags;
+        }.bind(this)).catch(function(error) {
+            logger.error(error);
+        });
+    }.bind(this)).catch(function() {});
+};
+
+FeatureFlagManager.prototype.getFeature = function(featureName, fallback) {
+    if (!this.fetchPromise) {
+        return new Promise(function(resolve) {
+            logger.critical('Feature Flags not initialized');
+            resolve(fallback);
+        });
+    }
+
+    return this.fetchPromise.then(function() {
+        return this.getFeatureSync(featureName, fallback);
+    }.bind(this)).catch(function(error) {
+        logger.error(error);
+        return fallback;
+    });
+};
+
+FeatureFlagManager.prototype.getFeatureSync = function(featureName, fallback) {
+    if (!this.areFeaturesReady()) {
+        logger.log('Flags not loaded yet');
+        return fallback;
+    }
+    var feature = this.flags.get(featureName);
+    if (!feature) {
+        logger.log('No flag found: "' + featureName + '"');
+        return fallback;
+    }
+    this.trackFeatureCheck(featureName, feature);
+    return feature;
+};
+
+FeatureFlagManager.prototype.getFeatureData = function(featureName, fallbackValue) {
+    return this.getFeature(featureName, {'data': fallbackValue}).then(function(feature) {
+        return feature['data'];
+    }).catch(function(error) {
+        logger.error(error);
+        return fallbackValue;
+    });
+};
+
+FeatureFlagManager.prototype.getFeatureDataSync = function(featureName, fallbackValue) {
+    return this.getFeatureSync(featureName, {'data': fallbackValue})['data'];
+};
+
+FeatureFlagManager.prototype.isFeatureEnabled = function(featureName, fallbackValue) {
+    return this.getFeatureData(featureName).then(function() {
+        return this.isFeatureEnabledSync(featureName, fallbackValue);
+    }.bind(this)).catch(function(error) {
+        logger.error(error);
+        return fallbackValue;
+    });
+};
+
+FeatureFlagManager.prototype.isFeatureEnabledSync = function(featureName, fallbackValue) {
+    fallbackValue = fallbackValue || false;
+    var val = this.getFeatureDataSync(featureName, fallbackValue);
+    if (val !== true && val !== false) {
+        logger.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_features_ready'] = FeatureFlagManager.prototype.areFeaturesReady;
+FeatureFlagManager.prototype['get_feature'] = FeatureFlagManager.prototype.getFeature;
+FeatureFlagManager.prototype['get_feature_data'] = FeatureFlagManager.prototype.getFeatureData;
+FeatureFlagManager.prototype['get_feature_data_sync'] = FeatureFlagManager.prototype.getFeatureDataSync;
+FeatureFlagManager.prototype['get_feature_sync'] = FeatureFlagManager.prototype.getFeatureSync;
+FeatureFlagManager.prototype['is_feature_enabled'] = FeatureFlagManager.prototype.isFeatureEnabled;
+FeatureFlagManager.prototype['is_feature_enabled_sync'] = FeatureFlagManager.prototype.isFeatureEnabledSync;
+
+export { FeatureFlagManager };

package/src/mixpanel-core.js

@@ -4,6 +4,7 @@ import { MAX_RECORDING_MS, _, console, userAgent, document, navigator, slice, NO
 import { isRecordingExpired } from './recorder/utils';
 import { window } from './window';
 import { Autocapture } from './autocapture';
+import { FeatureFlagManager } from './flags';
 import { FormTracker, LinkTracker } from './dom-trackers';
 import { RequestBatcher } from './request-batcher';
 import { MixpanelGroup } from './mixpanel-group';
@@ -86,10 +87,11 @@ if (navigator['sendBeacon']) {
 }
 
 var DEFAULT_API_ROUTES = {
-    'track': 'track/',
+    'track':  'track/',
     'engage': 'engage/',
     'groups': 'groups/',
-    'record': 'record/'
+    'record': 'record/',
+    'flags':  'flags/'
 };
 
 /*
@@ -107,6 +109,7 @@ var DEFAULT_CONFIG = {
     'cross_site_cookie':                 false,
     'cross_subdomain_cookie':            true,
     'error_reporter':                    NOOP_FUNC,
+    'flags':                             false,
     'persistence':                       'cookie',
     'persistence_name':                  '',
     'cookie_domain':                     '',
@@ -147,6 +150,7 @@ var DEFAULT_CONFIG = {
     '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':         '*',
@@ -362,6 +366,14 @@ MixpanelLib.prototype._init = function(token, config, name) {
         }, '');
     }
 
+    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();
 
@@ -487,6 +499,10 @@ MixpanelLib.prototype.resume_session_recording = function () {
     }
 };
 
+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();
@@ -1568,6 +1584,11 @@ MixpanelLib.prototype.identify = function(
             '$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();
+    }
 };
 
 /**
@@ -1842,7 +1863,7 @@ MixpanelLib.prototype.set_config = function(config) {
         }
         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();
         }
     }