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