Feat/ga4 for prd

index.html

@@ -29,15 +29,15 @@
     ></script>
     <script
       async
-      src="https://www.googletagmanager.com/gtag/js?id=G-H3ZTJT4LNW"
+      src="https://www.googletagmanager.com/gtag/js?id=G-E7XGKV9GNF"
     ></script>
     <script>
       window.dataLayer = window.dataLayer || [];
       function gtag() {
         dataLayer.push(arguments);
       }
       gtag('js', new Date());
-      gtag('config', 'G-H3ZTJT4LNW', {
+      gtag('config', 'G-E7XGKV9GNF', {
         debug_mode: true,
       });
     </script>

src/components/common/Layout/DefaultLayout.tsx

@@ -1,7 +1,10 @@
 import { Outlet } from 'react-router-dom';
 import Navigation from '@/components/common/Navigation/Navigation';
+import usePageViewTracking from '@/hooks/usePageViewTracking';
 
 export default function DefaultLayout() {
+  usePageViewTracking();
+
   return (
     <div className="relative w-full h-full mx-auto my-0 min-h-lvh max-w-[480px]">
       <div className="pb-[80px]">

src/components/common/Layout/SubLayout.tsx

@@ -1,6 +1,9 @@
 import { Outlet } from 'react-router-dom';
+import usePageViewTracking from '@/hooks/usePageViewTracking';
 
 export default function SubLayout() {
+  usePageViewTracking();
+
   return (
     <div className="w-full h-lvh min-h-lvh mx-auto my-0 desktop:w-[480px]">
       <Outlet />

src/components/poll-detail/Button/PollButton.tsx

@@ -1,4 +1,5 @@
 import { useQueryClient } from '@tanstack/react-query';
+import ReactGA from 'react-ga4';
 import usePost from '@/api/usePost';
 import { Button } from '@/components/common/Button/Button';
 import useToast from '@/components/common/Toast/hooks';
@@ -16,6 +17,10 @@ export default function PollButton({ postId, checkedItems }: PollButtonProps) {
 
   const { mutate: vote, isPending } = usePost({
     onSuccess: () => {
+      ReactGA.event('poll_voted', {
+        post_id: postId,
+      });
+
       queryClient.invalidateQueries({ queryKey: ['post', String(postId)] });
       queryClient.invalidateQueries({
         queryKey: ['postResult', String(postId)],
@@ -26,7 +31,6 @@ export default function PollButton({ postId, checkedItems }: PollButtonProps) {
         description: '투표가 성공적으로 완료되었어요.',
       });
 
-      // voteMode 종료
       setVoteMode(false);
     },
   });

src/hooks/usePageViewTracking.ts

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import ReactGA from 'react-ga4';
+import { useLocation } from 'react-router-dom';
+
+export default function usePageViewTracking() {
+  const location = useLocation();
+
+  useEffect(() => {
+    ReactGA.send({
+      hitType: 'pageview',
+      page: location.pathname + location.search,
+    });
+  }, [location]);
+}

src/pages/OnBoarding/OnBoardingPage.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import ReactGA from 'react-ga4';
 import { useNavigate } from 'react-router-dom';
 import useGetMyInfo from '@/api/useGetMyInfo';
 import onboardingImage from '@/assets/images/onboarding/onboarding.png';
@@ -22,6 +23,12 @@ export default function OnBoardingPage() {
     }, 2500);
   }, []);
 
+  useEffect(() => {
+    if (!showSplash) {
+      ReactGA.event('onboarding_viewed');
+    }
+  }, [showSplash]);
+
   if (showSplash) {
     return (
       <div className="flex w-full h-screen justify-center items-center">

src/pages/PollDetail/PollResultPage.tsx

@@ -1,3 +1,5 @@
+import { useEffect } from 'react';
+import ReactGA from 'react-ga4';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { useGetNotificationPresent } from '@/api/useGetNotificationPresent';
 import { useGetPost } from '@/api/useGetPost';
@@ -29,6 +31,14 @@ export default function PollResultPage() {
     },
   });
 
+  useEffect(() => {
+    if (post && result) {
+      ReactGA.event('poll_result_viewed', {
+        post_id: postId,
+      });
+    }
+  }, [post, result, postId]);
+
   if (isPostLoading || isResultLoading) return <Loading />;
   if (!post || !result) return <NotFoundPage />;