mixpanel-browser 2.40.1 → 2.43.0

package/doc/build-docs.js

@@ -97,6 +97,22 @@ function doxToMD(items) {
   });
 }
 
+// Captures prototype bracket notation property assignment, e.g.:
+// `MixpanelGroup.prototype['delete'] = addOptOutCheckMixpanelGroup(function(callback) {`
+// Based on https://github.com/tj/dox/blob/9fe92e17dfcd31c9b6512f6e5bf0b52c2b6b84d4/lib/dox.js#L592
+dox.contextPatternMatchers.push(function (str) {
+  if (/^\s*([\w$.]+)\s*\.\s*prototype\s*\['\s*([\w$]+)'\]\s*=\s*([^\n;]+)/.exec(str)) {
+    return {
+        type: 'property'
+      , constructor: RegExp.$1
+      , cons: RegExp.$1
+      , name: RegExp.$2
+      , value: RegExp.$3.trim()
+      , string: RegExp.$1 + '.prototype.' + RegExp.$2
+    };
+  }
+});
+
 const rawCode = fs.readFileSync(SOURCE_FILE).toString().trim();
 const parsed = dox.parseComments(rawCode);
 

package/doc/readme.io/javascript-full-api-reference.md

@@ -990,6 +990,24 @@ mixpanel.people.unset(['gender', 'Company']);
 # mixpanel.group
 
 
+___
+## mixpanel.group.delete
+Permanently delete a group.
+
+
+### Usage:
+
+```javascript
+mixpanel.get_group('company', 'mixpanel').delete();
+```
+
+
+
+| Argument | Type | Description |
+| ------------- | ------------- | ----- |
+| **callback** | <span class="mp-arg-type">Function</span></br></span><span class="mp-arg-optional">optional</span> | If provided, the callback will be called after the tracking event |
+
+
 ___
 ## mixpanel.group.remove
 Remove a property from a group. The value will be ignored if doesn't exist.

package/mixpanel-jslib-snippet.js

@@ -9,25 +9,6 @@ var MIXPANEL_LIB_URL = '//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js';
 (function(document, mixpanel) {
     // Only stub out if this is the first time running the snippet.
     if (!mixpanel['__SV']) {
-        var win = window;
-
-        // grab the hash params for ce editor immediately in case
-        // host website changes hash after init
-        try {
-          var getHashParam, matches, state, loc = win.location, hash = loc.hash;
-          getHashParam = function(hash, param) {
-              matches = hash.match(new RegExp(param + '=([^&]*)'));
-              return matches ? matches[1] : null;
-          };
-          if (hash && getHashParam(hash, 'state')) {
-              state = JSON.parse(decodeURIComponent(getHashParam(hash, 'state')));
-              if (state['action'] === 'mpeditor') {
-                win.sessionStorage.setItem('_mpcehash', hash);
-                history.replaceState(state['desiredHash'] || '', document.title, loc.pathname + loc.search); // remove ce editor hash
-              }
-          }
-        } catch (e) {}
-
         var script, first_script, gen_fn, functions, i, lib_name = "mixpanel";
         window[lib_name] = mixpanel;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mixpanel-browser",
-  "version": "2.40.1",
+  "version": "2.43.0",
   "description": "The official Mixpanel JavaScript browser client library",
   "main": "dist/mixpanel.cjs.js",
   "directories": {
@@ -46,10 +46,10 @@
     "jsdom": "11.12.0",
     "jsdom-global": "3.0.2",
     "localStorage": "1.0.4",
-    "lodash": "4.17.19",
+    "lodash": "4.17.21",
     "mocha": "7.1.1",
     "morgan": "1.9.1",
-    "rdme": "3.0.0",
+    "rdme": "4.0.0",
     "request": "2.88.0",
     "rollup": "0.25.8",
     "rollup-plugin-npm": "1.4.0",

package/src/config.js

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

package/src/mixpanel-core.js

@@ -1,7 +1,6 @@
 /* eslint camelcase: "off" */
 import Config from './config';
-import { _, console, userAgent, window, document, navigator, determine_eligibility, slice } from './utils';
-import { autotrack } from './autotrack';
+import { _, console, userAgent, window, document, navigator, slice } from './utils';
 import { FormTracker, LinkTracker } from './dom-trackers';
 import { RequestBatcher } from './request-batcher';
 import { MixpanelGroup } from './mixpanel-group';
@@ -57,6 +56,8 @@ var IDENTITY_FUNC = function(x) {return x;};
 var NOOP_FUNC = function() {};
 
 /** @const */ var PRIMARY_INSTANCE_NAME = 'mixpanel';
+/** @const */ var PAYLOAD_TYPE_BASE64   = 'base64';
+/** @const */ var PAYLOAD_TYPE_JSON     = 'json';
 
 
 /*
@@ -87,8 +88,8 @@ var DEFAULT_CONFIG = {
     'api_host':                          'https://api-js.mixpanel.com',
     'api_method':                        'POST',
     'api_transport':                     'XHR',
+    'api_payload_format':                PAYLOAD_TYPE_BASE64,
     'app_host':                          'https://mixpanel.com',
-    'autotrack':                         true,
     'cdn':                               'https://cdn.mxpnl.com',
     'cross_site_cookie':                 false,
     'cross_subdomain_cookie':            true,
@@ -119,7 +120,7 @@ var DEFAULT_CONFIG = {
     'inapp_protocol':                    '//',
     'inapp_link_new_window':             false,
     'ignore_dnt':                        false,
-    'batch_requests':                    false, // for now
+    'batch_requests':                    true,
     'batch_size':                        50,
     'batch_flush_interval_ms':           5000,
     'batch_request_timeout_ms':          90000,
@@ -171,21 +172,6 @@ var create_mplib = function(token, config, name) {
     // global debug to be true
     Config.DEBUG = Config.DEBUG || instance.get_config('debug');
 
-    instance['__autotrack_enabled'] = instance.get_config('autotrack');
-    if (instance.get_config('autotrack')) {
-        var num_buckets = 100;
-        var num_enabled_buckets = 100;
-        if (!autotrack.enabledForProject(instance.get_config('token'), num_buckets, num_enabled_buckets)) {
-            instance['__autotrack_enabled'] = false;
-            console.log('Not in active bucket: disabling Automatic Event Collection.');
-        } else if (!autotrack.isBrowserSupported()) {
-            instance['__autotrack_enabled'] = false;
-            console.log('Disabling Automatic Event Collection because this browser is not supported');
-        } else {
-            autotrack.init(instance);
-        }
-    }
-
     // if target is not defined, we called init after the lib already
     // loaded, so there won't be an array of things to execute
     if (!_.isUndefined(target) && _.isArray(target)) {
@@ -198,12 +184,6 @@ var create_mplib = function(token, config, name) {
     return instance;
 };
 
-var encode_data_for_request = function(data) {
-    var json_data = _.JSONEncode(data);
-    var encoded_data = _.base64Encode(json_data);
-    return {'data': encoded_data};
-};
-
 // Initialization methods
 
 /**
@@ -253,14 +233,14 @@ MixpanelLib.prototype._init = function(token, config, name) {
     this['config'] = {};
     this['_triggered_notifs'] = [];
 
-    // rollout: enable batch_requests by default for 60% of projects
-    // (only if they have not specified a value in their init config
-    // and they aren't using a custom API host)
     var variable_features = {};
-    var api_host = config['api_host'];
-    var is_custom_api = !!api_host && !api_host.match(/\.mixpanel\.com$/);
-    if (!('batch_requests' in config) && !is_custom_api && determine_eligibility(token, 'batch', 60)) {
-        variable_features['batch_requests'] = true;
+
+    // default to JSON payload for standard mixpanel.com API hosts
+    if (!('api_payload_format' in config)) {
+        var api_host = config['api_host'] || DEFAULT_CONFIG['api_host'];
+        if (api_host.match(/\.mixpanel\.com$/)) {
+            variable_features['api_payload_format'] = PAYLOAD_TYPE_JSON;
+        }
     }
 
     this.set_config(_.extend({}, DEFAULT_CONFIG, variable_features, config, {
@@ -289,15 +269,32 @@ MixpanelLib.prototype._init = function(token, config, name) {
         } else {
             this.init_batchers();
             if (sendBeacon && window.addEventListener) {
-                window.addEventListener('unload', _.bind(function() {
-                    // Before page closes, attempt to flush any events queued up via navigator.sendBeacon.
-                    // Since sendBeacon doesn't report success/failure, events will not be removed from
-                    // the persistent store; if the site is loaded again, the events will be flushed again
-                    // on startup and deduplicated on the Mixpanel server side.
+                // Before page closes or hides (user tabs away etc), attempt to flush any events
+                // queued up via navigator.sendBeacon. Since sendBeacon doesn't report success/failure,
+                // events will not be removed from the persistent store; if the site is loaded again,
+                // the events will be flushed again on startup and deduplicated on the Mixpanel server
+                // side.
+                // There is no reliable way to capture only page close events, so we lean on the
+                // visibilitychange and pagehide events as recommended at
+                // https://developer.mozilla.org/en-US/docs/Web/API/Window/unload_event#usage_notes.
+                // These events fire when the user clicks away from the current page/tab, so will occur
+                // more frequently than page unload, but are the only mechanism currently for capturing
+                // this scenario somewhat reliably.
+                var flush_on_unload = _.bind(function() {
                     if (!this.request_batchers.events.stopped) {
                         this.request_batchers.events.flush({unloading: true});
                     }
-                }, this));
+                }, this);
+                window.addEventListener('pagehide', function(ev) {
+                    if (ev['persisted']) {
+                        flush_on_unload();
+                    }
+                });
+                window.addEventListener('visibilitychange', function() {
+                    if (document['visibilityState'] === 'hidden') {
+                        flush_on_unload();
+                    }
+                });
             }
         }
     }
@@ -622,7 +619,7 @@ MixpanelLib.prototype.init_batchers = function() {
                     sendRequestFunc: _.bind(function(data, options, cb) {
                         this._send_request(
                             this.get_config('api_host') + attrs.endpoint,
-                            encode_data_for_request(data),
+                            this._encode_data_for_request(data),
                             options,
                             this._prepare_callback(cb, data)
                         );
@@ -696,6 +693,14 @@ MixpanelLib.prototype.disable = function(events) {
     }
 };
 
+MixpanelLib.prototype._encode_data_for_request = function(data) {
+    var encoded_data = _.JSONEncode(data);
+    if (this.get_config('api_payload_format') === PAYLOAD_TYPE_BASE64) {
+        encoded_data = _.base64Encode(encoded_data);
+    }
+    return {'data': encoded_data};
+};
+
 // internal method for handling track vs batch-enqueue logic
 MixpanelLib.prototype._track_or_batch = function(options, callback) {
     var truncated_data = _.truncate(options.data, 255);
@@ -715,7 +720,7 @@ MixpanelLib.prototype._track_or_batch = function(options, callback) {
             console.log(truncated_data);
             return this._send_request(
                 endpoint,
-                encode_data_for_request(truncated_data),
+                this._encode_data_for_request(truncated_data),
                 send_request_options,
                 this._prepare_callback(callback, truncated_data)
             );

package/src/mixpanel-group.js

@@ -110,9 +110,13 @@ MixpanelGroup.prototype.union = addOptOutCheckMixpanelGroup(function(list_name,
  * Permanently delete a group.
  *
  * ### Usage:
+ *
  *     mixpanel.get_group('company', 'mixpanel').delete();
+ *
+ * @param {Function} [callback] If provided, the callback will be called after the tracking event
  */
 MixpanelGroup.prototype['delete'] = addOptOutCheckMixpanelGroup(function(callback) {
+    // bracket notation above prevents a minification error related to reserved words
     var data = this.delete_action();
     return this._send_request(data, callback);
 });

package/src/request-batcher.js

@@ -148,9 +148,9 @@ RequestBatcher.prototype.flush = function(options) {
                 } else if (
                     _.isObject(res) &&
                     res.xhr_req &&
-                    (res.xhr_req['status'] >= 500 || res.xhr_req['status'] <= 0)
+                    (res.xhr_req['status'] >= 500 || res.xhr_req['status'] === 429 || res.error === 'timeout')
                 ) {
-                    // network or API error, retry
+                    // network or API error, or 429 Too Many Requests, retry
                     var retryMS = this.flushInterval * 2;
                     var headers = res.xhr_req['responseHeaders'];
                     if (headers) {

package/src/utils.js

@@ -279,10 +279,6 @@ _.values = function(obj) {
     return results;
 };
 
-_.identity = function(value) {
-    return value;
-};
-
 _.include = function(obj, target) {
     var found = false;
     if (obj === null) {
@@ -946,10 +942,12 @@ _.UUID = (function() {
 // This is to block various web spiders from executing our JS and
 // sending false tracking data
 var BLOCKED_UA_STRS = [
+    'ahrefsbot',
     'baiduspider',
     'bingbot',
     'bingpreview',
     'facebookexternal',
+    'petalbot',
     'pinterest',
     'screaming frog',
     'yahoo! slurp',
@@ -1020,10 +1018,6 @@ _.getQueryParam = function(url, param) {
     }
 };
 
-_.getHashParam = function(hash, param) {
-    var matches = hash.match(new RegExp(param + '=([^&]*)'));
-    return matches ? matches[1] : null;
-};
 
 // _.cookie
 // Methods partially borrowed from quirksmode.org/js/cookies.html
@@ -1690,28 +1684,6 @@ var cheap_guid = function(maxlen) {
     return maxlen ? guid.substring(0, maxlen) : guid;
 };
 
-/**
- * Check deterministically whether to include or exclude from a feature rollout/test based on the
- * given string and the desired percentage to include.
- * @param {String} str - string to run the check against (for instance a project's token)
- * @param {String} feature - name of feature (for inclusion in hash, to ensure different results
- * for different features)
- * @param {Number} percent_allowed - percentage chance that a given string will be included
- * @returns {Boolean} whether the given string should be included
- */
-var determine_eligibility = _.safewrap(function(str, feature, percent_allowed) {
-    str = str + feature;
-
-    // Bernstein's hash: http://www.cse.yorku.ca/~oz/hash.html#djb2
-    var hash = 5381;
-    for (var i = 0; i < str.length; i++) {
-        hash = ((hash << 5) + hash) + str.charCodeAt(i);
-        hash = hash & hash;
-    }
-    var dart = (hash >>> 0) % 100;
-    return dart < percent_allowed;
-});
-
 // naive way to extract domain name (example.com) from full hostname (my.sub.example.com)
 var SIMPLE_DOMAIN_MATCH_REGEX = /[a-z0-9][a-z0-9-]*\.[a-z]+$/i;
 // this next one attempts to account for some ccSLDs, e.g. extracting oxford.ac.uk from www.oxford.ac.uk
@@ -1770,7 +1742,6 @@ export {
     navigator,
     cheap_guid,
     console_with_prefix,
-    determine_eligibility,
     extract_domain,
     localStorageSupported,
     JSONStringify,

package/.travis.yml

@@ -1,6 +0,0 @@
-node_js:
-- '10'
-- '12'
-language: node_js
-script:
-- npm test

package/src/autotrack-utils.js

@@ -1,192 +0,0 @@
-import { _ } from './utils';
-
-/*
- * Get the className of an element, accounting for edge cases where element.className is an object
- * @param {Element} el - element to get the className of
- * @returns {string} the element's class
- */
-export function getClassName(el) {
-    switch(typeof el.className) {
-        case 'string':
-            return el.className;
-        case 'object': // handle cases where className might be SVGAnimatedString or some other type
-            return el.className.baseVal || el.getAttribute('class') || '';
-        default: // future proof
-            return '';
-    }
-}
-
-/*
- * 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
- * @returns {string} the element's direct text content
- */
-export function getSafeText(el) {
-    var elText = '';
-
-    if (shouldTrackElement(el) && el.childNodes && el.childNodes.length) {
-        _.each(el.childNodes, function(child) {
-            if (isTextNode(child) && child.textContent) {
-                elText += _.trim(child.textContent)
-                    // scrub potentially sensitive values
-                    .split(/(\s+)/).filter(shouldTrackValue).join('')
-                    // normalize whitespace
-                    .replace(/[\r\n]/g, ' ').replace(/[ ]+/g, ' ')
-                    // truncate
-                    .substring(0, 255);
-            }
-        });
-    }
-
-    return _.trim(elText);
-}
-
-/*
- * Check whether an element has nodeType Node.ELEMENT_NODE
- * @param {Element} el - element to check
- * @returns {boolean} whether el is of the correct nodeType
- */
-export function isElementNode(el) {
-    return el && el.nodeType === 1; // Node.ELEMENT_NODE - use integer constant for browser portability
-}
-
-/*
- * Check whether an element is of a given tag type.
- * Due to potential reference discrepancies (such as the webcomponents.js polyfill),
- * we want to match tagNames instead of specific references because something like
- * element === document.body won't always work because element might not be a native
- * element.
- * @param {Element} el - element to check
- * @param {string} tag - tag name (e.g., "div")
- * @returns {boolean} whether el is of the given tag type
- */
-export function isTag(el, tag) {
-    return el && el.tagName && el.tagName.toLowerCase() === tag.toLowerCase();
-}
-
-/*
- * Check whether an element has nodeType Node.TEXT_NODE
- * @param {Element} el - element to check
- * @returns {boolean} whether el is of the correct nodeType
- */
-export function isTextNode(el) {
-    return el && el.nodeType === 3; // Node.TEXT_NODE - use integer constant for browser portability
-}
-
-/*
- * Check whether a DOM event should be "tracked" or if it may contain sentitive data
- * using a variety of heuristics.
- * @param {Element} el - element to check
- * @param {Event} event - event to check
- * @returns {boolean} whether the event should be tracked
- */
-export function shouldTrackDomEvent(el, event) {
-    if (!el || isTag(el, 'html') || !isElementNode(el)) {
-        return false;
-    }
-    var tag = el.tagName.toLowerCase();
-    switch (tag) {
-        case 'html':
-            return false;
-        case 'form':
-            return event.type === 'submit';
-        case 'input':
-            if (['button', 'submit'].indexOf(el.getAttribute('type')) === -1) {
-                return event.type === 'change';
-            } else {
-                return event.type === 'click';
-            }
-        case 'select':
-        case 'textarea':
-            return event.type === 'change';
-        default:
-            return event.type === 'click';
-    }
-}
-
-/*
- * Check whether a DOM element should be "tracked" or if it may contain sentitive data
- * using a variety of heuristics.
- * @param {Element} el - element to check
- * @returns {boolean} whether the element should be tracked
- */
-export function shouldTrackElement(el) {
-    for (var curEl = el; curEl.parentNode && !isTag(curEl, 'body'); curEl = curEl.parentNode) {
-        var classes = getClassName(curEl).split(' ');
-        if (_.includes(classes, 'mp-sensitive') || _.includes(classes, 'mp-no-track')) {
-            return false;
-        }
-    }
-
-    if (_.includes(getClassName(el).split(' '), 'mp-include')) {
-        return true;
-    }
-
-    // don't send data from inputs or similar elements since there will always be
-    // a risk of clientside javascript placing sensitive data in attributes
-    if (
-        isTag(el, 'input') ||
-        isTag(el, 'select') ||
-        isTag(el, 'textarea') ||
-        el.getAttribute('contenteditable') === 'true'
-    ) {
-        return false;
-    }
-
-    // don't include hidden or password fields
-    var type = el.type || '';
-    if (typeof type === 'string') { // it's possible for el.type to be a DOM element if el is a form with a child input[name="type"]
-        switch(type.toLowerCase()) {
-            case 'hidden':
-                return false;
-            case 'password':
-                return false;
-        }
-    }
-
-    // filter out data from fields that look like sensitive fields
-    var name = el.name || el.id || '';
-    if (typeof name === 'string') { // it's possible for el.name or el.id to be a DOM element if el is a form with a child input[name="name"]
-        var sensitiveNameRegex = /^cc|cardnum|ccnum|creditcard|csc|cvc|cvv|exp|pass|pwd|routing|seccode|securitycode|securitynum|socialsec|socsec|ssn/i;
-        if (sensitiveNameRegex.test(name.replace(/[^a-zA-Z0-9]/g, ''))) {
-            return false;
-        }
-    }
-
-    return true;
-}
-
-/*
- * Check whether a string value should be "tracked" or if it may contain sentitive data
- * using a variety of heuristics.
- * @param {string} value - string value to check
- * @returns {boolean} whether the element should be tracked
- */
-export function shouldTrackValue(value) {
-    if (value === null || _.isUndefined(value)) {
-        return false;
-    }
-
-    if (typeof value === 'string') {
-        value = _.trim(value);
-
-        // check to see if input value looks like a credit card number
-        // see: https://www.safaribooksonline.com/library/view/regular-expressions-cookbook/9781449327453/ch04s20.html
-        var ccRegex = /^(?:(4[0-9]{12}(?:[0-9]{3})?)|(5[1-5][0-9]{14})|(6(?:011|5[0-9]{2})[0-9]{12})|(3[47][0-9]{13})|(3(?:0[0-5]|[68][0-9])[0-9]{11})|((?:2131|1800|35[0-9]{3})[0-9]{11}))$/;
-        if (ccRegex.test((value || '').replace(/[- ]/g, ''))) {
-            return false;
-        }
-
-        // check to see if input value looks like a social security number
-        var ssnRegex = /(^\d{3}-?\d{2}-?\d{4}$)/;
-        if (ssnRegex.test(value)) {
-            return false;
-        }
-    }
-
-    return true;
-}