mixpanel-browser 2.48.1 → 2.50.0

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/'
 };
 
 /*
@@ -106,10 +107,12 @@ var DEFAULT_CONFIG = {
     'cookie_domain':                     '',
     'cookie_name':                       '',
     'loaded':                            NOOP_FUNC,
+    'mp_loader':                         null,
     'track_marketing':                   true,
     'track_pageview':                    false,
     'skip_first_touch_marketing':        false,
     'store_google':                      true,
+    'stop_utm_persistence':              false,
     'save_referrer':                     true,
     'test':                              false,
     'verbose':                           false,
@@ -134,7 +137,12 @@ var DEFAULT_CONFIG = {
     'batch_flush_interval_ms':           5000,
     'batch_request_timeout_ms':          90000,
     'batch_autostart':                   true,
-    'hooks':                             {}
+    'hooks':                             {},
+    'record_sessions_percent':           0,
+    'record_idle_timeout_ms':            30 * 60 * 1000, // 30 minutes
+    'record_max_ms':                     MAX_RECORDING_MS,
+    'record_mask_text_selector':         '*',
+    'recorder_src':                      'https://cdn.mxpnl.com/libs/mixpanel-recorder.min.js'
 };
 
 var DOM_LOADED = false;
@@ -343,8 +351,44 @@ MixpanelLib.prototype._init = function(token, config, name) {
         }, '');
     }
 
-    if (this.get_config('track_pageview')) {
-        this.track_pageview();
+    var track_pageview_option = this.get_config('track_pageview');
+    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');
     }
 };
 
@@ -353,12 +397,25 @@ MixpanelLib.prototype._init = function(token, config, name) {
 MixpanelLib.prototype._loaded = function() {
     this.get_config('loaded')(this);
     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.
+    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) {
+            // We need to unregister persisted UTM parameters so old values
+            // are not mixed with the new UTM parameters
+            this.unregister(utm_key);
+        }.bind(this));
+    }
 };
 
 // update persistence with info on referrer, UTM params, etc
 MixpanelLib.prototype._set_default_superprops = function() {
     this['persistence'].update_search_keyword(document.referrer);
-    if (this.get_config('store_google')) {
+    if (this.get_config('store_google') && !this.get_config('stop_utm_persistence')) {
         this.register(_.info.campaignParams());
     }
     if (this.get_config('save_referrer')) {
@@ -396,6 +453,55 @@ MixpanelLib.prototype._track_dom = function(DomClass, args) {
     return dt.track.apply(dt, args);
 };
 
+MixpanelLib.prototype._init_url_change_tracking = function(track_pageview_option) {
+    var previous_tracked_url = '';
+    var tracked = this.track_pageview();
+    if (tracked) {
+        previous_tracked_url = _.info.currentUrl();
+    }
+
+    if (_.include(['full-url', 'url-with-path-and-query-string', 'url-with-path'], track_pageview_option)) {
+        window.addEventListener('popstate', function() {
+            window.dispatchEvent(new Event('mp_locationchange'));
+        });
+        window.addEventListener('hashchange', function() {
+            window.dispatchEvent(new Event('mp_locationchange'));
+        });
+        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('mp_locationchange'));
+            };
+        }
+        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('mp_locationchange'));
+            };
+        }
+        window.addEventListener('mp_locationchange', function() {
+            var current_url = _.info.currentUrl();
+            var should_track = false;
+            if (track_pageview_option === 'full-url') {
+                should_track = current_url !== previous_tracked_url;
+            } else if (track_pageview_option === 'url-with-path-and-query-string') {
+                should_track = current_url.split('#')[0] !== previous_tracked_url.split('#')[0];
+            } else if (track_pageview_option === 'url-with-path') {
+                should_track = current_url.split('#')[0].split('?')[0] !== previous_tracked_url.split('#')[0].split('?')[0];
+            }
+
+            if (should_track) {
+                var tracked = this.track_pageview();
+                if (tracked) {
+                    previous_tracked_url = current_url;
+                }
+            }
+        }.bind(this));
+    }
+};
+
 /**
  * _prepare_callback() should be called by callers of _send_request for use
  * as the callback argument.
@@ -857,6 +963,13 @@ MixpanelLib.prototype.track = addOptOutCheckMixpanelLib(function(event_name, pro
         ? _.info.marketingParams()
         : {};
 
+    if (this._recorder) {
+        var replay_id = this._recorder['replayId'];
+        if (replay_id) {
+            properties['$mp_replay_id'] = replay_id;
+        }
+    }
+
     // note: extend writes to the first object, so lets make sure we
     // don't write to the persistence properties object and info
     // properties object by passing in a new object
@@ -864,7 +977,7 @@ MixpanelLib.prototype.track = addOptOutCheckMixpanelLib(function(event_name, pro
     // update properties with pageview info and super-properties
     properties = _.extend(
         {},
-        _.info.properties(),
+        _.info.properties({'mp_loader': this.get_config('mp_loader')}),
         marketing_properties,
         this['persistence'].properties(),
         this.unpersisted_superprops,
@@ -1028,10 +1141,9 @@ MixpanelLib.prototype.get_group = function (group_key, group_id) {
 
 /**
  * Track a default Mixpanel page view event, which includes extra default event properties to
- * improve page view data. The `config.track_pageview` option for <a href="#mixpanelinit">mixpanel.init()</a>
- * may be turned on for tracking page loads automatically.
+ * improve page view data.
  *
- * ### Usage
+ * ### Usage:
  *
  *     // track a default $mp_web_page_view event
  *     mixpanel.track_pageview();
@@ -1048,6 +1160,23 @@ MixpanelLib.prototype.get_group = function (group_key, group_id) {
  *     // views on different products or internal applications that are considered completely separate
  *     mixpanel.track_pageview({'page': 'customer-search'}, {'event_name': '[internal] Admin Page View'});
  *
+ * ### Notes:
+ *
+ * The `config.track_pageview` option for <a href="#mixpanelinit">mixpanel.init()</a>
+ * may be turned on for tracking page loads automatically.
+ *
+ *     // track only page loads
+ *     mixpanel.init(PROJECT_TOKEN, {track_pageview: true});
+ *
+ *     // track when the URL changes in any manner
+ *     mixpanel.init(PROJECT_TOKEN, {track_pageview: 'full-url'});
+ *
+ *     // track when the URL changes, ignoring any changes in the hash part
+ *     mixpanel.init(PROJECT_TOKEN, {track_pageview: 'url-with-path-and-query-string'});
+ *
+ *     // track when the path changes, ignoring any query parameter or hash changes
+ *     mixpanel.init(PROJECT_TOKEN, {track_pageview: 'url-with-path'});
+ *
  * @param {Object} [properties] An optional set of additional properties to send with the page view event
  * @param {Object} [options] Page view tracking options
  * @param {String} [options.event_name] - Alternate name for the tracking event
@@ -1798,7 +1927,7 @@ MixpanelLib.prototype._gdpr_call_func = function(func, options) {
 /**
  * Opt the user in to data tracking and cookies/localstorage for this Mixpanel instance
  *
- * ### Usage
+ * ### Usage:
  *
  *     // opt user in
  *     mixpanel.opt_in_tracking();
@@ -1838,7 +1967,7 @@ MixpanelLib.prototype.opt_in_tracking = function(options) {
 /**
  * Opt the user out of data tracking and cookies/localstorage for this Mixpanel instance
  *
- * ### Usage
+ * ### Usage:
  *
  *     // opt user out
  *     mixpanel.opt_out_tracking();
@@ -1879,7 +2008,7 @@ MixpanelLib.prototype.opt_out_tracking = function(options) {
 /**
  * Check whether the user has opted in to data tracking and cookies/localstorage for this Mixpanel instance
  *
- * ### Usage
+ * ### Usage:
  *
  *     var has_opted_in = mixpanel.has_opted_in_tracking();
  *     // use has_opted_in value
@@ -1896,7 +2025,7 @@ MixpanelLib.prototype.has_opted_in_tracking = function(options) {
 /**
  * Check whether the user has opted out of data tracking and cookies/localstorage for this Mixpanel instance
  *
- * ### Usage
+ * ### Usage:
  *
  *     var has_opted_out = mixpanel.has_opted_out_tracking();
  *     // use has_opted_out value
@@ -1913,7 +2042,7 @@ MixpanelLib.prototype.has_opted_out_tracking = function(options) {
 /**
  * Clear the user's opt in/out status of data tracking and cookies/localstorage for this Mixpanel instance
  *
- * ### Usage
+ * ### Usage:
  *
  *     // clear user's opt-in/out status
  *     mixpanel.clear_opt_in_out_tracking();
@@ -1990,6 +2119,8 @@ MixpanelLib.prototype['remove_group']              = MixpanelLib.prototype.remov
 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['DEFAULT_API_ROUTES']        = DEFAULT_API_ROUTES;
 
 // MixpanelPersistence Exports

package/src/mixpanel-people.js

@@ -57,7 +57,6 @@ MixpanelPeople.prototype.set = addOptOutCheckMixpanelPeople(function(prop, to, c
     data[SET_ACTION] = _.extend(
         {},
         _.info.people_properties(),
-        this._mixpanel['persistence'].get_referrer_info(),
         data[SET_ACTION]
     );
     return this._send_request(data, callback);

package/src/recorder/index.js

@@ -0,0 +1,153 @@
+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')
+    });
+
+    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.
@@ -899,6 +902,7 @@ _.UUID = (function() {
 // sending false tracking data
 var BLOCKED_UA_STRS = [
     'ahrefsbot',
+    'ahrefssiteaudit',
     'baiduspider',
     'bingbot',
     'bingpreview',
@@ -1619,7 +1623,14 @@ _.info = {
         return '';
     },
 
-    properties: function() {
+    currentUrl: function() {
+        return win.location.href;
+    },
+
+    properties: function(extra_props) {
+        if (typeof extra_props !== 'object') {
+            extra_props = {};
+        }
         return _.extend(_.strip_empty_properties({
             '$os': _.info.os(),
             '$browser': _.info.browser(userAgent, navigator.vendor, windowOpera),
@@ -1627,7 +1638,7 @@ _.info = {
             '$referring_domain': _.info.referringDomain(document.referrer),
             '$device': _.info.device(userAgent)
         }), {
-            '$current_url': win.location.href,
+            '$current_url': _.info.currentUrl(),
             '$browser_version': _.info.browserVersion(userAgent, navigator.vendor, windowOpera),
             '$screen_height': screen.height,
             '$screen_width': screen.width,
@@ -1635,7 +1646,7 @@ _.info = {
             '$lib_version': Config.LIB_VERSION,
             '$insert_id': cheap_guid(),
             'time': _.timestamp() / 1000 // epoch time in seconds
-        });
+        }, _.strip_empty_properties(extra_props));
     },
 
     people_properties: function() {
@@ -1713,6 +1724,7 @@ _['info']['browserVersion'] = _.info.browserVersion;
 _['info']['properties']     = _.info.properties;
 
 export {
+    MAX_RECORDING_MS,
     _,
     userAgent,
     console,

package/src/loader-globals.js

@@ -1,4 +0,0 @@
-/* eslint camelcase: "off" */
-import { init_from_snippet } from './mixpanel-core';
-
-init_from_snippet();