고양이hyebin
PostTIL
Next 13 Google Analytics 추적 코드 추가
December 10, 2023

블로그를 운영하면서 어떤 사람들이 어떻게 내 블로그에 들어오는지 궁금했다.

그래서 사용자 행동 데이터를 추적하여 분석하는 도구 google analytics를 블로그에 심기로 결정했다.

Google Analytics란 ?

구글 애널리틱스(Google Analytics)는 구글이 제공하는 웹 트래픽을 추적하고 보고하는 무료 웹 분석 서비스이다. 웹사이트 트래픽과 사용자 행동에 대한 통찰력을 제공하여 웹사이트 소유자와 마케팅 담당자가 데이터 중심 결정을 내릴 수 있도록 도와준다.

Google Analytics 계정 생성

Google Analytics 웹사이트(https://analytics.google.com) 가서 Google 계정으로 로그인한다.

image
image

계정은 사업자(업체)를 입력하면 된다. ex) 강남천하제일내과

image
image

데이터 공유 설정은 모두 체크해주었다.

image
image

속성에서 사용 중인 도메인 (gangnambestclinic.com) 을 입력해준다.

보고 시간대와 통화도 설정해준다.

image
image

업체 카테고리 선택, 마땅한 카테고리가 없는 경우 "기타"로 선택해도 무방하다.

그리고 비즈니스 목표 설정과 약관 동의까지 하면 완료된다.

image
image

계정과 속성이 생성되면 분석할 웹사이트를 연결한다. 연결할 웹사이트의 URL과 입력하고 이름을 만들어 준다.

스트림 만들기 버튼을 클릭하면, 하단에 코드가 나타나는데 해당 코드 전체를 웹사이트/블로그 HTML의 헤드에 삽입하면 된다.

Typescript 기반으로 gtag 심기

Next.js에서 GA를 사용하는 공식 예시가 있어 참고하면 된다.

하지만 js로 작성되어 있어 ts에 호환되도록 추가 작업이 진행되어야 한다.

yarn add -D @types/gtag.js

.env

구글 애널리틱스 페이지에서 애널리틱스를 하나 만들고, 생성된 코드를 env에 입력한다.

NEXT_PUBLIC_GOOGLE_ANALYTICS = G - 0000000000;

gtag.ts 파일 생성

gtag.ts 파일을 생성해서 아래와 같은 코드를 입력한다.

export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID;
 
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;
}
 
export const event = ({ action, category, label, value }: GTagEventProps) => {
  window.gtag("event", action, {
    event_category: category,
    event_label: label,
    value,
  });
};

tsconfig.json 설정

만약 'Window & typeof globalThis' 형식에 'gtag' 속성이 없습니다.ts(2339) 에러가 발생한다면 @types/gtag.js 모듈이 없어 발생하는 오류로, tsconfig.jsontsconfig.json 파일에 "@types/gtag.js"라는 타입을 추가한다.

tsconfig.json

{
  "compilerOptions": {
		...
    "types": [
      "@types/gtag.js" // 추가
    ]
  },
  ...
}

생성된 google 추적코드 Next.js에 맞게 주입시키기

Analytics라는 컴포넌트를 만들어주었다.

import Script from "next/script";
 
export const Analytics = () => {
  return (
    <>
      <Script
        async
        src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_ID}`}
      ></Script>
      <Script
        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,
              });
            `,
        }
      />
    </>
  );
};

app/layout에 해당 컴포넌트를 head 태그 안에 넣어주었다.

Google Search Console 연동

GA와 Search Console를 연동할 수도 있다.

Google Search Console(구글 서치 콘솔)

Google Search Console(구글 서치 콘솔)는 웹사이트 소유자가 검색 엔진에서의 웹사이트 성능을 모니터링하고 개선하는 데 사용하는 무료 도구이다. 웹사이트의 검색 엔진 최적화(SEO)를 지원하며, 사용자에게 웹사이트에 대한 유용한 정보를 제공한다.

관리 > Search Console 링크 > 연결

image
image

마무리

아직 GA를 적용한지 하루밖에 안지났지만 다채로운 통계 데이터와 사용자의 트래픽 정보를 얻을 수 있다는 점이 매우 흥미로웠다. 특히 데이터 중심으로 사용자들이 블로그 내에서 어떤 페이지에서 이탈률이 늘어나는지를 분석 할 수 있다는 점이 기대가 되었다. 좀 더 데이터가 쌓여지면 데이터 기반으로 블로그의 UI/UX를 개선하는 작업을 진행해야겠다.

참고

https://bepyan.github.io/blog/nextjs-blog/5-google-analytics

https://www.openads.co.kr/content/contentDetail?contsId=6124

https://velog.io/@sumi-0011/Next.js-GA

다음 글

Web Worker