feat: GA4 전환 이벤트 추적 + 전 페이지 스크롤 리빌 애니메이션

- lib/gtag.ts: GA4 이벤트 유틸리티 (trackCTAClick, trackToolDemo, trackDownload, trackOutboundClick)
- ContactModal/ContactForm: 공용 trackEvent로 리팩토링 + generate_lead 이벤트
- 홈/tools/automation/prompt/website: CTA 클릭 이벤트 추적 추가
- 홈/freelance/ai-kit: IntersectionObserver 스크롤 리빌 애니메이션 신규 추가
- automation/prompt: GA4 trackCTAClick 적용

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-03 07:34:17 +09:00
parent c7bf0253e3
commit 5d2fd4be1f
10 changed files with 230 additions and 60 deletions

View File

@@ -2,6 +2,7 @@
import { useEffect, useRef } from 'react';
import Link from 'next/link';
import { trackToolDemo, trackCTAClick } from '../../lib/gtag';
/* ═══════════════════════════════════════════════════
도구 쇼케이스 — 리디자인 v2
@@ -205,6 +206,7 @@ export default function ToolsShowcasePage() {
<Link
key={tool.id}
href={tool.href}
onClick={() => trackToolDemo(tool.title)}
className={`group block tool-card bg-white rounded-2xl border border-slate-200 overflow-hidden active:scale-[0.99] reveal reveal-delay-${idx + 1}`}
>
<div className={`flex flex-col ${isEven ? 'md:flex-row-reverse' : 'md:flex-row'}`}>
@@ -341,6 +343,7 @@ export default function ToolsShowcasePage() {
</div>
<Link
href="/freelance#contact-form"
onClick={() => trackCTAClick('무료 상담 신청하기', '/tools')}
className="group inline-flex items-center gap-3 px-7 py-4 rounded-xl bg-blue-600 hover:bg-blue-500 active:scale-[0.98] text-white text-sm font-bold transition-all duration-300 shadow-lg shadow-blue-600/20 hover:shadow-blue-500/30 flex-shrink-0"
>