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>