mixpanel-browser 2.49.0 → 2.51.0

package/src/loaders/mixpanel-jslib-snippet.js

@@ -53,7 +53,7 @@ var MIXPANEL_LIB_URL = '//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js';
 
             // create shallow clone of the public mixpanel interface
             // Note: only supports 1 additional level atm, e.g. mixpanel.people.set, not mixpanel.people.set.do_something_else.
-            functions = "disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(' ');
+            functions = "disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders start_session_recording stop_session_recording people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(' ');
             for (i = 0; i < functions.length; i++) {
                 _set_and_defer(target, functions[i]);
             }

package/src/mixpanel-core.js

@@ -1,6 +1,6 @@
 /* eslint camelcase: "off" */
 import Config from './config';
-import { _, console, userAgent, window, document, navigator, slice } from './utils';
+import { MAX_RECORDING_MS, _, console, userAgent, window, document, navigator, slice } from './utils';
 import { FormTracker, LinkTracker } from './dom-trackers';
 import { RequestBatcher } from './request-batcher';
 import { MixpanelGroup } from './mixpanel-group';
@@ -84,7 +84,8 @@ if (navigator['sendBeacon']) {
 var DEFAULT_API_ROUTES = {
     'track': 'track/',
     'engage': 'engage/',
-    'groups': 'groups/'
+    'groups': 'groups/',
+    'record': 'record/'
 };
 
 /*
@@ -111,7 +112,7 @@ var DEFAULT_CONFIG = {
     'track_pageview':                    false,
     'skip_first_touch_marketing':        false,
     'store_google':                      true,
-    'stop_utm_persistence':              false,
+    'stop_utm_persistence':              true,
     'save_referrer':                     true,
     'test':                              false,
     'verbose':                           false,
@@ -136,7 +137,15 @@ var DEFAULT_CONFIG = {
     'batch_flush_interval_ms':           5000,
     'batch_request_timeout_ms':          90000,
     'batch_autostart':                   true,
-    'hooks':                             {}
+    'hooks':                             {},
+    'record_block_class':                new RegExp('^(mp-block|fs-exclude|amp-block|rr-block|ph-no-capture)$'),
+    'record_block_selector':             'img, video',
+    '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':         '*',
+    'record_max_ms':                     MAX_RECORDING_MS,
+    'record_sessions_percent':           0,
+    'recorder_src':                      'https://cdn.mxpnl.com/libs/mixpanel-recorder.min.js'
 };
 
 var DOM_LOADED = false;
@@ -349,6 +358,52 @@ MixpanelLib.prototype._init = function(token, config, name) {
     if (track_pageview_option) {
         this._init_url_change_tracking(track_pageview_option);
     }
+
+    if (this.get_config('record_sessions_percent') > 0 && Math.random() * 100 <= this.get_config('record_sessions_percent')) {
+        this.start_session_recording();
+    }
+};
+
+MixpanelLib.prototype.start_session_recording = addOptOutCheckMixpanelLib(function () {
+    if (!window['MutationObserver']) {
+        console.critical('Browser does not support MutationObserver; skipping session recording');
+        return;
+    }
+
+    var handleLoadedRecorder = _.bind(function() {
+        this._recorder = this._recorder || new window['__mp_recorder'](this);
+        this._recorder['startRecording']();
+    }, this);
+
+    if (_.isUndefined(window['__mp_recorder'])) {
+        var scriptEl = document.createElement('script');
+        scriptEl.type = 'text/javascript';
+        scriptEl.async = true;
+        scriptEl.onload = handleLoadedRecorder;
+        scriptEl.src = this.get_config('recorder_src');
+        document.head.appendChild(scriptEl);
+    } else {
+        handleLoadedRecorder();
+    }
+});
+
+MixpanelLib.prototype.stop_session_recording = function () {
+    if (this._recorder) {
+        this._recorder['stopRecording']();
+    } else {
+        console.critical('Session recorder module not loaded');
+    }
+};
+
+MixpanelLib.prototype.get_session_recording_properties = function () {
+    var props = {};
+    if (this._recorder) {
+        var replay_id = this._recorder['replayId'];
+        if (replay_id) {
+            props['$mp_replay_id'] = replay_id;
+        }
+    }
+    return props;
 };
 
 // Private methods
@@ -358,9 +413,8 @@ MixpanelLib.prototype._loaded = function() {
     this._set_default_superprops();
     this['people'].set_once(this['persistence'].get_referrer_info());
 
-    // The original 'store_google' functionality will be deprecated and the config will be
-    // used to clear previously managed UTM parameters from persistence.
-    // stop_utm_persistence is `false` by default now but will be default `true` in the future.
+    // `store_google` is now deprecated and previously stored UTM parameters are cleared
+    // from persistence by default.
     if (this.get_config('store_google') && this.get_config('stop_utm_persistence')) {
         var utm_params = _.info.campaignParams(null);
         _.each(utm_params, function(_utm_value, utm_key) {
@@ -374,6 +428,7 @@ MixpanelLib.prototype._loaded = function() {
 // update persistence with info on referrer, UTM params, etc
 MixpanelLib.prototype._set_default_superprops = function() {
     this['persistence'].update_search_keyword(document.referrer);
+    // Registering super properties for UTM persistence by 'store_google' is deprecated.
     if (this.get_config('store_google') && !this.get_config('stop_utm_persistence')) {
         this.register(_.info.campaignParams());
     }
@@ -933,6 +988,7 @@ MixpanelLib.prototype.track = addOptOutCheckMixpanelLib(function(event_name, pro
         marketing_properties,
         this['persistence'].properties(),
         this.unpersisted_superprops,
+        this.get_session_recording_properties(),
         properties
     );
 
@@ -2040,38 +2096,41 @@ MixpanelLib.prototype.report_error = function(msg, err) {
 // EXPORTS (for closure compiler)
 
 // MixpanelLib Exports
-MixpanelLib.prototype['init']                      = MixpanelLib.prototype.init;
-MixpanelLib.prototype['reset']                     = MixpanelLib.prototype.reset;
-MixpanelLib.prototype['disable']                   = MixpanelLib.prototype.disable;
-MixpanelLib.prototype['time_event']                = MixpanelLib.prototype.time_event;
-MixpanelLib.prototype['track']                     = MixpanelLib.prototype.track;
-MixpanelLib.prototype['track_links']               = MixpanelLib.prototype.track_links;
-MixpanelLib.prototype['track_forms']               = MixpanelLib.prototype.track_forms;
-MixpanelLib.prototype['track_pageview']            = MixpanelLib.prototype.track_pageview;
-MixpanelLib.prototype['register']                  = MixpanelLib.prototype.register;
-MixpanelLib.prototype['register_once']             = MixpanelLib.prototype.register_once;
-MixpanelLib.prototype['unregister']                = MixpanelLib.prototype.unregister;
-MixpanelLib.prototype['identify']                  = MixpanelLib.prototype.identify;
-MixpanelLib.prototype['alias']                     = MixpanelLib.prototype.alias;
-MixpanelLib.prototype['name_tag']                  = MixpanelLib.prototype.name_tag;
-MixpanelLib.prototype['set_config']                = MixpanelLib.prototype.set_config;
-MixpanelLib.prototype['get_config']                = MixpanelLib.prototype.get_config;
-MixpanelLib.prototype['get_property']              = MixpanelLib.prototype.get_property;
-MixpanelLib.prototype['get_distinct_id']           = MixpanelLib.prototype.get_distinct_id;
-MixpanelLib.prototype['toString']                  = MixpanelLib.prototype.toString;
-MixpanelLib.prototype['opt_out_tracking']          = MixpanelLib.prototype.opt_out_tracking;
-MixpanelLib.prototype['opt_in_tracking']           = MixpanelLib.prototype.opt_in_tracking;
-MixpanelLib.prototype['has_opted_out_tracking']    = MixpanelLib.prototype.has_opted_out_tracking;
-MixpanelLib.prototype['has_opted_in_tracking']     = MixpanelLib.prototype.has_opted_in_tracking;
-MixpanelLib.prototype['clear_opt_in_out_tracking'] = MixpanelLib.prototype.clear_opt_in_out_tracking;
-MixpanelLib.prototype['get_group']                 = MixpanelLib.prototype.get_group;
-MixpanelLib.prototype['set_group']                 = MixpanelLib.prototype.set_group;
-MixpanelLib.prototype['add_group']                 = MixpanelLib.prototype.add_group;
-MixpanelLib.prototype['remove_group']              = MixpanelLib.prototype.remove_group;
-MixpanelLib.prototype['track_with_groups']         = MixpanelLib.prototype.track_with_groups;
-MixpanelLib.prototype['start_batch_senders']       = MixpanelLib.prototype.start_batch_senders;
-MixpanelLib.prototype['stop_batch_senders']        = MixpanelLib.prototype.stop_batch_senders;
-MixpanelLib.prototype['DEFAULT_API_ROUTES']        = DEFAULT_API_ROUTES;
+MixpanelLib.prototype['init']                               = MixpanelLib.prototype.init;
+MixpanelLib.prototype['reset']                              = MixpanelLib.prototype.reset;
+MixpanelLib.prototype['disable']                            = MixpanelLib.prototype.disable;
+MixpanelLib.prototype['time_event']                         = MixpanelLib.prototype.time_event;
+MixpanelLib.prototype['track']                              = MixpanelLib.prototype.track;
+MixpanelLib.prototype['track_links']                        = MixpanelLib.prototype.track_links;
+MixpanelLib.prototype['track_forms']                        = MixpanelLib.prototype.track_forms;
+MixpanelLib.prototype['track_pageview']                     = MixpanelLib.prototype.track_pageview;
+MixpanelLib.prototype['register']                           = MixpanelLib.prototype.register;
+MixpanelLib.prototype['register_once']                      = MixpanelLib.prototype.register_once;
+MixpanelLib.prototype['unregister']                         = MixpanelLib.prototype.unregister;
+MixpanelLib.prototype['identify']                           = MixpanelLib.prototype.identify;
+MixpanelLib.prototype['alias']                              = MixpanelLib.prototype.alias;
+MixpanelLib.prototype['name_tag']                           = MixpanelLib.prototype.name_tag;
+MixpanelLib.prototype['set_config']                         = MixpanelLib.prototype.set_config;
+MixpanelLib.prototype['get_config']                         = MixpanelLib.prototype.get_config;
+MixpanelLib.prototype['get_property']                       = MixpanelLib.prototype.get_property;
+MixpanelLib.prototype['get_distinct_id']                    = MixpanelLib.prototype.get_distinct_id;
+MixpanelLib.prototype['toString']                           = MixpanelLib.prototype.toString;
+MixpanelLib.prototype['opt_out_tracking']                   = MixpanelLib.prototype.opt_out_tracking;
+MixpanelLib.prototype['opt_in_tracking']                    = MixpanelLib.prototype.opt_in_tracking;
+MixpanelLib.prototype['has_opted_out_tracking']             = MixpanelLib.prototype.has_opted_out_tracking;
+MixpanelLib.prototype['has_opted_in_tracking']              = MixpanelLib.prototype.has_opted_in_tracking;
+MixpanelLib.prototype['clear_opt_in_out_tracking']          = MixpanelLib.prototype.clear_opt_in_out_tracking;
+MixpanelLib.prototype['get_group']                          = MixpanelLib.prototype.get_group;
+MixpanelLib.prototype['set_group']                          = MixpanelLib.prototype.set_group;
+MixpanelLib.prototype['add_group']                          = MixpanelLib.prototype.add_group;
+MixpanelLib.prototype['remove_group']                       = MixpanelLib.prototype.remove_group;
+MixpanelLib.prototype['track_with_groups']                  = MixpanelLib.prototype.track_with_groups;
+MixpanelLib.prototype['start_batch_senders']                = MixpanelLib.prototype.start_batch_senders;
+MixpanelLib.prototype['stop_batch_senders']                 = MixpanelLib.prototype.stop_batch_senders;
+MixpanelLib.prototype['start_session_recording']            = MixpanelLib.prototype.start_session_recording;
+MixpanelLib.prototype['stop_session_recording']             = MixpanelLib.prototype.stop_session_recording;
+MixpanelLib.prototype['get_session_recording_properties']   = MixpanelLib.prototype.get_session_recording_properties;
+MixpanelLib.prototype['DEFAULT_API_ROUTES']                 = DEFAULT_API_ROUTES;
 
 // MixpanelPersistence Exports
 MixpanelPersistence.prototype['properties']            = MixpanelPersistence.prototype.properties;

package/src/mixpanel-persistence.js

@@ -66,7 +66,7 @@ var MixpanelPersistence = function(config) {
 
     this.load();
     this.update_config(config);
-    this.upgrade(config);
+    this.upgrade();
     this.save();
 };
 
@@ -94,49 +94,12 @@ MixpanelPersistence.prototype.load = function() {
     }
 };
 
-MixpanelPersistence.prototype.upgrade = function(config) {
-    var upgrade_from_old_lib = config['upgrade'],
-        old_cookie_name,
-        old_cookie;
-
-    if (upgrade_from_old_lib) {
-        old_cookie_name = 'mp_super_properties';
-        // Case where they had a custom cookie name before.
-        if (typeof(upgrade_from_old_lib) === 'string') {
-            old_cookie_name = upgrade_from_old_lib;
-        }
-
-        old_cookie = this.storage.parse(old_cookie_name);
-
-        // remove the cookie
-        this.storage.remove(old_cookie_name);
-        this.storage.remove(old_cookie_name, true);
-
-        if (old_cookie) {
-            this['props'] = _.extend(
-                this['props'],
-                old_cookie['all'],
-                old_cookie['events']
-            );
-        }
-    }
-
-    if (!config['cookie_name'] && config['name'] !== 'mixpanel') {
-        // special case to handle people with cookies of the form
-        // mp_TOKEN_INSTANCENAME from the first release of this library
-        old_cookie_name = 'mp_' + config['token'] + '_' + config['name'];
-        old_cookie = this.storage.parse(old_cookie_name);
-
-        if (old_cookie) {
-            this.storage.remove(old_cookie_name);
-            this.storage.remove(old_cookie_name, true);
-
-            // Save the prop values that were in the cookie from before -
-            // this should only happen once as we delete the old one.
-            this.register_once(old_cookie);
-        }
-    }
+MixpanelPersistence.prototype.upgrade = function() {
+    var old_cookie,
+        old_localstorage;
 
+    // if transferring from cookie to localStorage or vice-versa, copy existing
+    // super properties over to new storage mode
     if (this.storage === _.localStorage) {
         old_cookie = _.cookie.parse(this.name);
 
@@ -146,6 +109,14 @@ MixpanelPersistence.prototype.upgrade = function(config) {
         if (old_cookie) {
             this.register_once(old_cookie);
         }
+    } else if (this.storage === _.cookie) {
+        old_localstorage = _.localStorage.parse(this.name);
+
+        _.localStorage.remove(this.name);
+
+        if (old_localstorage) {
+            this.register_once(old_localstorage);
+        }
     }
 };
 

package/src/recorder/index.js

@@ -0,0 +1,156 @@
+import {default as record} from 'rrweb/es/rrweb/packages/rrweb/src/record/index.js';
+
+import { MAX_RECORDING_MS, console_with_prefix, _ } from '../utils'; // eslint-disable-line camelcase
+import { addOptOutCheckMixpanelLib } from '../gdpr-utils';
+
+var logger = console_with_prefix('recorder');
+
+var MixpanelRecorder = function(mixpanelInstance) {
+    this._mixpanel = mixpanelInstance;
+
+    // internal rrweb stopRecording function
+    this._stopRecording = null;
+
+    this.recEvents = [];
+    this.seqNo = 0;
+    this.replayId = null;
+    this.replayStartTime = null;
+    this.batchStartTime = null;
+    this.replayLengthMs = 0;
+    this.sendBatchId = null;
+
+    this.idleTimeoutId = null;
+    this.maxTimeoutId = null;
+
+    this.recordMaxMs = MAX_RECORDING_MS;
+};
+
+// eslint-disable-next-line camelcase
+MixpanelRecorder.prototype.get_config = function(configVar) {
+    return this._mixpanel.get_config(configVar);
+};
+
+MixpanelRecorder.prototype.startRecording = function () {
+    if (this._stopRecording !== null) {
+        logger.log('Recording already in progress, skipping startRecording.');
+        return;
+    }
+
+    this.recordMaxMs = this.get_config('record_max_ms');
+    if (this.recordMaxMs > MAX_RECORDING_MS) {
+        this.recordMaxMs = MAX_RECORDING_MS;
+        logger.critical('record_max_ms cannot be greater than ' + MAX_RECORDING_MS + 'ms. Capping value.');
+    }
+
+    this.recEvents = [];
+    this.seqNo = 0;
+    this.startDate = new Date();
+    this.replayStartTime = this.startDate.getTime();
+    this.batchStartTime = this.replayStartTime;
+
+    this.replayId = _.UUID();
+    this.replayLengthMs = 0;
+
+    var resetIdleTimeout = _.bind(function () {
+        clearTimeout(this.idleTimeoutId);
+        this.idleTimeoutId = setTimeout(_.bind(function () {
+            logger.log('Idle timeout reached, restarting recording.');
+            this.resetRecording();
+        }, this), this.get_config('record_idle_timeout_ms'));
+    }, this);
+
+    this._stopRecording = record({
+        'emit': _.bind(function (ev) {
+            this.recEvents.push(ev);
+            this.replayLengthMs = new Date().getTime() - this.replayStartTime;
+            resetIdleTimeout();
+        }, this),
+        'maskAllInputs': true,
+        'maskTextSelector': this.get_config('record_mask_text_selector'),
+        'blockSelector': this.get_config('record_block_selector'),
+        'maskTextClass': this.get_config('record_mask_text_class'),
+        'blockClass': this.get_config('record_block_class'),
+    });
+
+    resetIdleTimeout();
+
+    this.sendBatchId = setInterval(_.bind(this.flushEventsWithOptOut, this), 10000);
+    this.maxTimeoutId = setTimeout(_.bind(this.resetRecording, this), this.recordMaxMs);
+};
+
+MixpanelRecorder.prototype.resetRecording = function () {
+    this.stopRecording();
+    this.startRecording();
+};
+
+MixpanelRecorder.prototype.stopRecording = function () {
+    if (this._stopRecording !== null) {
+        this._stopRecording();
+        this._stopRecording = null;
+    }
+
+    this._flushEvents(); // flush any remaining events
+    this.replayId = null;
+
+    clearInterval(this.sendBatchId);
+    clearTimeout(this.idleTimeoutId);
+    clearTimeout(this.maxTimeoutId);
+};
+
+/**
+ * Flushes the current batch of events to the server, but passes an opt-out callback to make sure
+ * we stop recording and dump any queued events if the user has opted out.
+ */
+MixpanelRecorder.prototype.flushEventsWithOptOut = function () {
+    this._flushEvents(_.bind(this._onOptOut, this));
+};
+
+MixpanelRecorder.prototype._onOptOut = function (code) {
+    // addOptOutCheckMixpanelLib invokes this function with code=0 when the user has opted out
+    if (code === 0) {
+        this.recEvents = [];
+        this.stopRecording();
+    }
+};
+
+/**
+ * @api private
+ * Private method, flushes the current batch of events to the server.
+ */
+MixpanelRecorder.prototype._flushEvents = addOptOutCheckMixpanelLib(function() {
+    var numEvents = this.recEvents.length;
+    if (numEvents > 0) {
+        var reqBody = {
+            'distinct_id': String(this._mixpanel.get_distinct_id()),
+            'events': this.recEvents,
+            'seq': this.seqNo++,
+            'batch_start_time': this.batchStartTime / 1000,
+            'replay_id': this.replayId,
+            'replay_length_ms': this.replayLengthMs,
+            'replay_start_time': this.replayStartTime / 1000
+        };
+
+        // send ID management props if they exist
+        var deviceId = this._mixpanel.get_property('$device_id');
+        if (deviceId) {
+            reqBody['$device_id'] = deviceId;
+        }
+        var userId = this._mixpanel.get_property('$user_id');
+        if (userId) {
+            reqBody['$user_id'] = userId;
+        }
+
+        window['fetch'](this.get_config('api_host') + '/' + this.get_config('api_routes')['record'], {
+            'method': 'POST',
+            'headers': {
+                'Authorization': 'Basic ' + btoa(this.get_config('token') + ':'),
+                'Content-Type': 'application/json'
+            },
+            'body': _.JSONEncode(reqBody)
+        });
+        this.recEvents = this.recEvents.slice(numEvents);
+        this.batchStartTime = new Date().getTime();
+    }
+});
+
+window['__mp_recorder'] = MixpanelRecorder;

package/src/recorder/rollup.config.js

@@ -0,0 +1,19 @@
+import esbuild from 'rollup-plugin-esbuild';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+
+export default {
+    input: 'index.js',
+    output: [
+        {
+            file: 'build/mixpanel-recorder.js',
+            format: 'esm'
+        },
+        {
+            file: 'build/mixpanel-recorder.min.js',
+            format: 'esm',
+            name: 'version',
+            plugins: [esbuild({minify: true})]
+        }
+    ],
+    plugins: [nodeResolve({browser: true})],
+};

package/src/utils.js

@@ -20,6 +20,9 @@ if (typeof(window) === 'undefined') {
     win = window;
 }
 
+// Maximum allowed session recording length
+var MAX_RECORDING_MS = 24 * 60 * 60 * 1000; // 24 hours
+
 /*
  * Saved references to long variable names, so that closure compiler can
  * minimize file size.
@@ -1721,6 +1724,7 @@ _['info']['browserVersion'] = _.info.browserVersion;
 _['info']['properties']     = _.info.properties;
 
 export {
+    MAX_RECORDING_MS,
     _,
     userAgent,
     console,