Google analytics 4 란?

어플리케이션이나 웹에서 발생하는 고객의 행동 데이터를 수집하고 분석할 수 있다. 주로 광고 캠페인이나 마케팅에서 사용하는 듯하다. 분석 결과를 토대로 리마케팅에 쓰는 듯.

🤔 추후 어떤 유저 데이터 수집이 필요하고, 어디에 사용할 지 논의가 필요함

페이지 조회 뿐 아니라 스크롤, 이탈클릭, 사이트 검색 등 이벤트를 자동으로 집 가능함. 수집을 원하는 측정 유형은 구글 애널리틱스에서 직접 설정해야 함.

수집 데이터

• 추후 유저가 페이지에 어떤 시간에 사용하는지, 어떤 페이지에 어느 시간 정도 머무는 지를 파악할 수 있음

• 기능 추가에 따라 세부 설정이 가능함(예시. 언제 버튼을 누르고, 얼마나 많은 사람이 그 버튼을 누르는 지)

• 메인페이지 메뉴바 매뉴얼 클릭 액션: 얼마나 많은 사람들이 매뉴얼을 클릭해서 볼까?

• 매칭페이지 슬롯 클릭 액션, 단/복식 클릭 액션: 어느 시간대에, 어떤 게임을 더 원할까?

적용하기

// _app.tsx 모든 페이지에서 렌더링 되는 최상위 파일

import Script from "next/script";
import { useRouter } from "next/router";
import * as gtag from "lib/gtag";

function MyApp({ Component, pageProps }) {
const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url) => {  // **동적 라우팅을 못 잡기 때문에 함수 추가
      gtag.pageview(url);
    };
    router.events.on("routeChangeComplete", handleRouteChange);
    return () => {
      router.events.off("routeChangeComplete", handleRouteChange);
    };
  }, [router.events]);

  return (
    <>
      {/* Global Site Tag (gtag.js) - Google Analytics */}
      <Script
        strategy="afterInteractive"
        src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_ID}`}
      />
      <Script
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${gtag.GA_ID}', {
              page_path: window.location.pathname,
            });
          `,
        }}
      />

      <Layout>
        <Component {...pageProps} />
      </Layout>
    </>
  );
}

export default MyApp;

// lib/gtag.ts

export const GA_ID = `${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`;

declare global {
  interface Window {
    gtag: (param1: string, param2: string, param3: object) => void;
  }
}

// <https://developers.google.com/analytics/devguides/collection/gtagjs/pages>
export const pageview = (url: any) => {
  window.gtag("config", GA_ID, {
    page_path: url,
  });
};

// <https://developers.google.com/analytics/devguides/collection/gtagjs/events>
export const event = ({ action, category, label, value }: any) => {
  window.gtag("event", action, {
    event_category: category,
    event_label: label,
    value: value,
  });
};

// .env

NEXT_PUBLIC_GA_ID = 설정

Redirecting...

Next.js에 Google Analytics, Google Optimize 설정하기

How to add GoogleAnalytics 4 to NextJs app in 4 simple steps