구글 애널리틱스, 누구세요?
구글에서 무료로 제공하는 웹 분석 서비스 Google Analytics(GA)
구글 애널리틱스를 활용한다면 일일 사용자 수부터 페이지 별 사용자 수, 사용자의 이벤트 등 여러가지 지표를 얻을 수 있다.
우리는 웨이브드를 단기간 직접 운영해볼 예정이였고, 구글 애널리틱스를 활용한다면 유의미한 운영 지표를 얻어볼 수 있을거란 기대가 있었기에 리팩토링 스프린트 중 우리 서비스 내에 도입해보았다.
GA 계정 생성하기
(+ 우리는 관리자용 구글 계정을 하나 갖고 있었기 때문에 이 계정에서 아래 과정을 진행하고,
추후 개인 계정을 초대해 각자가 지표를 볼 수 있도록 설정했다.)
홈페이지에서 좌측 하단 톱니바퀴(⚙️)를 눌러 계정 만들기를 진행한다.
- 계정 이름 지정 : 우리는 서비스 이름을 작성했다
- 계정 데이터 공유 설정 : 우리는 default 대로 하단 3개를 체크했다
- 속성 이름 지정
- 시간대 / 통화 설정 : 대한민국 / 원
- 업종 카테고리 선택 : 커뮤니티 성격을 갖고 있는 서비스였으므로 온라인 커뮤니티로 택했다.
- 비즈니스 규모 지정
- 비즈니스 목표 선택 : GA를 선택한 이유에 맞게 사용자 행동 검토를 택했다.
- 서비스 약관 동의
- 플랫폼 선택 : 웹
- 웹 스트림 설정 : 배포된 서비스 주소 URL로 등록
GA를 사용하는 목적에 맞춰서 위 내용을 차례로 입력하면 웹 스트림이 성공적으로 생성된다.
위에서 중요한 내용은 측정 ID 이다.
G- 로 시작하는 이 코드를 갖고 프로젝트에 심으면서 분석 결과를 확인할 수 있게 된다.
Next.js 프로젝트에 GA 도입하기
프로젝트에 GA를 도입하기 위해 해야 할 작업은 gtag.js 를 셋팅하는 것이다.
gtag.js(글로벌 사이트 태그)는 구글 애널리틱스로 데이터를 전송하는 API이다.
Google 태그 정보 - 애널리틱스 고객센터
도움이 되었나요? 어떻게 하면 개선할 수 있을까요? 예아니요
support.google.com
gtag.js 타입 설치
gtag.js는 단일 태그로 제공되는 API이기 때문에 라이브러리를 직접 설치할 필요가 없으며 설정 파일에 적절히 추가해주면 된다.
대신 typescript를 사용하는 경우는 타입을 따로 설치해주어야 한다.
$ npm install -D @types/gtag.js // 타입 설치
환경 변수에 측정 ID 추가
앞서 웹 스트림 세부정보에서 얻어낸 측정 ID를 환경변수로 저장하여 활용한다.
// .env
NEXT_PUBLIC_GA_ID = ''; // 측정 ID
gtag.ts 작성
프로젝트 내에 gtag.ts를 아래와 같이 생성한다.
- 환경 변수로 저장한 추적 ID를 가져와 GA_TRACKING_ID로 설정한다
- 페이지 뷰를 추적하는 함수 pageview()와 이벤트를 추적하는 함수 event()를 차례로 정의한다
// lib/ga/gtag.ts
export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID;
// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const pageview = (url: URL) => {
if (typeof window.gtag === 'undefined') return;
window.gtag('config', GA_TRACKING_ID as string, {
page_path: url,
});
};
interface GTagEventProps {
action: string;
category: string;
label: string;
value: number;
}
// https://developers.google.com/analytics/devguides/collection/gtagjs/events
export const event = ({ action, category, label, value }: GTagEventProps) => {
window.gtag('event', action, {
event_category: category,
event_label: label,
value,
});
};
_app.tsx 에 스크립트 추가
작성한 gtag.ts의 내용을 App에 이식한다.
- useRouter 훅을 활용하여 라우터 이벤트를 감지. 페이지가 변경될 때마다 gtag.preview()를 호출하여 페이지 뷰를 추적한다
- routeChangeComplete 이벤트 : 페이지 라우팅이 완료되면 실행되는 이벤트. 라우팅 후 추가 작업을 처리하는 데에 사용
- 서비스가 배포된 버전인 경우, GA 스크립트 추가
- next/script를 사용하여 GA 스크립트를 로드하고 초기화한다
- 개발 환경에서 불필요한 트래픽이 발생하지 않도록 프로덕션 환경에서만 스크립트 활성화
// pages/_app.tsx
import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import Script from 'next/script';
import * as gtag from '@/lib/ga/gtag'; // gtag 가져오기
/* ... */
export default function App({ Component, pageProps }: AppProps) {
const router = useRouter();
useEffect(() => {
// 페이지 라우팅 변경을 감지하여 페이지 뷰 추적
const handleRoutingChange = (url: URL) => {
gtag.pageview(url);
};
router.events.on('routeChangeComplete', handleRoutingChange);
return () => {
router.events.off('routeChangeComplete', handleRoutingChange);
};
}, [router.events]);
return (
...
<Global styles={global} />
{process.env.NODE_ENV === 'production' && (
<>
<Script
strategy="afterInteractive"
src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
/>
<Script
id="gtag-init"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${gtag.GA_TRACKING_ID}', {
page_path: window.location.pathname,
});
`,
}}
/>
</>
)}
<Component {...pageProps} />
...
GA 도입 후 모니터링
GA 연동이 완료되면 GA 홈페이지를 통해서 아래와 같이 사용자에 대한 지표를 얻을 수 있다.
[#109][FEATURE] 구글 애널리틱스(GA) 도입 by eeeyooon · Pull Request #111 · Senity-Waved/Waved_FE
✨ 구현 기능 명세 구글 애널리틱스 도입 및 로컬에서의 테스트까지 완료하였습니다. 🎁 PR Point 실배포 사이트에서도 잘 동작하는지 확인이 필요합니다. 🕰 소요시간 1h
github.com
참고
'프로젝트 > WAVED' 카테고리의 다른 글
[프로젝트][WAVED] 가로 스크롤 컴포넌트 구현을 위한 삽질기 (0) | 2024.04.05 |
---|---|
[프로젝트][WAVED] Next.js를 선택했다고 끝난게 아니다? 라우팅 방식과 렌더링 방식에 대한 고민들 (0) | 2024.03.05 |