Next.js에 구글 애널리틱스 적용
최근 회사에서 업무와 더불어 토이 프로젝트를 진행하면서 SEO (검색 엔진 최적화)에 중점을 두고 개발하여야 할 일이 많아졌다.
React를 주로 공부하고 있었던만큼 자연스럽게 Next.js를 접하게 되었다. 물론 그전부터 관심을 가지고 강의를 보면서
어느 정도 공부하였지만 역시나.. 실무는 만만하지 않았다...
본론으로 들어가 회사에서도 구글 애널리틱스를 사용하였지만 공통업무를 담당하는 부서가 이미 스크립트 파일을 만들어놨고
그것을 활용했었다. 이번에 네이버, 카카오, 라인, 쿠팡, 배달의민족의 채용공고를 모아 보는 토이 프로젝트를 진행하면서
유지보수 관점과 더불어 사용자의 유입경로를 통해 조금 더 나은 운영을 해보고자. 구글 서치 콘솔과 더불어 구글 애널리틱스를 적용하였다.
혹 네카라쿠배 채용을 모아서 보고싶다면 이번에 만들어 본 토이프로젝트 네카라쿠배 사이트를 방문해주세요.
아마? 당연히? 라는 생각을 가지고 npm module을 검색해봤는데 역시나 react-ga라는 모듈이 존재하였다. 물론 Next.js를 위한 next-ga도 존재했다. 하지만 이왕 적용해보는 거 해당 모듈들을 안 쓰고 적용해보기로 결정하였다.
찾아본 결과 생각보다 간단하였고 공유하여 보려고한다.
구글 애널리틱스(Google Analytics) 적용
자신이 개발한 웹 서비스가 존재한다는 가정하에 진행하도록 한다.
우선 다음 링크를 통하여 https://analytics.google.com/analytics/web/ 구글 애널리틱스에 가입해보자.
애널리틱스 계정 생성은 구글이 쉽게 설명해두었으니 링크를 통하여 계정을 생성하고 자신의 앱을 연동하도록 한다.
https://support.google.com/analytics/answer/1009694?hl=ko
계정 추가 - 애널리틱스 고객센터
도움이 되었나요? 어떻게 하면 개선할 수 있을까요? 예아니요
support.google.com
계정을 생성하고 앱을 연동하였다면 아래 화면에의 왼쪽 메뉴 아래 톱니바퀴 모양의 관리 메뉴를 선택한다.
관리 메뉴를 누르면 아래와 같이 자신의 계정과 서비스의 속성을 관리할 수 있는 메뉴가 표출된다.
아래까지 진행했다면 속성 메뉴 중 데이터스트림 메뉴를 선택하고 자신의 서비스에 맞도록 스트림을 생성한다.
생성 후 스트림 정보를 선택하면 아래와 같이 표출되는데 자신의 애널리틱스 ID(빨간색 테두리)와 새로운 온페이지 태그 추가에 스크립트를 적용하면 된다.
이제 자신의 구글 애널리틱스 정보도 알았으니 Next.js에 적용시켜보자.
Next.js엔 기본적으로 제공하는 페이지 라우팅이 존재한다. 가장 먼저 실행되며 공통레아웃이나 컴포넌트를 위한 _app.js와 공통 헤더 및 HTML 로직 처리를 위한 _document.js가 있다.
따라서 유동적인 변화가 없는 구글 애널리틱스 스크립트 같은 경우 _document.js에 작성하고 라우팅 이동마다 구글 애널리틱스에서 알 수 있도록 _app.js에 처리해주도록 하겠다.
먼저 각 환경별 env 파일이 존재하는 경우 해당 env파일에 자신의 구글 애널리틱스 ID를 등록해주자. 만약
env 설정이 없다면 아래에 만드는 util 쪽에 상수로 선언하여 준다. 글쓴이에 경우에는 각 환경 별 env 파일 설정을 잡았기에
아래와 같이 env 파일을 설정하였다.
NEXT_PUBLIC_GA_ID=AnalyticsID
다음은 _document.js나 tsx에 아래와 같이 Head에 자신의 데이터스트림 영역을 복사하여 붙여준다.
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
class AppDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head>
<meta charSet="utf-8" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap"
rel="stylesheet"
/>
<script
async
src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_ID}`}
/>
<script
async
src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_ID}`}
/>
<script
id="google-analytics"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${process.env.NEXT_PUBLIC_GA_ID}', {
page_path: window.location.pathname,
});
`,
}}
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default AppDocument;
다음으로 js나 ts로 gtag 관련 util 메서드를 만들어 사용한다. 위치는 어디든 자신이 원하는 곳에 넣어두 된다.
글쓴이는 public 폴더 아래 js파일로 생성하였다. 페이지 이동 시마다 gtag에서 인식이 가능하도록 아래와 같이 메서드를 생성한다.
const changeRouteGtag = (url) => {
window.gtag('config', process.env.NEXT_PUBLIC_GA_ID, {
page_path: url,
});
};
export default changeRouteGtag;마지막으로 _app.js나 tsx에서 router 이벤트 핸들러를 등록하여 주고 페이지 이동 시마다 위에 메서드를 실행 시켜주면 된다.
타입스크립트로 되어 있는 소스기 때문에 AppProps 등 타입 관련 로직은 지워주고 useEffect와 handleRouteChange 메서드만 보면 된다. 간단하게 페이지가 마운트 될때마다 핸들러를 추가해주고 언마운트 될때마다 적용하였던 라우트 이벤트를 제거하여 준다.
import React, { useEffect } from 'react';
import type { AppProps } from 'next/app';
import router from 'next/router';
import changeRouteGtag from '@/public/lib/gtag';
function ServiceApp({ Component, pageProps }: AppProps) {
const handleRouteChange = (url) => {
changeRouteGtag(url);
};
useEffect(() => {
router.events.on('routeChangeComplete', handleRouteChange);
return () => {
router.events.off('routeChangeComplete', handleRouteChange);
};
}, []);
return (
<Component {...pageProps} />
);
}
export default ServiceApp;작업은 여기까지하면 마무리된다. 이제 애널리틱스를 접속하게 되면 각 접속자의 위치나 실시간 접속정보 등 사용자 인입에 관련하여
구글에서 알맞게 제공하여준다.
'Develop > Next.js' 카테고리의 다른 글
| [Develop/Next.js] Next.js hydrate시 redux state 초기화 (0) | 2022.03.06 |
|---|
