Merge pull request #63 from Nexters/feat/gtm

feat: add events for button clicks

src/app/(input)/layout.tsx

@@ -5,20 +5,29 @@ import Link from "next/link";
 import React from "react";
 import Logo from "@/components/common/logo/logo";
 import { useStocksStore } from "@/state/stores/stocks-store";
+import { sendGAEvent } from "@next/third-parties/google";
 
 export const viewport: Viewport = {
   themeColor: "var(--color-white)",
 };
 
 const InputLayout = ({ children }: { children: React.ReactNode }) => {
   const { removeAllStocks } = useStocksStore();
+
+  const onResetClick = React.useCallback(() => {
+    removeAllStocks();
+    sendGAEvent({
+      event: "Reset Button Click",
+    });
+  }, [removeAllStocks]);
+
   return (
     <div className="flex size-full flex-col">
       <div className="sticky top-0 z-10 flex h-11 w-full shrink-0 items-center justify-between bg-white px-5">
         <Link href="/">
           <Logo />
         </Link>
-        <div onClick={removeAllStocks} className="cursor-pointer text-body3 text-grey-900">
+        <div onClick={onResetClick} className="cursor-pointer text-body3 text-grey-900">
           Reset
         </div>
       </div>

src/app/(input)/ticker/_components/intro.tsx

@@ -1,6 +1,7 @@
 import { Button } from "@/components/ui/button";
 import { useDrawerStore } from "@/state/stores/drawer-store";
 import { useStocksStore } from "@/state/stores/stocks-store";
+import { sendGAEvent } from "@next/third-parties/google";
 import { Plus } from "lucide-react";
 import React from "react";
 
@@ -9,18 +10,20 @@ const Intro = () => {
   const { stocks } = useStocksStore();
   const hasStock = stocks.length > 0;
 
+  const onAddStockClick = React.useCallback(() => {
+    isDrawerOpenChange(true);
+    sendGAEvent({
+      event: "Add Stock Button Click",
+    });
+  }, [isDrawerOpenChange]);
+
   return (
     <>
       <h2 className="px-4 pt-4 text-h2">
         You added <span className="text-main-700">{stocks.length}</span> {`${stocks.length > 1 ? "stocks" : "stock"}`}.
       </h2>
       <div className="sticky top-4 flex flex-col justify-start bg-white px-4 pb-4 pt-10 text-lg">
-        <Button
-          onClick={() => {
-            isDrawerOpenChange(true);
-          }}
-          className="flex w-full items-center justify-start gap-4 pl-0"
-        >
+        <Button onClick={onAddStockClick} className="flex w-full items-center justify-start gap-4 pl-0">
           <div className="flex h-10 w-10 items-center justify-center rounded-full bg-grey-100 text-grey-500">
             <Plus />
           </div>

src/app/(input)/ticker/_components/ticker-footer.tsx

@@ -1,16 +1,20 @@
 "use client";
 import { Button } from "@/components/ui/button";
 import { useStocksStore } from "@/state/stores/stocks-store";
+import { sendGAEvent } from "@next/third-parties/google";
 import { useRouter } from "next/navigation";
 import React from "react";
 
 export default function TickerFooter() {
   const { stocks } = useStocksStore();
   const router = useRouter();
 
-  const handleTickerSubmit = () => {
+  const handleTickerSubmit = React.useCallback(() => {
+    sendGAEvent({
+      event: "Analyzie My Portfolio Button Click",
+    });
     router.push(`/report`);
-  };
+  }, [router]);
 
   if (stocks.length === 0) return null;
 

src/app/(landing)/_components/floating-footer.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { Button } from "@/components/common/button/button";
-import { event } from "@/utils/gtag";
 import { sendGAEvent } from "@next/third-parties/google";
 import { useRouter } from "next/navigation";
 import React from "react";
@@ -11,15 +10,8 @@ const FloatingFooter = React.memo(() => {
 
   const onButtonClick = React.useCallback(() => {
     router.push("/ticker");
-    event({
-      action: "buttonClicked",
-      category: "landing page",
-      label: "",
-      value: "",
-    });
     sendGAEvent({
-      event: "buttonClicked",
-      value: "Landing Page",
+      event: "Landing Page Button Click",
     });
   }, [router]);
 

src/app/global-provider.tsx

@@ -6,6 +6,7 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { hotjar } from "react-hotjar";
 import axios, { AxiosError, AxiosResponse } from "axios";
 import React from "react";
+import { useViewEvent } from "@/hooks/use-view-event";
 
 export const queryClient = new QueryClient({
   defaultOptions: {
@@ -32,6 +33,7 @@ const HJSV = 6;
 
 export const GlobalProvider = ({ children }: { children: React.ReactNode }) => {
   const [client] = React.useState(() => new QueryClient());
+  useViewEvent();
 
   React.useEffect(() => {
     if (process.env.NODE_ENV !== "development") {
@@ -45,7 +47,6 @@ export const GlobalProvider = ({ children }: { children: React.ReactNode }) => {
   return (
     <QueryClientProvider client={client}>
       {children}
-      {/* <GAProvider /> */}
       <GoogleAnalytics gaId="G-K20DRKXNTC" />
       <ReactQueryDevtools />
     </QueryClientProvider>

src/hooks/use-view-event.tsx

@@ -0,0 +1,13 @@
+import { sendGAEvent } from "@next/third-parties/google";
+import { usePathname } from "next/navigation";
+import React from "react";
+
+export const useViewEvent = () => {
+  const pathname = usePathname();
+
+  React.useEffect(() => {
+    sendGAEvent({
+      event: `${pathname} Viewed`,
+    });
+  }, [pathname]);
+};