Add a few more analytical events

Author: Rikthepixel

src/api/analytics.ts

@@ -0,0 +1,34 @@
+import { event as gtEvent } from "nextjs-google-analytics";
+
+const sendEvent: typeof gtEvent = (...args) => {
+  try {
+    gtEvent(...args);
+  } catch (error) {
+    console.warn(error);
+  }
+};
+
+export const sendContributeEvent = () => sendEvent("cta_contribute", {
+  label: "Contribute CTA",
+  category: "CTA"
+});
+
+export const sendLearnMoreEvent = () => sendEvent("cta_learn_more", {
+  label: "Learn More CTA",
+  category: "CTA"
+});
+
+export const sendFeedbackEvent = () => sendEvent("feedback_submission", {
+  label: "Feedback submission",
+  category: "Contact"
+});
+
+export const sendSubscribeEvent = () => sendEvent("mail_subscribe", {
+  label: "Subscribe",
+  category: "Mailing List"
+});
+
+export const sendUnsubscribeEvent = () => sendEvent("mail_unsubscribe", {
+  label: "Unsubscribe",
+  category: "Mailing List"
+});

src/components/pages/contribute/FeedbackSection.tsx

@@ -13,6 +13,8 @@ import Form from "@/components/controls/Form";
 import Heading from "@/components/layout/Heading";
 import Label from "@/components/controls/Label";
 import useFormMutation from "@/hooks/useMutation";
+import { event } from "nextjs-google-analytics";
+import { sendFeedbackEvent } from "@/api/analytics";
 
 const feedbackSchema = z.object({
   text: z.string().min(1, "Your feedback message must at least contain 1 character")
@@ -31,9 +33,13 @@ const FeedbackSection = () => {
   const [submit, response, loading] = useFormMutation<BackendResponse, FeedbackSchema>(handleSubmit, (setResponse, { text }) => {
     backend.url("/feedback")
       .post({ text })
-      .json((res: BackendResponse) => setResponse(res));
+      .json((res: BackendResponse) => {
+        if (res.success) sendFeedbackEvent();
+        setResponse(res);
+      });
+
   });
-  
+
   return (
     <section
       aria-labelledby="feedback"

src/components/pages/front/SignupSection.tsx

@@ -14,6 +14,7 @@ import Heading from "@/components/layout/Heading";
 
 import { backend } from "@/utils/wretch";
 import useFormMutation from "@/hooks/useMutation";
+import { sendSubscribeEvent } from "@/api/analytics";
 
 const signupSchema = z.object({
   email: z.string().email().min(5, "Your email must at least contain 5 characters")
@@ -31,7 +32,10 @@ const SignupSection = () => {
   const [submit, response, loading] = useFormMutation<BackendResponse, SignupSchema>(handleSubmit, (setResponse, { email }) => {
     backend.url("/email/subscribe")
       .post({ email })
-      .json((res: BackendResponse) => setResponse(res));
+      .json((res: BackendResponse) => {
+        if (res.success) sendSubscribeEvent();
+        setResponse(res);
+      });
   });
 
   return (

src/pages/index.tsx

@@ -16,6 +16,8 @@ import RoadmapItem from "@/components/pages/front/RoadmapItem";
 import Heading from "@/components/layout/Heading";
 import { makeSitemapMeta } from "@/utils/meta/sitemap";
 
+import { sendContributeEvent, sendLearnMoreEvent } from "@/api/analytics";
+
 const logoAnim = {
   initial: {
     translateX: "-2.5%",
@@ -49,7 +51,13 @@ const FrontPage: Page = ({ }) => {
             <p className="text-lg lg:text-xl lg:max-w-xl">
               Experience Git in a modern and fast way with Commit Rocket, the open-source, lightweight and cross-platform Git client.
             </p>
-            <LinkButton href="#introduction" color="secondary" className="px-5 py-3 text-xl" scroll={false}>
+            <LinkButton
+              className="px-5 py-3 text-xl"
+              onClick={sendLearnMoreEvent}
+              href="#introduction"
+              color="secondary"
+              scroll={false}
+            >
               Learn More!
             </LinkButton>
           </div>
@@ -96,7 +104,7 @@ const FrontPage: Page = ({ }) => {
               This means that everyone will have access to our code and anyone can contribute to make it the best it can be.
               Join us in bringing new life to Git!
             </p>
-            <LinkButton href="/contribute" color="white">
+            <LinkButton href="/contribute" color="white" onClick={sendContributeEvent}>
               Contribute
             </LinkButton>
           </div>

src/pages/mail/unsubscribe.tsx

@@ -1,19 +1,23 @@
-import { useMemo, useRef, useState } from "react";
 import Head from "next/head";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import ArrowPathIcon from "@heroicons/react/24/solid/ArrowPathIcon";
 
-import Button from "@/components/controls/Button";
 import { Page } from "@/types/page";
 import { backend } from "@/utils/wretch";
+import { makeOgMeta } from "@/utils/meta/opengraph";
+import { makeSitemapMeta } from "@/utils/meta/sitemap";
+import useFormMutation from "@/hooks/useMutation";
+
 import { BackendResponse } from "@/api/models/Response";
+import { sendUnsubscribeEvent } from "@/api/analytics";
+
 import Input from "@/components/controls/Input";
 import Form from "@/components/controls/Form";
 import Heading from "@/components/layout/Heading";
-import { makeOgMeta } from "@/utils/meta/opengraph";
-import { makeSitemapMeta } from "@/utils/meta/sitemap";
+import Button from "@/components/controls/Button";
+
 
 const unsubscribeSchema = z.object({
   email: z.string().email().min(3)
@@ -28,20 +32,14 @@ const UnsubscribePage: Page = ({ pathname }) => {
     mode: "onChange"
   });
 
-  const [response, setResponse] = useState<null | BackendResponse>(null);
-  const [loading, setLoading] = useState(false);
-
-  const loadingRef = useRef(loading);
-  loadingRef.current = loading;
-
-  const submit = useMemo(() => handleSubmit(({ email }) => {
-    if (loadingRef.current) return;
-    setLoading(true);
-
+  const [submit, response, loading] = useFormMutation<BackendResponse, UnsubscribeSchema>(handleSubmit, (setResponse, { email }) => {
     backend.url("/email/unsubscribe")
       .post({ email })
-      .json((res: BackendResponse) => setResponse(res));
-  }), [handleSubmit]);
+      .json((res: BackendResponse) => {
+        if (res.success) sendUnsubscribeEvent()
+        setResponse(res)
+      });
+  });
 
   return (
     <>