mixpanel-js icon indicating copy to clipboard operation
mixpanel-js copied to clipboard

Allow async init

Open romulof opened this issue 1 year ago • 6 comments

If we use the snippet, it creates a basic queue and loads the script asynchronously, so events can be tracked while the mixpanel lib is loaded. As a downside Adblockers can do their thing.

If we use the NPM package, we add 200kb of JS to our bundles and this cannot be loaded async unless we don't want to track things in background.

Loading async via NPM package can be tricky as different bundlers can handle things in different ways, although most use import(), so I suggest to make this initialisation in 2 steps:

  1. Create a basic queue
  2. Trigger the async load of the actual Mixpanel JS

Example:

import mixpanelInit from 'mixpanel-browser/init';

mixpanelInit(config, () => import('mixpanel-browser/lib'));

This way our bundlers can deploy mixpanel lib together with our applications, avoiding ad blockers, and we don't pay 200+kb bundle tax.

romulof avatar Dec 19 '23 14:12 romulof