디지털 기술은 이미지 생성, 자연어 처리, 사용자 행동 분석을 비롯한 많은 분야에서 활용되며, 공통적으로 더 나은 의사결정을 돕는다.
내가 요즘 꽂힌 키워드에도 디지털 기술이 도움이 될 듯하다.
그건 바로...
전환율 상승을 위한 트래픽 유입 전략
지속가능한 서비스를 만들려면 단순한 기능 개발을 넘어, 사용자를 유입시키고, 체류하게 하며, 전환으로 이어지게 하는 전략이 필요하다. 이 과정에서 중요한 것은 객관적인 데이터를 기반으로 의사결정을 내리는 것이다.
그러나, 서비스를 운영하다 보면 페이지 조회, 클릭, 회원가입, 결제 등 수많은 사용자 행동 데이터가 쌓인다. '정말 필요한 데이터'를 얻기 위해서는 어떻게 해야할까
500 Startups의 설립자인 Dave McClure는 제품의 사용자 수명 주기를 다음 다섯 단계로 단순화할 수 있다고 했다.
Acquisition(획득) — 사용자가 어떤 채널·키워드를 통해 유입되는가
Activation(활성화) — 유입된 사용자가 서비스의 핵심 가치를 처음으로 경험하는가 (예: 회원가입, 첫 기능 사용)
Retention(유지) — 사용자가 재방문하여 서비스를 지속적으로 사용하는가
Referral(추천) — 만족한 사용자가 다른 사람에게 서비스를 추천하는가
Revenue(수익) — 최종적으로 결제 등 수익 행동으로 전환되는가
이를 측정하고 분석할 수 있는 대표적인 도구가 Google Analytics 4(GA4) 이다.
Google Analytics 4 (GA4)
2023년 UA(Universal Analytics)를 공식 종료하면서 사람들은 이를 대체할 분석 플랫폼을 찾게 되는데,
이때, Google이 발표한 표준 분석플랫폼인 Google Analytics 4 (GA4)가 주목받게 된다.
UA는 '사용자의 서비스 방문과 페이지뷰' 중심이었지만 GA4는 사용자 행동을 모두 '이벤트'로 수집하여 웹과 앱을 통합 추적했다.
기존 UA와의 가장 큰 차이점은 이벤트 기반 데이터 모델을 채택했다는 점이다.
GA4에서는 페이지뷰, 클릭, 스크롤, 결제 완료 등 사용자의 모든 행동을 동일한 이벤트 구조로 수집한다.
덕분에 세션 단위가 아닌 사용자 단위의 여정(User Journey) 을 추적할 수 있어 AARRR 전 단계에 걸친 분석의 정밀도가 크게 높아졌다.
| AARRR 단계 | GA4에서 확인 가능한 데이터 | 대표 보고서 |
|---|---|---|
| Acquisition | 채널별 유입량, 검색 키워드, 리퍼러 URL | 획득 > 트래픽 획득 |
| Activation | 첫 방문 시 핵심 이벤트 완료율, 온보딩 이탈 지점 | 참여 > 이벤트 |
| Retention | 재방문율, 코호트별 유지율, DAU/MAU | 유지 > 코호트 탐색 |
| Referral | 추천 트래픽 채널, 바이럴 유입 경로 | 획득 > 트래픽 획득 (Referral 필터) |
| Revenue | 결제 전환율, 거래 금액, ARPU | 수익 창출 > 전자상거래 |
웹 속성과 데이터 스트림
GA4에서 분석을 시작하려면 속성(Property) 과 데이터 스트림(Data Stream) 을 순서대로 생성해야 한다.
속성(Property) 은 분석 단위다.
하나의 서비스(예: myapp.com)에 대응하는 분석 컨테이너라고 이해하면 된다.
데이터 스트림(Data Stream) 은 속성에 연결되는 실제 데이터 수집 출처다. 하나의 속성에 웹 스트림, iOS 앱 스트림, Android 앱 스트림을 동시에 연결할 수 있어 멀티플랫폼 서비스에서도 통합된 사용자 분석이 가능하다.
설정순서
1. GA4 관리 콘솔 → 속성 만들기
속성(= 분석할 사이트 넣기) 을 만들자. 게시글 작성일을 기준으로,
무료계정에서 2,000 개까지 생성 가능하니 참고하자.
2. 속성 세부사항 설정
속성의 세부사항을 설정하자.
3. 속성 세부사항 설정
최종적으로 배포된 사이트 URL을 스트림에 넣어주면 기본적인 설정은 끝난다. 여기서 발급되는 '측정 ID(G-로 시작)'를 잘 확인해두자.
프로젝트 환경설정
Next.js 환경에서의 GA4 연동 방법만을 다뤄보겠다.
패키지 install
우선 GA4의 공식 지원 패키지인 @next/third-parties 패키지 설치가 필요하다.
npm install @next/third-partieslayout.tsx
@next/third-parties 에서 GoogleAnalytics 컴포넌트를 불러와 적용한다.
이 때, 측정 ID를 코드에 직접 노출하면 외부에 공개될 수 있으므로,
루트 디렉토리에 .env 파일을 생성하여 환경변수로 관리한다.
측정 ID가 유출될 경우, 제3자가 동일한 ID로 데이터를 수집하거나 통계를 오염시킬 수 있다는 점을 반드시 유의해야한다.
// .env
my_gaId = ...
import { GoogleAnalytics } from '@next/third-parties/google'
// ...
const gaId = process.env.NEXT_PUBLIC_GA_ID;
return (
<html lang="ko">
<body className="bg-white text-gray-900 antialiased">{children}</body>
{gaId ? <GoogleAnalytics gaId={gaId} /> : null}
</html>
);
결과
최근 30분 동안 서비스를 이용한 활성 사용자 수를 비롯해, 사용자가 어떤 페이지를 방문했는지, 어떤 이벤트를 수행했는지, 어떤 경로와 키워드를 통해 유입되었는지 등을 실시간으로 확인 가능하며 이 자료는 일반적인 웹 서비스나 앱은 물론, 게임 클라이언트 다운로드 페이지처럼 전환율이 중요한 다양한 웹 환경에서도 활용할 수 있다.
특히 수많은 사용자 행동 로그를 단순히 나열하는 것이 아니라, AARRR 관점에서 유입(Acquisition), 활성화(Activation), 유지(Retention), 추천(Referral), 수익(Revenue)과 관련된 핵심 지표를 추적할 수 있어 비즈니스 성장에 필요한 데이터만 선별적으로 파악할 수 있기에 감에 의존하지 않고 실제 사용자 행동 데이터를 기반으로 서비스 개선 방향을 수립하고, 마케팅 전략과 전환율 최적화에도 도움이 된다.
그 외
프론트엔드에서 추적이 불가능한 카드 결제 정보, CVR 데이터 등은 백엔드에서 GA4의 Measurement Protocol을 이용해 Google Analytics로 직접 이벤트 데이터를 전송하면, 통계를 확인할 수 있다.
이를 활용하면 실제 비즈니스 성과와 연결되는 전환 데이터를 보다 정확하게 측정할 수 있으며, 프론트엔드 이벤트와 함께 분석하여 사용자 행동 흐름을 더욱 입체적으로 파악할 수 있는 것 이다.
// 백엔드에서 GA4로 결제 완료 이벤트를 직접 전송하는 예제
const GA_MEASUREMENT_ID = process.env.GA_MEASUREMENT_ID;
const GA_API_SECRET = process.env.GA_API_SECRET;
async function sendPurchaseEvent(clientId: string, transactionId: string, value: number) {
// 이 clientId를 결제 요청 시 백엔드로 함께 전송
await fetch(
`https://www.google-analytics.com/mp/collect?measurement_id=${GA_MEASUREMENT_ID}&api_secret=${GA_API_SECRET}`,
{
method: 'POST',
body: JSON.stringify({
client_id: clientId, // GA4 스크립트가 가 자동발급하여 브라우저 쿠키에 저장한 id 값 요청.
events: [
{
name: 'purchase',
params: {
transaction_id: transactionId,
value: value,
currency: 'KRW',
},
},
],
}),
}
);
}