https://github.com/okotoki/mixpanel-figma

👀Mixpanel-js library patched to be used in Figma plugins.
https://github.com/okotoki/mixpanel-figma

figma figma-plugins mixpanel

Last synced: 7 days ago
JSON representation

👀Mixpanel-js library patched to be used in Figma plugins.

• Host: GitHub
• URL: https://github.com/okotoki/mixpanel-figma
• Owner: okotoki
• License: mit
• Created: 2019-12-24T00:54:24.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2023-09-30T13:17:54.000Z (about 1 year ago)
• Last Synced: 2024-11-15T13:48:57.865Z (about 1 month ago)
• Topics: figma, figma-plugins, mixpanel
• Language: JavaScript
• Size: 85 KB
• Stars: 36
• Watchers: 3
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 

## 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](https://stackoverflow.com/questions/44973467/electron-browserwindow-facebook-login-failed-to-set-cookies)).

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](https://github.com/mixpanel/mixpanel-js/blob/1c4d98b4a485fbf4dc4421f00c33f3b19530b307/dist/mixpanel.cjs.js)

Patched file – [mixpanel-patched.js](mixpanel-patched.js)

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

Mixpanel client is a HUGE file and team is [not addressing it](https://github.com/mixpanel/mixpanel-js/issues/128).

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

- [mixpanel.group](https://developer.mixpanel.com/docs/javascript-full-api-reference#section-mixpanel-group)

- [track_links](https://developer.mixpanel.com/docs/javascript-full-api-reference#section-mixpanel-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 [email protected]` or [raw file](https://github.com/okotoki/mixpanel-figma/blob/master/mixpanel-patched.js) ([diff](https://github.com/okotoki/mixpanel-figma/commit/3c161fb714fd6bab1c21b9f3aea48c5f2e0a0f43))

## 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