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
``sh
npm i mixpanel-figma


or using Yarn


yarn add mixpanel-figma
`

Import package and use client as you usually would.
`typescript
// 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.

`typescript
// 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)
``

License

Apache 2.0