mixpanel integration

manifest.json

@@ -6,8 +6,12 @@
   "ui": "dist/index.html",
   "editorType": ["figma"],
   "networkAccess": {
-    "allowedDomains": ["https://o4508138256007168.ingest.de.sentry.io"],
-    "reasoning": "We use Sentry to monitor the performance of our application and get errors information."
+    "allowedDomains": [
+      "https://o4508138256007168.ingest.de.sentry.io",
+      "https://api-js.mixpanel.com"
+    ],
+    "reasoning": "We use Sentry and Mixpanel to monitor the performance of our application and get errors information."
   },
+  "permissions": ["currentuser"],
   "documentAccess": "dynamic-page"
 }

package.json

@@ -28,6 +28,7 @@
     "base64-js": "^1.5",
     "classnames": "^2.5",
     "lru-cache": "^11.0",
+    "mixpanel-figma": "^2.0.4",
     "preact": "^10.23",
     "react-hook-form": "^7.52",
     "romans": "^2.0",

plugin-src/code.ts

@@ -1,3 +1,5 @@
+import { getUserData } from '@plugin/getUserData';
+
 import { findAllTextNodes } from './findAllTextnodes';
 import { handleExportMessage } from './handleExportMessage';
 import { registerChange } from './registerChange';
@@ -9,6 +11,7 @@ figma.showUI(__html__, { themeColors: true, width: BASE_WIDTH, height: BASE_HEIG
 
 figma.ui.onmessage = message => {
   if (message.type === 'ready') {
+    getUserData();
     findAllTextNodes();
   }
 

plugin-src/getUserData.ts

@@ -0,0 +1,14 @@
+export const getUserData = async () => {
+  const user = figma.currentUser;
+  if (user) {
+    figma.ui.postMessage({
+      type: 'USER_DATA',
+      data: {
+        userId: user.id,
+        name: user.name
+      }
+    });
+  } else {
+    console.error('Could not get user data');
+  }
+};

ui-src/.env.example

@@ -1 +1,2 @@
 VITE_SENTRY_DSN=
+VITE_MIXPANEL_TOKEN=

ui-src/context/messages.ts

@@ -12,7 +12,8 @@ type PluginMessage =
   | ProgressCurrentItemMessage
   | ProgressTotalItemsMessage
   | ProgressProcessedItemsMessage
-  | ErrorMessage;
+  | ErrorMessage
+  | UserDataMessage;
 
 type PenpotDocumentMessage = {
   type: 'PENPOT_DOCUMENT';
@@ -53,6 +54,14 @@ type ErrorMessage = {
   data: string;
 };
 
+type UserDataMessage = {
+  type: 'USER_DATA';
+  data: {
+    userId: string;
+    name: string;
+  };
+};
+
 export const sendMessage = (pluginMessage: PluginMessage) => {
   window.dispatchEvent(
     new MessageEvent<MessageData>('message', {

ui-src/context/useFigma.ts

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 
 import { FormValues } from '@ui/components/ExportForm';
+import { identify, track } from '@ui/metrics/mixpanel';
 import { parse } from '@ui/parser';
 
 import { MessageData, sendMessage } from '.';
@@ -56,6 +57,11 @@ export const useFigma = (): UseFigmaHook => {
     const { pluginMessage } = event.data;
 
     switch (pluginMessage.type) {
+      case 'USER_DATA': {
+        identify({ userId: pluginMessage.data.userId, name: pluginMessage.data.name });
+        track('Plugin Loaded');
+        break;
+      }
       case 'PENPOT_DOCUMENT': {
         const file = await parse(pluginMessage.data);
 
@@ -78,6 +84,8 @@ export const useFigma = (): UseFigmaHook => {
         setExporting(false);
         setStep(undefined);
 
+        track('File Exported');
+
         break;
       }
       case 'CUSTOM_FONTS': {
@@ -111,6 +119,7 @@ export const useFigma = (): UseFigmaHook => {
         setError(true);
         setLoading(false);
         setExporting(false);
+        track('Error', { message: pluginMessage.data });
         break;
       }
     }

ui-src/main.tsx

@@ -2,12 +2,14 @@ import 'node_modules/@create-figma-plugin/ui/lib/css/base.css';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
+import { initializeMixpanel } from '@ui/metrics/mixpanel';
 import { initializeSentry } from '@ui/metrics/sentry';
 
 import { App } from './App';
 import './main.css';
 import './reset.css';
 
+initializeMixpanel();
 initializeSentry();
 
 createRoot(document.getElementById('root') as HTMLElement).render(

ui-src/metrics/mixpanel.ts

@@ -0,0 +1,29 @@
+import mixpanel from 'mixpanel-figma';
+
+export const track = (name: string, opts = {}) => {
+  if (import.meta.env.VITE_MIXPANEL_TOKEN) {
+    mixpanel.track(name, opts);
+  }
+};
+
+export const identify = ({ userId, name }: { userId: string; name: string }) => {
+  if (import.meta.env.VITE_MIXPANEL_TOKEN) {
+    mixpanel.identify(userId);
+
+    mixpanel.people.set({
+      USER_ID: userId,
+      $name: name,
+      version: APP_VERSION
+    });
+  }
+};
+
+export const initializeMixpanel = () => {
+  if (import.meta.env.VITE_MIXPANEL_TOKEN) {
+    mixpanel.init(import.meta.env.VITE_MIXPANEL_TOKEN, {
+      disable_cookie: true,
+      disable_persistence: true,
+      track_pageview: true
+    });
+  }
+};

ui-src/metrics/sentry.ts

@@ -1,14 +1,16 @@
 import * as Sentry from '@sentry/react';
 
 export const initializeSentry = () => {
-  Sentry.init({
-    dsn: import.meta.env.VITE_SENTRY_DSN,
-    integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration()],
-    release: `penpot-exporter@${APP_VERSION}`,
-    // Tracing
-    tracesSampleRate: 1.0, //  Capture 100% of the transactions
-    // Session Replay
-    replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
-    replaysOnErrorSampleRate: 1.0 // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
-  });
+  if (import.meta.env.VITE_SENTY_DSN) {
+    Sentry.init({
+      dsn: import.meta.env.VITE_SENTRY_DSN,
+      integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration()],
+      release: `penpot-exporter@${APP_VERSION}`,
+      // Tracing
+      tracesSampleRate: 1.0, //  Capture 100% of the transactions
+      // Session Replay
+      replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+      replaysOnErrorSampleRate: 1.0 // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+    });
+  }
 };