프로젝트에 Google Analytics 적용하기

기록이 쌓이면 기억이 된다·2023년 12월 23일

project

❔ Google Analytics란?

웹 사이트 및 앱의 트래픽, 사용자의 행동을 분석하는 데 사용되는 google의 무료 웹 분석 도구(https://analytics.google.com/)

❕ Google analytics를 사용했을 때 장점

트래픽 소스, 사용자의 경로, 전환률 등을 상세하게 분석할 수 있어 웹 사이트나 앱의 성능 향상에 도움을 준다.
사용자가 웹 사이트나 앱에서 어떻게 상호 작용하는지 이해할 수 있고 이를 바탕으로 사용자 경험을 개선할 수 있다.
트래픽 분석 : 웹 사이트나 앱에 어떤 트래픽 소스에서 사용자가 유입되는지 추적할 수 있다,
페이지 분석 : 어떤 페이지나 화면이 사용자에게 가장 많이 방문되는지 어떤 컨텐츠가 인기 있는지 파악할 수 있다.
전환률 분석 : 원하는 동작(가입, 다운로드 등)을 완료한 사용자의 비율을 계산하고 개선 방법을 고려할 수 있다.

❕ 세팅

1. 관리 > 만들기 > 계정

https://analytics.google.com/analytics

2. 계정 이름 설정

3. 속성 이름, 보고 시간대, 통화 설정

4. 업종 카테고리, 비지니스 규모 선택

5. 비지니스 목표 선택

6. 약관 동의 후 플랫폼 선택

7. 배포한 URL과 스트림 이름 설정

측정 ID를 .env 파일에 NEXT_PUBLIC_GA_ID로 저장

❕ 적용

1. 설치

yarn add -D @types/gtag.js

2. tsconfig.json에 gtag 추가해 타입 선언 파일 지정

  "types": ["@types/gtag.js"],

3. 이전 페이지에서 저장한 측정 ID를 .env 파일에 저장

4. /src/lib/gtag.ts 파일 생성 후 구글 애널리틱스 관련 타입 및 함수 정의

pageview 함수
- page path를 넘겨받아 사용자가 페이지를 이동할 때마다 해당 path를 저장
event 함수
- 사용자가 찜 버튼을 누를 때마다 해당 이벤트가 감지되도록 정의

export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID;

export const pageview = (url: URL | string) => {
  if (process.env.NODE_ENV !== "development") {
    window.gtag("config", GA_TRACKING_ID as string, {
      page_path: url,
    });
  }
};

type gtagEvent = {
  action: string;
  category: string;
  label: string;
  value: number;
};

export const event = ({ action, category, label, value }: gtagEvent) => {
  if (process.env.NODE_ENV !== "development") {
    window.gtag("event", action, {
      event_category: category,
      event_label: label,
      value: value,
    });
  }
};

5. src/app/googleAnalytics.tsx 파일 생성 후 구글 스크립트 로드

pathname이 변경될 때 마다 pageview 함수 호출

import { pageview } from "@/lib/gtag";
import Script from "next/script";
import { useEffect } from "react";
import { usePathname } from "next/navigation";

function GoogleAnalytics({ GA_TRACKING_ID }: { GA_TRACKING_ID?: string }) {
  const pathname = usePathname();

  useEffect(() => {
    if (pathname) {
      pageview(pathname);
    }
  }, [pathname]);

  if (process.env.NODE_ENV !== "production") {
    return null;
  }
  return (
    <div className="container">
      <Script
        strategy="afterInteractive"
        src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
      />
      <Script id="google-analytics" strategy="afterInteractive">
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
 
          gtag('config', '${GA_TRACKING_ID}');
        `}
      </Script>
    </div>
  );
}

export default GoogleAnalytics;

6. /src/app/layout.tsx에서 앞서 만든 googleAnalytics 컴포넌트 로드

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <GoogleAnalytics GA_TRACKING_ID={process.env.NEXT_PUBLIC_GA_ID} />
        <NextProvider>
          <NextLayout>{children}</NextLayout>
        </NextProvider>
      </body>
    </html>
  );
}

7. 찜 하기 버튼을 클릭했을 때 event 함수 호출

const toggleLike = async () => {
    // 찜하기 / 찜 취소
    if (session?.user && store) {
      try {
        ...생략

        event({
          action: "click_like",
          category: "like",
          label: like.status === 201 ? "create_like" : "delete_like",
          value: storeId,
        });

        refetch();
      } catch (e) {
        console.log(e);
      }
    } else if (status === "unauthenticated") {
      toast.warn("로그인 후 이용해주세요.");
      event({
        action: "click_like",
        category: "like",
        label: "need_login_like",
        value: storeId,
      });
    }
  };