Merge pull request #1672 from mermaid-js/trackConversion

MC-2931 Add UTM params to MC URLs

src/lib/components/Editor.svelte

@@ -125,7 +125,10 @@
           </div>
         </div>
         <McWrapper>
-          <Button variant="accent" size="sm" href={$urlsStore.mermaidChart.save}>
+          <Button
+            variant="accent"
+            size="sm"
+            href={$urlsStore.mermaidChart({ medium: 'ai_repair' }).save}>
             <MermaidChartIcon />
             AI Repair
           </Button>

src/lib/components/MainMenu.svelte

@@ -23,17 +23,21 @@
   ]);
 
   const mermaidChartMenuItems = $derived([
-    { label: 'Edit in Playground', icon: PlaygroundIcon, href: $urlsStore.mermaidChart.playground },
+    {
+      label: 'Edit in Playground',
+      icon: PlaygroundIcon,
+      href: $urlsStore.mermaidChart({ medium: 'main_menu' }).playground
+    },
     {
       label: 'Plugins',
       icon: PluginIcon,
-      href: 'https://www.mermaidchart.com/plugins',
+      href: $urlsStore.mermaidChart({ medium: 'main_menu' }).plugins,
       checkDiagramType: false
     },
     {
       label: 'MermaidChart',
       icon: MermaidChartIcon,
-      href: 'https://www.mermaidchart.com',
+      href: $urlsStore.mermaidChart({ medium: 'main_menu' }).home,
       checkDiagramType: false
     }
   ]);

src/lib/components/Navbar.svelte

@@ -107,7 +107,7 @@
               // Wait for the event to be logged
               setTimeout(() => {
                 window.open(
-                  $urlsStore.mermaidChart.playground,
+                  $urlsStore.mermaidChart({ medium: 'toggle' }).playground,
                   '_self',
                   // Do not send referrer header, if the user already came from playground
                   isReferral ? 'noreferrer' : ''
@@ -115,7 +115,9 @@
               }, 100);
             }} />
 
-          <a href={$urlsStore.mermaidChart.playground} class="whitespace-nowrap">
+          <a
+            href={$urlsStore.mermaidChart({ medium: 'toggle' }).playground}
+            class="whitespace-nowrap">
             Playground <span class="hidden text-sm opacity-50 lg:inline"
               >- more features, no account required</span>
           </a>

src/lib/components/Share.svelte

@@ -37,7 +37,7 @@
             <MermaidChartIcon class="size-5" />
             Mermaid Chart Playground
           </h2>
-          <CopyInput value={$urlsStore.mermaidChart.playground} />
+          <CopyInput value={$urlsStore.mermaidChart({ medium: 'share' }).playground} />
           <Dialog.Description>
             Opens the Mermaid Chart Playground with Mermaid AI, Visual Editor, and more.
           </Dialog.Description>

src/lib/util/promos/April2025.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Button } from '$/components/ui/button';
+  import { MCBaseURL } from '$/util/util';
   import { onDestroy, type Snippet } from 'svelte';
   import { fade } from 'svelte/transition';
 
@@ -17,19 +18,19 @@
   const taglines: Taglines[] = [
     {
       label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Chart',
-      url: 'https://www.mermaidchart.com/mermaid-ai?utm_source=mermaid_live&utm_medium=banner_ad&utm_campaign=aibundle'
+      url: '/mermaid-ai?utm_source=mermaid_live&utm_medium=banner_ad&utm_campaign=aibundle'
     },
     {
       label: 'Diagram live with teammates in Mermaid Chart',
-      url: 'https://www.mermaidchart.com/landing?utm_source=mermaid_live&utm_medium=banner_ad&utm_campaign=team_collaboration'
+      url: '/landing?utm_source=mermaid_live&utm_medium=banner_ad&utm_campaign=team_collaboration'
     },
     {
       label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams',
-      url: 'https://www.mermaidchart.com/landing?utm_source=mermaid_live&utm_medium=banner_ad&utm_campaign=visual_editor'
+      url: '/landing?utm_source=mermaid_live&utm_medium=banner_ad&utm_campaign=visual_editor'
     },
     {
       label: 'Explore the Mermaid Whiteboard from the creators of Mermaid',
-      url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_live&utm_medium=banner_ad&utm_campaign=whiteboard'
+      url: '/whiteboard?utm_source=mermaid_live&utm_medium=banner_ad&utm_campaign=whiteboard'
     }
   ];
 
@@ -58,7 +59,7 @@
   <div class="grid grow">
     {#key currentTagline}
       <a
-        href={currentTagline.url}
+        href={MCBaseURL + currentTagline.url}
         target="_blank"
         class="col-start-1 row-start-1 flex items-center justify-center gap-4 no-underline"
         in:fade={{ delay: 800 }}

src/lib/util/state.ts

@@ -135,9 +135,21 @@ export const urlsStore = derived([stateStore], ([{ code, serialized }]) => {
   return {
     kroki: `${krokiRendererUrl}/mermaid/svg/${pakoSerde.serialize(code)}`,
     mdCode: `[![](${png})](${window.location.protocol}//${window.location.host}${window.location.pathname}#${serialized})`,
-    mermaidChart: {
-      save: `${MCBaseURL}/app/plugin/save?state=${serialized}`,
-      playground: `${MCBaseURL}/play#${serialized}`
+    mermaidChart: ({
+      medium
+    }: {
+      medium: 'ai_repair' | 'main_menu' | 'save_diagram' | 'share' | 'toggle';
+    }) => {
+      const parameters = new URLSearchParams();
+      parameters.set('utm_source', 'mermaid_live');
+      parameters.set('utm_medium', medium);
+      const paramString = parameters.toString();
+      return {
+        save: `${MCBaseURL}/app/plugin/save?state=${serialized}&${paramString}`,
+        playground: `${MCBaseURL}/play?${paramString}#${serialized}`,
+        plugins: `${MCBaseURL}/plugins?${paramString}`,
+        home: `${MCBaseURL}/?${paramString}`
+      };
     },
     new: `${window.location.protocol}//${window.location.host}${window.location.pathname}/#${serializeState(defaultState)}`,
     png,

src/routes/edit/+page.svelte

@@ -59,7 +59,11 @@
     </Toggle>
     <Share />
     <McWrapper>
-      <Button variant="accent" size="sm" href={$urlsStore.mermaidChart.save} target="_blank">
+      <Button
+        variant="accent"
+        size="sm"
+        href={$urlsStore.mermaidChart({ medium: 'save_diagram' }).save}
+        target="_blank">
         <MermaidChartIcon />
         Save diagram
       </Button>