Mixpanel-figma NPM

Problem

Original Mixpanel client will NOT work in Figma plugins UI.

Why?
Electron limitation when Iframe content is loaded as Data-URI. Both localStorage and document.cookie are not available (similar problem).

Mixpanel client has configuration option to switch off persistance disable_persistence, but it won't help, as it accesses cookie, which crashes the client 🤷‍♂️.

Fix

Patch the original file to not access document.cookie/localStorage.

Original file - mixpanel/mixpanel-js Patched file – mixpanel-patched.js

Bonus points. Size reduction (~250kb to 130kb).

Mixpanel client is a HUGE file and team is not addressing it.

So I stripped file to make it much smaller. Things removed:

mixpanel.group
track_links and track_forms
notification related things (don't even know what they are)
autotrack – some feature Mixpanel discontinued

If size does not bother you or something you need was removed – use npm i mixpanel-figma@1.0.0 or raw file (diff)

Usage

Installation

npm i mixpanel-figma
# or using Yarn
yarn add mixpanel-figma

Import package and use client as you usually would.

// main.ts
import * as mixpanel from 'mixpanel-figma'

// disabling via config just in case
mixpanel.init(YOUR_MIXPANEL_KEY, {
  disable_cookie: true,
  disable_persistence: true
})

`identify` support

Since there is no persistance – every time someone opens your plugin Mixpanel would assume it a unique visitor/user.

To fix that, generate user_id for persistance on main thread side and store it in plugin settings.

CAVEAT Figma plugin settings are tied to Figma instance, so if user uses desktop app on 2 laptops – it will be treated as 2 different users.

// main.ts

const getUserId = async () => {
  let userId = uuid()

  try {
    const id = await figma.clientStorage.getAsync('userId')

    if (typeof id === 'undefined') {
      figma.clientStorage.setAsync('userId', userId)
    } else {
      userId = id
    }
  } catch (e) {
    console.error('userId retrieving error', e)
    figma.clientStorage.setAsync('userId', userId)
  }

  return userId
}
// get or set if not yet set.
const userId = await getUserId()
// send to iframe
figma.ui.sendMessage(userId)


// iframe.ts

// receive userId from main thread and call identify
mixpanel.identify(userId)