[프로젝트][WAVED] 지표 확인을 위해 구글 애널리틱스(GA) 도입하기

 

구글 애널리틱스, 누구세요?

https://analytics.google.com/

구글에서 무료로 제공하는 웹 분석 서비스 Google Analytics(GA)

구글 애널리틱스를 활용한다면 일일 사용자 수부터 페이지 별 사용자 수, 사용자의 이벤트 등 여러가지 지표를 얻을 수 있다.

 

 

우리는 웨이브드를 단기간 직접 운영해볼 예정이였고, 구글 애널리틱스를 활용한다면 유의미한 운영 지표를 얻어볼 수 있을거란 기대가 있었기에 리팩토링 스프린트 중 우리 서비스 내에 도입해보았다.

 

 

 

(1) GA 계정 생성하기

(+ 우리는 관리자용 구글 계정을 하나 갖고 있었기 때문에 이 계정에서 아래 과정을 진행하고,

추후 개인 계정을 초대해 각자가 지표를 볼 수 있도록 설정했다.)

 

홈페이지에서 좌측 하단 톱니바퀴(⚙️)를 눌러 계정 만들기를 진행한다. 

• 계정 이름 지정 : 우리는 서비스 이름을 작성했다
• 계정 데이터 공유 설정 : 우리는 default 대로 하단 3개를 체크했다

• 속성 이름 지정
• 시간대 / 통화 설정 : 대한민국 / 원

• 업종 카테고리 선택 : 커뮤니티 성격을 갖고 있는 서비스였으므로 온라인 커뮤니티로 택했다.
• 비즈니스 규모 지정
• 비즈니스 목표 선택 : GA를 선택한 이유에 맞게 사용자 행동 검토를 택했다.
• 서비스 약관 동의
• 플랫폼 선택 : 웹
• 웹 스트림 설정 : 배포된 서비스 주소 URL로 등록

 

 

GA를 사용하는 목적에 맞춰서 위 내용을 차례로 입력하면 웹 스트림이 성공적으로 생성된다.

 

위에서 중요한 내용은 측정 ID 이다.

G- 로 시작하는 이 코드를 갖고 프로젝트에 심으면서 분석 결과를 확인할 수 있게 된다.

 

 

 

 

---

(2) Next.js 프로젝트에 GA 도입하기

프로젝트에 GA를 도입하기 위해 해야 할 작업은 gtag.js 를 셋팅하는 것이다.

gtag.js(글로벌 사이트 태그)는 구글 애널리틱스로 데이터를 전송하는 API이다.

Google 태그 정보 - 애널리틱스 고객센터

 

 

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} />
  ...

 

 

 

---

(3) GA 도입 후 모니터링

GA 연동이 완료되면 GA 홈페이지를 통해서 아래와 같이 사용자에 대한 지표를 얻을 수 있다.

 

 

 

작업했던 내용은 아래 pull-request를 참고하면 볼 수 있다 🌊

[#109][FEATURE] 구글 애널리틱스(GA) 도입 by eeeyooon · Pull Request #111 · Senity-Waved/Waved_FE

 

 

---

참고

Next.js + TS 프로젝트에 Google Analytics 이식하기