Add UTM tags

src/lib/util/promos/Jan2024.svelte

@@ -1,15 +1,25 @@
 <script lang="ts">
-  const taglines = [
-    'Try diagramming with ChatGPT at Mermaid Chart',
-    "Try Mermaid's Visual Editor at Mermaid Chart",
-    'Enjoy live collaboration with teammates at Mermaid Chart'
-  ];
+  const taglines = {
+    announcement_bar_ai_diagramming: 'Try diagramming with ChatGPT at Mermaid Chart',
+    announcement_bar_visual_editor: "Try Mermaid's Visual Editor at Mermaid Chart",
+    announcement_bar_live_collaboration: 'Enjoy live collaboration with teammates at Mermaid Chart'
+  };
+  const taglineKeys = Object.keys(taglines);
+  const taglineKey = taglineKeys[Math.floor(Math.random() * taglineKeys.length)];
+  const tagline = taglines[taglineKey];
+  const url =
+    'https://www.mermaidchart.com/?' +
+    new URLSearchParams({
+      utm_source: 'mermaid_live_editor',
+      utm_medium: taglineKey,
+      utm_campaign: 'promo_2024'
+    }).toString();
 </script>
 
 <a
-  href="https://www.mermaidchart.com/"
+  href={url}
   target="_blank"
-  class="tracking-wide flex-grow justify-center align-middle flex gap-6">
-  {taglines[Math.floor(Math.random() * taglines.length)]}
-  <button class="font-light text-sm p-1 rounded bg-gray-800 px-4">Try it now</button>
+  class="flex flex-grow justify-center gap-6 align-middle tracking-wide">
+  {tagline}
+  <button class="rounded bg-gray-800 p-1 px-4 text-sm font-light">Try it now</button>
 </a>