Google Analytics를 이용하면 사용자들의 방문 기록이나, 트래픽 등 다양한 정보들을 얻을수 있다.
제공 받은 데이터들을 바탕으로 사용자들의 행동 패턴을 파악하여 웹페이지를 더 발전시켜볼수 있다.
이번 개인 블로그를 만들어보면서, 사용자는 많지 않겠지만 한번 조금이라도 내가 만든 페이지에 몇명이 접속하는지 살펴보고 싶었다.
Google Analytics 사이트에 먼저 접속 한 후에 왼쪽 하단에 톱니바퀴 아이콘을 클릭한다.
그려면 이제 만들기 창이 뜨는데, 여기서 계정을 만들어주면 된다.
계정을 만드는 과정이 어렵진 않으므로 여기선 생략한다!
본인의 사이트에 맞게 옵션을 선택해주고 내용을 적어주면 된다.
이런식으로 계정이 생성 완료되면 속성 ID 값이 하나 생기는데, 이 값을 환경변수로 관리해주어야한다.
NEXT_PUBLIC_GA_ID=속성ID값또 script 삽입을 위해 GoogleAnalytics라는 컴포넌트를 하나 만들어주었다.
import Script from 'next/script';
/* eslint-disable react/self-closing-comp */
export default function GoogleAnalytics({ gaId }: { gaId: string }) {
return (
<>
<Script
async
src={`https://www.googletagmanager.com/gtag/js?
id=${gaId}`}
></Script>
<Script
id="google-analytics"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${gaId}');
`,
}}
></Script>
</>
);
}이제 레이아웃 컴포넌트에서 해당 GA컴포넌트를 넣어주기만 하면 된다!
const gaId = process.env.NEXT_PUBLIC_GA_ID;
return (
<html lang="en">
<body>
// ..다른 컴포넌트들
{gaId ? <GoogleAnalytics gaId={gaId} /> : null}
</body>
</html>
);
해당 배포한 사이트의 쿠키목록에 가보면 ga 관련한 쿠키들이 생긴것을 확인해볼수있다.
그 후 관리자 페이지로 넘어가면 이러한 통계들을 볼 수 있다.
https://brgndy.me/ 로 옮기는 중입니다 :)