feat(web): init analytics events on nav/footer/ctas

beat-forge · Aug 13, 2023 · e7fa885 · e7fa885
1 parent 6ed92c9
commit e7fa885
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 16 deletions.
diff --git a/apps/web/src/lib/components/landing/GradientCTAButton.svelte b/apps/web/src/lib/components/landing/GradientCTAButton.svelte
@@ -7,7 +7,8 @@
 		class="outline-none focus:shadow-none focus-visible:ring-4 focus-visible:ring-[#00a8fc] flex flex-row items-center justify-center rounded-full gap-2 font-bold text-sm px-4 py-2 bg-primary-950 hover:bg-transparent text-primary-50 z-[4] m-[2px] transition duration-150"
 		target="_blank"
 		rel="noreferrer noopener"
+		data-umami-event="CTA - Gradient Button Discord"
 	>
 		<p class="p-2 bg-transparent text-sm font-bold">Join our Discord</p>
-        </a>
+	</a>
 </div>
diff --git a/apps/web/src/lib/components/layout/Footer.svelte b/apps/web/src/lib/components/layout/Footer.svelte
@@ -21,6 +21,7 @@
 					aria-label="github"
 					target="_blank"
 					rel="noopener"
+					data-umami-event="Generic - Footer GitHub Link"
 					><svg
 						class="w-4 h-4 fill-current"
 						role="img"
@@ -38,6 +39,7 @@
 					aria-label="github"
 					target="_blank"
 					rel="noopener"
+					data-umami-event="Generic - Footer Discord Link"
 					><svg
 						class="w-4 h-4 fill-current"
 						role="img"

diff --git a/apps/web/src/lib/components/layout/NavBar.svelte b/apps/web/src/lib/components/layout/NavBar.svelte
@@ -23,28 +23,46 @@
 		</div>
 
 		<div class="hidden md:flex md:gap-8">
-			<Link variant="text" href="/discover">Discover Mods</Link>
-			<Link variant="text" href="/client">Client</Link>
-			<Link variant="text" href="https://discord.gg/HTVrjFENaZ" external>Discord</Link>
+			<div data-umami-event="Generic - Navbar Discover Link">
+				<Link variant="text" href="/discover">Discover Mods</Link>
+			</div>
+			<div data-umami-event="Generic - Navbar Client Link">
+				<Link variant="text" href="/client">Client</Link>
+			</div>
+
+			<div data-umami-event="Generic - Navbar Discord Link">
+				<Link variant="text" href="https://discord.gg/HTVrjFENaZ" external>Discord</Link>
+			</div>
 		</div>
 
 		{#if $user}
-			<Link variant="secondary" href={`/profile/${$user.user?.id}`}>
-				<div class="hidden md:flex">
-					{$user?.user.username}
-				</div>
-				<img
-					alt="user icon"
-					src={$user?.user.avatar}
-					draggable="false"
-					class="flex flex-shrink-0 w-8 h-8 min-w-[32px] min-h-[32px] md:w-10 md:h-10 rounded-full"
-				/>
-			</Link>
+			<div
+				data-umami-event-profile-id={`${$user.user?.id}`}
+				data-umami-event="Generic - Profile Link"
+			>
+				<Link variant="secondary" href={`/profile/${$user.user?.id}`}>
+					<div class="hidden md:flex">
+						{$user?.user.username}
+					</div>
+					<img
+						alt="user icon"
+						src={$user?.user.avatar}
+						draggable="false"
+						class="flex flex-shrink-0 w-8 h-8 min-w-[32px] min-h-[32px] md:w-10 md:h-10 rounded-full"
+					/>
+				</Link>
+			</div>
 		{:else}
 			<!-- <Link variant="secondary" href={apiURL}>
 				Login
 			</Link> -->
-			<a href={import.meta.env.GITHUB_CALLBACK_URL} class="flex items-center gap-2"> Login </a>
+			<a
+				data-umami-event="Generic - Navbar Login Link"
+				href={import.meta.env.GITHUB_CALLBACK_URL}
+				class="flex items-center gap-2"
+			>
+				Login
+			</a>
 		{/if}
 	</div>
 </div>