안녕하세요?
오늘은 NextJS에 구글 애널리틱스(Google Analytics)를 적용하는 방법을 알아 보겠습니다.
NextJS는 일반적인 ReactJS 앱이 아닌 서버사이드 렌더링을 위한 리액트 프레임웤이라 public 폴더에 index.html 파일이 없습니다.
그래서 구글 애널리틱스에서 제공하는 자바스크립트 코드를 그냥 복사할 수 없는데요.
조금은 귀찮은 작업을 해야 NextJS앱에 구글 애널리틱스를 적용할 수 있습니다.
그럼 먼저 본인의 구글 애널리틱스 측정 ID가 있어야겠죠.
다음 사진에서처럼 본인의 구글 애널리틱스 화면에서 맨 왼쪽 아래에 있는 관리 버튼을 클릭하시면 다음과 같이 나옵니다.
본인 사이트에 맞는 속성을 새로 만들어야 할 경우 속성 만들기 버튼을 눌럿 진행하시면 됩니다.
만약 만들어 놓으신게 있으면 위 사진처럼 데이터 스트림을 누르면 아래 리스트가 나옵니다.
그러면 본인 데이터 스트림을 누르면 아래와 같이 나옵니다.
여기서 위쪽에 측정 ID가 본인의 구글 애널리틱스 ID입니다.
그리고 아래쪽에 코드는 우리가 HTML 파일에 복사해야할 코드인거죠.
이제 준비는 다 끝났으니 본격적으로 NextJS 앱을 수정해 보겠습니다.
lib/gtag.js
구글 애널리틱스 자바스크립트 코드를 위한 파일을 만듭시다. 파일이름은 lib 폴더에 gtag.js 로 하시면 됩니다.
// lib/gtag.js
export const GA_TRACKING_ID = "xxxxxxxx";
// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const pageview = (url) => {
window.gtag("config", GA_TRACKING_ID, {
page_path: url,
});
};
// https://developers.google.com/analytics/devguides/collection/gtagjs/events
export const event = ({ action, category, label, value }) => {
window.gtag("event", action, {
event_category: category,
event_label: label,
value: value,
});
};맨 위에 GA_TRACKING_ID 에는 본인의 추적 ID를 넣으시면 됩니다.
그 다음으로 할거는 _document.js 파일과 _app.js 파일을 손보는 겁니다.
먼저 _document.js 파일입니다.
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { GA_TRACKING_ID } from '../lib/gtag'
export default class MyDocument extends Document {
render() {
return (
<Html>
<Head>
{/* Global Site Tag (gtag.js) - Google Analytics */}
<script
async
src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
/>
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${GA_TRACKING_ID}', {
page_path: window.location.pathname,
});
`,
}}
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}우리가 아까 만들었던 lib/gtag.js 파일을 불러들이고
NextJS Head 태그안에 필요한 script 코드를 넣습니다.
다음으로는 _app.js 파일입니다.
import { useEffect } from 'react'
import { useRouter } from 'next/router'
import * as gtag from '../lib/gtag'
const App = ({ Component, pageProps }) => {
const router = useRouter()
useEffect(() => {
const handleRouteChange = (url) => {
gtag.pageview(url)
}
router.events.on('routeChangeComplete', handleRouteChange)
return () => {
router.events.off('routeChangeComplete', handleRouteChange)
}
}, [router.events])
return <Component {...pageProps} />
}
export default App_app.js 파일입니다.
useEffect 훅을 이용해서 이벤트를 등록시켰는데요.
router.events 중에 'routeChangeComplete' 이벤트일 때 강제적으로 gtag의 pageview 함수를 실행시키는 코드입니다
이 코드가 왜 필요하냐면 NextJS에 처음 들어와서 페이지를 읽으면 _document.js 파일에서 해당 구글 애널리틱스 코드가 작동됩니다
그러나 NextJS 앱의 특성상 넥스트 앱에서의 페이지 이동은 구글애널리틱스가 파악 못합니다.
그래서 next/router를 이용해서 넥스트앱에서 라우팅이 발생됐을 때 강제적으로 gtag의 pageview 함수로 구글 애널리틱스에게 다른 페이지도 봤다고 알리는 겁니다.
이제 완성 됐습니다.
npm run dev로 서버를 실행시켜 놓고 페이지를 둘러보시고
구글 애널리틱스 보고서 중 실시간을 누르면 아래 그림처럼 지난 30분 동안의 사용자가 나옵니다.
이제 완성되었습니다.
지금까지 NextJs 앱과 구글 애널리틱스를 같이 적용하는 방법에 대해 알아 보았습니다.
그럼.
'코딩 > React' 카테고리의 다른 글
| NextJS와 MongoDB로 유저 로그인 세션 구현하기 2편 (12) | 2021.08.22 |
|---|---|
| NextJS에서 환경변수 .env 사용하는 방법 (2) | 2021.08.22 |
| NextJS와 MongoDB로 유저 로그인 세션 구현하기 1편 (2) | 2021.08.22 |
| Github Token 깃헙 토큰 설정하기 (0) | 2021.08.20 |
| 최신버전으로 React + Typescript + Electron 개발하기 (0) | 2021.02.14 |