feat: Amplitude 설치

package.json

@@ -24,6 +24,7 @@
     "api:logs": "docker-compose -f ../study-platform-mvp/docker-compose.yml logs -f mvp-app"
   },
   "dependencies": {
+    "@amplitude/unified": "^1.0.0-beta.9",
     "@hookform/resolvers": "^5.2.1",
     "@microsoft/clarity": "^1.0.0",
     "@next/third-parties": "^15.3.3",

src/app/(landing)/layout.tsx

@@ -1,5 +1,6 @@
 import '../global.css';
 
+import * as amplitude from '@amplitude/unified';
 import Clarity from '@microsoft/clarity';
 import { GoogleTagManager } from '@next/third-parties/google';
 import { clsx } from 'clsx';
@@ -25,14 +26,41 @@ const pretendard = localFont({
 
 const GTM_ID = process.env.NEXT_PUBLIC_GTM_ID;
 const CLARITY_PROJECT_ID = process.env.NEXT_PUBLIC_CLARITY_PROJECT_ID;
+const AMPLITUDE_API_KEY = process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY;
 
 export default function LandingPageLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  if (typeof window !== 'undefined' && CLARITY_PROJECT_ID) {
+  if (
+    typeof window !== 'undefined' &&
+    CLARITY_PROJECT_ID &&
+    AMPLITUDE_API_KEY
+  ) {
     Clarity.init(CLARITY_PROJECT_ID);
+    // Initialize Amplitude and explicitly catch errors to avoid unhandled promise rejections.
+    amplitude
+      .initAll(AMPLITUDE_API_KEY, {
+        analytics: {
+          autocapture: {
+            attribution: true,
+            fileDownloads: true,
+            formInteractions: true,
+            pageViews: true,
+            sessions: true,
+            elementInteractions: true,
+            networkTracking: true,
+            webVitals: true,
+            frustrationInteractions: true,
+          },
+        },
+        sessionReplay: { sampleRate: 1 },
+      })
+      .catch((err) => {
+        // optional: surface the error during development
+        // console.error('Amplitude init failed', err);
+      });
   }
 
   return (

src/components/analytics/page-view-tracker.tsx

@@ -7,6 +7,7 @@ import {
   getAttributionParams,
   trackAttribution,
 } from '@/utils/attribution-tracker';
+import * as amplitude from '@amplitude/unified';
 
 export default function PageViewTracker(): null {
   const pathname = usePathname();
@@ -20,6 +21,13 @@ export default function PageViewTracker(): null {
     // Attribution 파라미터 가져오기
     const attributionParams = getAttributionParams();
 
+    amplitude.track('page_view', {
+      page_title: document.title || pathname,
+      page_location: window.location.href,
+      page_path: pathname,
+      ...attributionParams,
+    });
+
     sendGTMEvent({
       event: 'page_view',
       page_title: document.title || pathname,