점심 메뉴 추천 서비스의 사이드 프로젝트를 기획 & 개발을 시작했습니다. 다양한 사용자들이 범용적으로 사용할 수 있는 주제여서, 검색에도 노출되게 하고 주변 지인들에게도 소개해서 사용을 유도하려고 계획했습니다. 그렇기에 실제 사용자들의 결과를 살펴보는 것이 유의미할 것으로 기대되어 구글 애널리틱스 연동을 고려하게 되었습니다.
먼저 프로젝트를 배포한 주소를 이용해서 구글 애널리틱스 사이트에 배포한 웹사이트를 등록해야 합니다.
설정 과정
1. Google Analytics 가입
https://analytics.google.com 사이트에서 가입할 수 있습니다.
제 경우는 계정 생성의 4번째 단계인 비즈니스 목표를 트래픽과 사용자 참여 및 유지를 선택했습니다.
- 트래픽: 사용자가 어떤 경로로 사이트에 유입되는지(예: 검색, 직접 방문, 외부 링크 등)를 파악할 수 있습니다. SEO를 통해 검색 유입을 늘리려는 목표가 있으므로 유입 경로와 관련된 데이터를 활용하는 것이 중요합니다.
- 사용자 참여 및 유지: 사용자가 사이트에서 어떤 방식으로 메뉴를 탐색하는지, 추천 메뉴에 대한 관심도(예: 클릭한 메뉴, 머문 시간 등)를 확인할 수 있습니다. 이러한 데이터는 사용자들이 어떤 메뉴에 관심을 가지는지 분석하고 개선하는 데 도움이 됩니다.
계정 생성을 마치면 G-로 시작하는 측정 ID를 받습니다
2. 프로젝트에 적용
Google 태그 설정 기초 안내는 다음과 같습니다.
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ABCDEABCDE"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-ZH51XEQZ0F');
</script>현재 프로젝트가 Next.js 이므로 next/script 에서 제공하는 Script 컴포넌트를 사용할 수 있습니다.
src/lib
import Script from 'next/script'
const GoogleAnalytics = ({ gaId }: { gaId: string }) => {
return (
<>
<Script async src='https://www.googletagmanager.com/gtag/js?id=G-ABCDEABCDE' />
<Script
id='google-analytics'
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${gaId}');`,
}}
/>
</>
)
}
export default GoogleAnalytics
- G-ABCDEABCDE는 예시입니다.
루트 레이아웃 layout.tsx 에 GoogleAnalytics 컴포넌트 적용합니다.
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
return (
<html lang='ko'>
<body className={`${pretendard.className} ${paperlogy.variable} antialiased`}>
{process.env.NEXT_PUBLIC_GA_ID
&& <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID} />}
<main>{children}</main>
</body>
</html>
)
}3. 확인하기
브라우저에 console.log(dataLayer)를 입력하면 아래와 같이 출력되면 적용된 것입니다.
(이미지 추가 예정)
그 다음 게시물은 구글 애널리틱스 API를 연결하고 사용하는 방법입니다.
참고한 게시물
Google Analytics를 프로젝트에 추가하고...
기록은 기억이 된다