FE-25 ✨ Google Analytics와 Facebook Pixel을 이용한 CTA 버튼 클릭률 추적 기능

.gitignore

@@ -101,4 +101,7 @@ out
 .yarn/install-state.gz
 .pnp.*
 
-.DS_Store
+.DS_Store
+
+# Local environment variables
+.env.local

package.json

@@ -30,9 +30,11 @@
     "clsx": "^2.1.1",
     "lucide-react": "^0.402.0",
     "next": "14.2.4",
+    "nextjs-google-analytics": "^2.3.3",
     "qs": "^6.12.2",
     "react": "^18",
     "react-dom": "^18",
+    "react-facebook-pixel": "^1.0.4",
     "react-hook-form": "^7.52.1",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",

src/pages/_app.tsx

@@ -1,14 +1,28 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import '@/styles/globals.css';
 import type { AppProps } from 'next/app';
 import { HydrationBoundary, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { GoogleAnalytics } from 'nextjs-google-analytics';
+import ReactPixel from 'react-facebook-pixel';
+
+const FB_PIXEL_ID = process.env.NEXT_PUBLIC_FB_PIXEL_ID;
 
 export default function App({ Component, pageProps }: AppProps) {
   const [queryClient] = React.useState(() => new QueryClient());
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && FB_PIXEL_ID) {
+      // Facebook Pixel 초기화 및 페이지 뷰 트래킹
+      ReactPixel.init(FB_PIXEL_ID);
+      ReactPixel.pageView();
+    }
+  }, []);
+
   return (
     <QueryClientProvider client={queryClient}>
       <HydrationBoundary state={pageProps.dehydratedState}>
+        <GoogleAnalytics trackPageViews />
         <Component {...pageProps} />
       </HydrationBoundary>
       <ReactQueryDevtools />

src/pages/index.tsx

@@ -2,8 +2,21 @@ import React from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
 import { Button } from '@/components/ui/button';
+import ReactPixel from 'react-facebook-pixel';
+import { event } from 'nextjs-google-analytics';
 
 export default function Home() {
+  const handleCTAClick = () => {
+    // Google Analytics 이벤트 트래킹
+    event('cta_click', {
+      category: 'Button',
+      label: 'Start Now',
+    });
+
+    // Facebook Pixel 이벤트 트래킹
+    ReactPixel.track('Lead', { action: 'cta_click' });
+  };
+
   return (
     <div className='w-full h-[5864px] relative bg-slate-100'>
       {/* Header */}
@@ -18,7 +31,7 @@ export default function Home() {
             <div className='text-center text-zinc-600 text-xl font-normal font-iropkeBatang leading-7'>다른 사람들과 감정을 공유해 보세요.</div>
           </div>
           <Link href='/auth/SignIn'>
-            <Button type='button' className='w-[286px] h-16 px-4 bg-zinc-700 rounded-xl justify-center items-center gap-2 inline-flex'>
+            <Button type='button' className='w-[286px] h-16 px-4 bg-zinc-700 rounded-xl justify-center items-center gap-2 inline-flex' onClick={handleCTAClick}>
               <div className='text-white text-xl font-semibold font-pretendard leading-loose'>시작하기</div>
             </Button>
           </Link>
@@ -87,7 +100,7 @@ export default function Home() {
             <Image src='/AboutPage/Logo/LogoXL.svg' alt='Epigram Logo' layout='fill' />
           </div>
           <Link href='/auth/SignIn'>
-            <Button type='button' className='w-[286px] h-16 px-4 bg-zinc-700 rounded-xl justify-center items-center gap-2 inline-flex'>
+            <Button type='button' className='w-[286px] h-16 px-4 bg-zinc-700 rounded-xl justify-center items-center gap-2 inline-flex' onClick={handleCTAClick}>
               <div className='text-white text-xl font-semibold font-pretendard leading-loose'>시작하기</div>
             </Button>
           </Link>