From b9b2f6ba85cec1f768c559eda3ebbde10c73c01f Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 17 Jan 2024 21:49:10 +0530
Subject: [PATCH] Add UTM tags

---
 src/lib/util/promos/Jan2024.svelte | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/lib/util/promos/Jan2024.svelte b/src/lib/util/promos/Jan2024.svelte
index 462d4c85..6ea7c8fa 100644
--- a/src/lib/util/promos/Jan2024.svelte
+++ b/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>