track topic and toast events

components/subscribe-form.tsx

@@ -60,33 +60,50 @@ export default function SubscribeForm({
   const isFormValid =
     email.includes("@") && email.includes(".") && topics.length > 0;
   const isLoading = fetchStatus === FetchStatus.Loading;
-  const scrollDown = () => {
+  const toastTitle = "👍 Almost there!";
+  const scrollDownText = "Scroll Down";
+  const scrollDownOnClick = () => {
     const formCardEl = formCardRef.current;
 
     if (formCardEl) {
       formCardEl.scrollIntoView({ behavior: "smooth" });
     }
+
+    trackEvent({
+      toastTitle,
+      event: GoogleAnalyticsEvent.TOAST_CLICK,
+      buttonText: scrollDownText,
+    });
   };
-  const switchOnClick = (topic: SubscriptionTopic) => {
-    const newTopics = topics.includes(topic)
-      ? topics.filter((t) => t !== topic)
-      : [...topics, topic];
+  const switchOnClick = (topicId: SubscriptionTopic, topicTitle: string) => {
+    const newTopics = topics.includes(topicId)
+      ? topics.filter((t) => t !== topicId)
+      : [...topics, topicId];
 
     if (newTopics.length !== 0 && !hasToastedRef.current) {
       hasToastedRef.current = true;
 
       const { dismiss } = toast({
-        title: "👍 Almost there!",
+        title: toastTitle,
         description: "If you're done, scroll down to the last step.",
         action: (
-          <ToastAction altText="Scroll to Last Step" onClick={scrollDown}>
-            Scroll Down
+          <ToastAction
+            altText="Scroll to Last Step"
+            onClick={scrollDownOnClick}
+          >
+            {scrollDownText}
           </ToastAction>
         ),
         duration: 60000,
       });
 
       dismissToastRef.current = dismiss;
+
+      trackEvent({
+        toastTitle,
+        event: GoogleAnalyticsEvent.TOAST_OPEN,
+        buttonText: topicTitle,
+      });
     }
 
     setTopics(newTopics);
@@ -138,7 +155,7 @@ export default function SubscribeForm({
                     topicRoute={topicRoute}
                     disabled={isLoading}
                     checked={topics.includes(id)}
-                    onClick={() => switchOnClick(id)}
+                    onClick={() => switchOnClick(id, title)}
                   />
                 ),
               )}

components/telegram-channels.tsx

@@ -18,7 +18,8 @@ import { Anchor } from "@/components/ui/anchor";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { getTelegramChannelUrl } from "@/lib/telegram";
-import { Routes } from "@/lib/enums";
+import { trackEvent } from "@/lib/google-analytics";
+import { GoogleAnalyticsEvent, Routes } from "@/lib/enums";
 import type { TelegramPublicChannels } from "@/lib/types";
 
 type Props = {
@@ -27,6 +28,24 @@ type Props = {
 };
 
 export default function TelegramChannels({ channels, withBackButton }: Props) {
+  const viewDetailsText = "View Details";
+  const topicOnClick = (title: string, linkUrl: string, linkText?: string) => {
+    trackEvent({
+      linkText,
+      linkUrl,
+      event: GoogleAnalyticsEvent.TOPIC_CLICK,
+      topicTitle: title,
+    });
+  };
+  const topicPageOnClick = (title: string, linkUrl: string) => {
+    trackEvent({
+      linkUrl,
+      event: GoogleAnalyticsEvent.TOPIC_PAGE_CLICK,
+      topicTitle: title,
+      linkText: viewDetailsText,
+    });
+  };
+
   return (
     <Card className="w-full">
       <CardHeader>
@@ -50,6 +69,7 @@ export default function TelegramChannels({ channels, withBackButton }: Props) {
                     <Anchor
                       href={channelUrl}
                       className="text-base no-underline"
+                      onClick={() => topicOnClick(title, channelUrl, title)}
                       isExternal
                     >
                       {title}
@@ -61,6 +81,7 @@ export default function TelegramChannels({ channels, withBackButton }: Props) {
                   <Anchor
                     href={channelUrl}
                     className="shrink-0 px-2 no-underline"
+                    onClick={() => topicOnClick(title, channelUrl)}
                     isExternal
                   >
                     <ExternalLinkIcon />
@@ -70,10 +91,11 @@ export default function TelegramChannels({ channels, withBackButton }: Props) {
                   <Button
                     variant="link"
                     className="mt-2 h-auto p-0 font-normal"
+                    onClick={() => topicPageOnClick(title, topicRoute)}
                     asChild
                   >
                     <Link href={topicRoute}>
-                      View Details
+                      {viewDetailsText}
                       <ChevronRightIcon className="ml-1 h-4 w-4" />
                     </Link>
                   </Button>

components/ui/toaster.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useToast } from "@/lib/hooks/use-toast";
+import { trackEvent } from "@/lib/google-analytics";
 import {
   Toast,
   ToastClose,
@@ -9,9 +10,18 @@ import {
   ToastTitle,
   ToastViewport,
 } from "@/components/ui/toast";
+import { GoogleAnalyticsEvent } from "@/lib/enums";
 
 export function Toaster() {
   const { toasts } = useToast();
+  const closeBtnText = "Close Toast";
+  const closeBtnOnClick = (title: string) => {
+    trackEvent({
+      event: GoogleAnalyticsEvent.TOAST_CLOSE,
+      toastTitle: title,
+      buttonText: closeBtnText,
+    });
+  };
 
   return (
     <ToastProvider>
@@ -25,7 +35,10 @@ export function Toaster() {
               )}
             </div>
             {action}
-            <ToastClose />
+            <ToastClose
+              title={closeBtnText}
+              onClick={() => closeBtnOnClick(title || "")}
+            />
           </Toast>
         );
       })}

lib/enums.ts

@@ -75,6 +75,11 @@ export enum SubscriptionTopic {
 export enum GoogleAnalyticsEvent {
   SUBSCRIBE_FORM_SUBMIT = "subscribe_form_submit",
   UNSUBSCRIBE_FORM_SUBMIT = "unsubscribe_form_submit",
+  TOPIC_CLICK = "topic_click",
+  TOPIC_PAGE_CLICK = "topic_page_click",
+  TOAST_OPEN = "toast_open",
+  TOAST_CLOSE = "toast_close",
+  TOAST_CLICK = "toast_click",
 }
 
 export enum FlightAirline {

lib/google-analytics.ts

@@ -1,6 +1,14 @@
 import { SITE_NAME } from "./constants";
 import { checkIsLocalhost } from "./location";
-import { EventSubscribeFormSubmit, EventUnsubscribeFormSubmit } from "./types";
+import {
+  EventSubscribeFormSubmit,
+  EventToastClick,
+  EventToastClose,
+  EventToastOpen,
+  EventTopicClick,
+  EventTopicPageClick,
+  EventUnsubscribeFormSubmit,
+} from "./types";
 
 declare global {
   interface Window {
@@ -9,7 +17,14 @@ declare global {
 }
 
 export function trackEvent(
-  data: EventSubscribeFormSubmit | EventUnsubscribeFormSubmit
+  data:
+    | EventSubscribeFormSubmit
+    | EventUnsubscribeFormSubmit
+    | EventTopicClick
+    | EventTopicPageClick
+    | EventToastOpen
+    | EventToastClose
+    | EventToastClick,
 ) {
   if (checkIsLocalhost()) {
     return;

lib/types.ts

@@ -45,6 +45,38 @@ export type EventUnsubscribeFormSubmit = {
   buttonText: string;
 };
 
+export type EventTopicClick = {
+  event: GoogleAnalyticsEvent.TOPIC_CLICK;
+  topicTitle: string;
+  linkText?: string;
+  linkUrl: string;
+};
+
+export type EventTopicPageClick = {
+  event: GoogleAnalyticsEvent.TOPIC_PAGE_CLICK;
+  topicTitle: string;
+  linkText: string;
+  linkUrl: string;
+};
+
+export type EventToastOpen = {
+  event: GoogleAnalyticsEvent.TOAST_OPEN;
+  toastTitle: string;
+  buttonText: string;
+};
+
+export type EventToastClose = {
+  event: GoogleAnalyticsEvent.TOAST_CLOSE;
+  toastTitle: string;
+  buttonText: string;
+};
+
+export type EventToastClick = {
+  event: GoogleAnalyticsEvent.TOAST_CLICK;
+  toastTitle: string;
+  buttonText: string;
+};
+
 export type DepositRate = {
   tenure: number;
   rate: number;