From a85bc09092ac7080bff7e565c52f679193a4ca2e Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 4 Mar 2026 01:10:12 +0530 Subject: [PATCH] fix: Track mermaid.ai outflow --- src/lib/components/DesktopEditor.svelte | 2 ++ src/lib/components/Editor.svelte | 5 ++++- src/lib/components/MainMenu.svelte | 6 ++++++ src/lib/components/Navbar.svelte | 5 +++-- src/lib/components/migration/EditorChooserModal.svelte | 7 ++++--- src/lib/util/stats.ts | 8 ++++++-- src/routes/edit/+page.svelte | 5 +++-- 7 files changed, 28 insertions(+), 10 deletions(-) diff --git a/src/lib/components/DesktopEditor.svelte b/src/lib/components/DesktopEditor.svelte index ea7b4868..4979ab9c 100644 --- a/src/lib/components/DesktopEditor.svelte +++ b/src/lib/components/DesktopEditor.svelte @@ -2,6 +2,7 @@ import type { EditorProps } from '$/types'; import { env } from '$/util/env'; import { stateStore, urlsStore } from '$/util/state'; + import { logMermaidChartClick } from '$/util/stats'; import { AIPromptViewZoneManager } from '$lib/util/AIPromptViewZoneManager'; import { initEditor } from '$lib/util/monacoExtra'; import { errorDebug } from '$lib/util/util'; @@ -222,6 +223,7 @@ onHeightChange={(height) => aiPromptManager.updateHeight(height)} onClose={closePopup} onTryFree={() => { + logMermaidChartClick('vibeDiagramming'); window.open($urlsStore.mermaidChart({ medium: 'vibe_diagramming' }).save, '_blank'); closePopup(); }} /> diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte index cf5e1945..5f90fa08 100644 --- a/src/lib/components/Editor.svelte +++ b/src/lib/components/Editor.svelte @@ -7,6 +7,7 @@ import { TID } from '$/constants'; import { env } from '$/util/env'; import { stateStore, updateCode, updateConfig, urlsStore } from '$lib/util/state'; + import { logMermaidChartClick } from '$lib/util/stats'; import { debounce } from 'lodash-es'; import ExclamationCircleIcon from '~icons/material-symbols/error-outline-rounded'; @@ -65,7 +66,9 @@ variant="accent" size="sm" data-testid={TID.aiRepairButton} - href={$urlsStore.mermaidChart({ medium: 'ai_repair' }).save}> + href={$urlsStore.mermaidChart({ medium: 'ai_repair' }).save} + target="_blank" + onclick={() => logMermaidChartClick('aiRepair')}> AI Repair diff --git a/src/lib/components/MainMenu.svelte b/src/lib/components/MainMenu.svelte index 0e1ad554..90c63735 100644 --- a/src/lib/components/MainMenu.svelte +++ b/src/lib/components/MainMenu.svelte @@ -4,6 +4,7 @@ import { Switch } from '$/components/ui/switch'; import { env } from '$/util/env'; import { urlsStore } from '$/util/state'; + import { logMermaidChartClick } from '$/util/stats'; import { cn } from '$/utils'; import { mode, setMode } from 'mode-watcher'; import type { Component, Snippet } from 'svelte'; @@ -23,6 +24,7 @@ icon: Component; href: string; class?: string; + onclick?: () => void; sharesData?: boolean; checkDiagramType?: boolean; isSectionEnd?: boolean; @@ -37,6 +39,7 @@ icon: PlaygroundIcon, isSectionEnd: true, label: 'Edit in Playground', + onclick: () => logMermaidChartClick('editInPlayground'), renderer: mcMenuItem }, { @@ -62,6 +65,7 @@ href: $urlsStore.mermaidChart({ medium: 'main_menu' }).plugins, icon: PluginIcon, label: 'Plugins', + onclick: () => logMermaidChartClick('plugins'), renderer: mcMenuItem, sharesData: false }, @@ -78,6 +82,7 @@ href: $urlsStore.mermaidChart({ medium: 'main_menu' }).home, icon: MermaidChartIcon, label: 'Mermaid', + onclick: () => logMermaidChartClick('mermaidHome'), renderer: mcMenuItem, sharesData: false } @@ -88,6 +93,7 @@ - import { logEvent, plausible } from '$lib/util/stats'; + import { logEvent, logMermaidChartClick } from '$lib/util/stats'; import { version } from 'mermaid/package.json'; void logEvent('version', { @@ -43,12 +43,13 @@ let activePromotion = $state(hidePromotion ? undefined : getActivePromotion()); const trackBannerClick = () => { - if (!plausible || !activePromotion) { + if (!activePromotion) { return; } logEvent('bannerClick', { promotion: activePromotion.id }); + logMermaidChartClick('banner'); }; diff --git a/src/lib/components/migration/EditorChooserModal.svelte b/src/lib/components/migration/EditorChooserModal.svelte index 30853e48..5532dcca 100644 --- a/src/lib/components/migration/EditorChooserModal.svelte +++ b/src/lib/components/migration/EditorChooserModal.svelte @@ -2,7 +2,7 @@ import { Button } from '$/components/ui/button'; import * as Dialog from '$/components/ui/dialog'; import { dismissEditorChooser, isOnMermaidAI } from '$/util/migration/domainMigration'; - import { logEvent } from '$/util/stats'; + import { logEvent, logMermaidChartClick } from '$/util/stats'; import CodeIcon from '~icons/custom/code'; import OpenSourceIcon from '~icons/material-symbols/book-2-outline-rounded'; import ChatIcon from '~icons/material-symbols/chat-outline-rounded'; @@ -25,7 +25,8 @@ }; const handleStartTrial = () => { - logEvent('editorChooserPlus'); + logEvent('chooseEditor', { choice: 'plus' }); + logMermaidChartClick('editorPicker'); close(); const utmSource = isOnMermaidAI() ? 'mermaid_ai_live' : 'mermaid_live_editor'; window.open( @@ -41,7 +42,7 @@ }; const handleStartFree = () => { - logEvent('editorChooserOpenSource'); + logEvent('chooseEditor', { choice: 'openSource' }); close(); }; diff --git a/src/lib/util/stats.ts b/src/lib/util/stats.ts index 3236e100..b52c7629 100644 --- a/src/lib/util/stats.ts +++ b/src/lib/util/stats.ts @@ -81,14 +81,14 @@ const noDelay = 0; const defaultDelay = minutesToMilliSeconds(1); const delaysPerEvent = { bannerClick: noDelay, + chooseEditor: noDelay, copyClipboard: defaultDelay, copyMarkdown: defaultDelay, download: defaultDelay, - editorChooserOpenSource: noDelay, - editorChooserPlus: noDelay, history: defaultDelay, loadGist: defaultDelay, loadSampleDiagram: defaultDelay, + mermaidChartClick: noDelay, migration: defaultDelay, mobileViewToggle: defaultDelay, panZoom: minutesToMilliSeconds(10), @@ -123,3 +123,7 @@ export const logEvent = ( window.setTimeout(() => timeouts.delete(key), delaysPerEvent[name]) ); }; + +export const logMermaidChartClick = (source: string): void => { + logEvent('mermaidChartClick', { source }); +}; diff --git a/src/routes/edit/+page.svelte b/src/routes/edit/+page.svelte index fa9e4428..842eb38c 100644 --- a/src/routes/edit/+page.svelte +++ b/src/routes/edit/+page.svelte @@ -22,7 +22,7 @@ import { shouldShowEditorChooser } from '$/util/migration/domainMigration'; import { PanZoomState } from '$/util/panZoom'; import { stateStore, updateCodeStore, urlsStore } from '$/util/state'; - import { logEvent } from '$/util/stats'; + import { logEvent, logMermaidChartClick } from '$/util/stats'; import { initHandler } from '$/util/util'; import { onMount } from 'svelte'; import CodeIcon from '~icons/custom/code'; @@ -95,7 +95,8 @@ variant="accent" size="sm" href={$urlsStore.mermaidChart({ medium: 'save_diagram' }).save} - target="_blank"> + target="_blank" + onclick={() => logMermaidChartClick('saveDiagram')}> Save diagram