Next.js 프로젝트에 GA4 붙이기(사용자 속성, 잠재고객, UTM)

극초기 스타텁 초기 멤버로 일하면서 벌써 4번째 랜딩 리뉴얼을 하고 있다. 첫 랜딩은 되는대로, 두번째도 되는대로, 세번째는 부스 직전에 3일만에 만들고 이번에는 개발하는데 일주일 정도 걸린 것 같다. 기존 랜딩페이지는 홈, 회사 소개, 제품 소개로 구성되어 있었고 이번에는 간결하게 원페이지에 제품 소개만 담는 방향으로 가기로 했다.
 
랜딩은 규모가 작아서 매번 다양한 UI 라이브러리를 써보고 있다. tailwindcss, chakra-ui를 거쳐 이번엔 panda css와 framer-motion의 조합으로 진행했다. 보통 Next.js를 기본으로 사용했는데 한번은 Svelt를 썼다가 팀원들의 항의에 다시 Next.js로 돌아왔다. 소기업에서 괜히 기술 스택 늘리지 맙시다.
 

---

 
 
개발이 끝났다면 이제 KPI 측정과 사용자 행동 추적을 위해 로깅을 해야 한다. 매뉴얼하게 기업 서버에 로깅하는 방편도 있겠지만 GA4라는 강력한 서비스가 있기 때문에 이를 사용하고 있다.
 
프론트 개발 및 배포에 관여할 권한이 없다면 GTM을 써서 상당한 노가다를 해야 했겠지만 나는 클라이언트 측에서 간편하게 gtag 함수만 사용하면 끝이다. 
 

2024년부터 크롬에서 부분적으로 third-party cookie 사용을 중단하기로 했다.
GA4에서 기본적으로 사용하는 쿠키('_ga', '_ga_<container_id>')는 first party cookie이므로 걱정할건 없다.
다만, 기존에 외부 쿠키를 이용해 사용자를 식별하는 기능을 사용했다면 그 분석은 이제 하지 못하게 된다. 대신 사용자 전용 광고를 위해 Protected Audience API를 대신 사용할 수 있다.

 
 

Next.js에 GA4 붙이기

Next.js 14의 앱라우터에서 GA4를 붙이는 방법은 두 가지가 있다. 

1. Next.js가 제공하는 @next/thrid-parties 패키지 사용하기
2. 직접 스크립트 삽입하기

처음에 전자를 사용했다가 이후 쿠키 정책 등 사용자 동의를 받을 때를 대비해 후자로 바꿨다. 자세한 내용은 아래에서..

[방법 1] Next.js가 제공하는 @next/thrid-parties 패키지 사용하기

• 공식문서

yarn add @next/third-parties

 
패키지 설치 후 app 디렉터리의 root layout 파일에 집어 넣기만 하면 된다.
 

import { GoogleAnalytics } from '@next/third-parties/google';

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <>
      {children}
      <GoogleAnalytics gaId={ENV.GOOGLE_TAG} />
    </>
  );
}

 
다만 이렇게 하면 처음 Google tag를 초기화 할 때 쿠키 동의에 대한 커스텀 설정을 하지 못하게 된다. gtag('config', <TAG>) 이후에 consent(저장소, 쿠키 등 GA4 기능에 대한 동의) 설정을 하는 건 좀 찝찝해서 그냥 직접 스크립트를 삽입하기로 했다.
 

[방법 2] 직접 스크립트 삽입하기

export default function GA4({ GOOGLE_TAG }: { GOOGLE_TAG: string }) {
  return (
    <>
      <Script
        strategy="afterInteractive"
        src={`https://www.googletagmanager.com/gtag/js?id=${GOOGLE_TAG}`}
      />
      <Script
        id="google-analytics"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
                window.dataLayer = window.dataLayer || [];
                function gtag(){dataLayer.push(arguments);}
                gtag('js', new Date());

                gtag('consent', 'default', {
                  'ad_storage': 'denied',
                  'ad_user_data': 'denied',
                  'ad_personalization': 'denied',
                  'analytics_storage': 'denied',
                  'region': ['ES', 'US-AK']
                });

                gtag('config', '${GOOGLE_TAG}');
                `,
        }}
      />
    </>
  );
}

 
 
직접 스크립트를 삽입하면 [GA4] - [데이터스트림] - [Google Tag] - [직접 설치] 에서 제공하는 스크립트에 위와 같이 원하는 설정을 할  수 있다.
 
위처럼 consent 설정을 하면 해당 국가 코드에 있는 사용자들을 대상으로 GA4는 쿠키를 생성하지 않는다. GDPR은 글로벌하게 쓰이는 정책이긴 일단은 EU 회원국에 국한되어 있기 때문에 해당 국가에 대해서만 막아둘 수 있다. 우리 서비스는 트래픽이 거의 없기 때문에 consent 설정도 일단은 제외해 뒀다.
 

---

 
consent 설정을 했다면 Cookie Script와 같은 쿠키 배너 서비스를 이용해서 간편하게 쿠키 동의 배너를 지정할 수 있다.
 
웬만한 쿠키 배너 서비스는 무료로 웹사이트를 스캔해 사용하는 쿠키, 로컬 스토리지 정보를 알아내고 어느 정책에 걸리는지 알려주고, 각 쿠키가 필수 쿠키인지, 성능 쿠키인지, 개별화 쿠키인지 등을 분석해준다. 국가별 배너 표시 여부 등 자세한 설정은 유료인 경우가 많다. (Cookie Script가 제일 UI가 예쁘다.)

 

컴포넌트에서 gtag 함수 호출하기

 
@next/third-parties 패키지를 사용한다면 해당 패키지의 sendGAEvent 함수를 호출해 간편하게 gtag 이벤트를 보낼 수 있다. 
 
이 글에서는 직접 gtag 함수를 이용할 것이다.
먼저 Typesciprt에서 gtag 함수 타입을 알 수 있도록 다음 패키지를 설치한다.
 

gtag 타입 패키지 설치

yarn add -D @types/gtag.js

 
설치를 하고 나면 따로 호출할 필요없이 Gtag 타입을 이용할 수 있다.
 

gtag 함수 이용

// client에서만 gtag를 호출하도록 함
export const safeGtag: Gtag.Gtag = <Command extends keyof Gtag.GtagCommands,>(command: Command, ...args: Gtag.GtagCommands[Command]) => {
  if (window?.gtag && typeof window.gtag === 'function')
    return window.gtag(command, ...args)
  else return
}

// 안전한 gtag 함수를 통해 이벤트 호출
export const gtagSendEvent = ({ action, ...rest }: GTagEvent & { [k: string]: string | number | undefined }): void => {
  safeGtag("event", action, {
    ...rest
  });
};

// 사용자 속성을 GA4 콘솔에서 직접 지정해야 하기 때문에 관리가 편하도록 enum으로 정의
export enum UserProperty {
  ViewStatus = "view_status",
  IsVisiter = "is_visitor",
  IsContacter = "is_contactor",
}

const gtagSetUserProperty = (key: UserProperty, value: string) => {
  safeGtag('set', 'user_properties', {
    [key]: value
  });
}

 
먼저 윈도우가 있을 때만 gtag함수를 호출하도록 감싸준 뒤 해당 함수를 이용해 gtag를 제한적으로 이용할 수 있는 다른 함수들을 만든다.
 
특히 맞춤 측정기준(이벤트 매개변수, 사용자 속성)이나 주요이벤트(전 전환) 등은 GA4콘솔에서 다시 직접 설정해야 하기 때문에 따로 모아 관리하는게 좋다. 
 
랜딩 페이지에서 로깅하는 정보는 다음과 같다.

• 사용자 속성
  • 페이지 컨텐츠를 어디까지 봤는지
  • 서비스 바로가기 버튼 클릭 여부
  • 서비스 문의하기 버튼 클릭 여부
• 이벤트
  • 각 섹션 컴포넌트가 view port에 로드될 때
  • 인터랙티브 컴포넌트에 참여했을 때(hover 등)
  • 버튼 혹은 링크를 클릭했을 때(해당 요소의 위치도 함께 기록)

 

GA4 콘솔에서 사용자 속성 및 잠재고객 설정하기

사용자 속성 설정 (Aka. 맞춤 측정기준 설정)

위에 정의된 함수를 사용하여 사용자 속성을 GA4에 전송해도 그 정보는 보고서에 남지 않는다. 커스텀 사용자 속성을 이용하려면 맞춤 측정기준을 설정해야 한다.
 
[관리]-[속성 설정]-[데이터 표시]-[맞춤 정의]에서 새로운 맞춤 기준을 설정할 수 있다. 맞춤 측정기준 만들기 버튼을 클릭한 후 위에서 사용한 사용자 속성을 그대로 입력하여 맞춤 측정기준을 만들 수 있다.
 

 
맞춤 측정기준을 만들고 바로 보고서의 [비교]에서 사용할 수도 있지만, 해당 측정기준을 기반으로 잠재고객을 만드는 편이 더 편리하다.
 

잠재고객 설정

[관리]-[속성 설정]-[데이터 표시]-[구축]에서 잠재고객을 설정할 수 있다.
 
[새 잠재고객 만들기]-[맞춤 잠재고객 만들기]를 통해 원하는 사용자 속성을 마음대로 조합해 잠재고객을 만들 수 있다.
 
[조건 선택]-[맞춤]에서 위에서 만든 맞춤 측정기준을 선택하고 필터를 걸면 된다.

 
이렇게 잠재고객을 만들어두면 [보고서]-[사용자]-[사용자 속성]-[잠재고객]에서 각 고객별 수집 데이터를 확인하거나, 다른 보고서에서 비교를 통해 잠재고객 별 통계를 볼 수 있다.
 

UTM 파라미터

Urchin Tracking Module (UTM) parameters
 
GA에서 사용하는 사용자 추적을 위한 쿼리 파라미터이다. GET 쿼리에서 utm_<variable_name> 형태로 쓰이며, GA에서 기본적으로 제공하는 변수들은 공식 문서에 자세히 나와있다.

utm_source	리퍼러(예: Google, 뉴스레터4, 빌보드)
utm_medium	마케팅 매체(예: CPC, 배너, 이메일)
utm_campaign	제품, 슬로건, 프로모션 코드(예: spring_sale)

 
위와 같은 파라미터들은 따로 설정을 하지 않아도 사용자가 UTM 파라미터가 있는 페이지로 접속하기만 하면 매개변수로 기록된다.
 
아래는 향상된 측정을 사용할 경우 자동으로 기록되는 이벤트 page_view의 매개변수로 UTM 파라미터가 들어간 모습이다. 앞의 utm_ 프리픽스는 빠지고 medium, source, campaign만 기록 된다.
 

 

---

GA4를 붙이고 이벤트를 수집하는 것까진 얼마 걸리지 않았는데 GDPR 등 쿠키 정책과 쿠키 배너 서비스를 알아보는데 많은 시간을 소요했다. 오랫동안 찾아보긴 했지만 트래픽이 조금 더 생기기 전까진 GDPR을 준수하는 것은 보류하기로 했다.