Next.js에 Google Analytics 커스텀 이벤트 적용하기

Written by Sangmin on March 16, 2025

구글애널리틱스는 간단하게 사용자 행동 데이터를 수집할 수 있는 툴이다. 그러나 페이지 뷰 혹은 스크롤 이벤트 등 디폴트 세팅이 아닌 커스텀 이벤트를 추적하려면 추가적인 세팅이 필요하다. 내가 만든 앱은 유저가 다양한 질문들에 대한 대답을 하면 기획서를 작성해주는 서비스인데 유저가 어디서 이탈하는지, 마지막단계 (기획서 생성)까지 가는 비율이 얼마나 되는지 등의 성과를 추적하는것이 중요했다.

그래서 Next 애플리케이션에 Google Analytics 추적 기능을 추가했다. 이를 통해 사용자 행동 데이터를 수집하고 분석할 수 있게 되었다. 사용자 경험 개선을 위해서는 이런 데이터 분석이 필수적이다.

코드 변경 사항 분석

sendGAEvent 함수

먼저 sendGAEvent 함수를 살펴보자. 이 함수는 Google Analytics에 이벤트를 전송하는 역할을 한다.

export const sendGAEvent = (
  eventName: string,
  eventParams: Record<string, any>
) => {
  if (typeof window !== "undefined" && window.gtag) {
    window.gtag("event", eventName, eventParams);
  } else {
    console.error(" GA event not sent: gtag is not initialized");
  }
};

이 함수는 두 개의 매개변수를 받는다:

• eventName: 추적하려는 이벤트의 이름
• eventParams: 이벤트와 관련된 추가 데이터를 담은 객체

함수는 먼저 window 객체와 window.gtag 함수가 존재하는지 확인한다. 이는 Google Analytics 스크립트가 제대로 로드되었는지 확인하는 과정이다. 만약 존재한다면 gtag 함수를 호출하여 이벤트를 Google Analytics로 전송한다. 존재하지 않을 경우에는 콘솔에 오류 메시지를 출력한다.

이벤트 추적 함수들

다음으로 다양한 이벤트 추적 함수들이 추가되었다. 이 함수들은 애플리케이션의 특정 이벤트가 발생했을 때 sendGAEvent를 호출하여 Google Analytics에 데이터를 전송한다.

export const trackStep = (
  stepNumber: number,
  questionType: string,
  questionText: string
) => {
  sendGAEvent("step_complete", {
    step_number: stepNumber,
    question_type: questionType,
    question_text: questionText,
  });
};

trackStep 함수는 사용자가 설문 단계를 완료했을 때 호출된다. 이 함수는 다음과 같은 매개변수를 받는다:

• stepNumber: 현재 완료된 단계의 번호
• questionType: 질문의 유형 (예: 객관식, 주관식 등)
• questionText: 실제 질문 텍스트

이 정보들은 “step_complete”라는 이벤트 이름과 함께 Google Analytics로 전송된다. 이렇게 전송된 데이터는 나중에 어떤 단계에서 사용자들이 많이 이탈하는지, 어떤 유형의 질문에 반응이 좋은지 등을 분석하는 데 활용할 수 있다.

다른 추적 함수들

trackQuestionResponse, trackSummaryView, trackEstimateView 등의 함수들도 비슷한 방식으로 작동한다. 각 함수는 특정 사용자 행동에 대한 데이터를 수집하여 Google Analytics로 전송한다.

예를 들어:

• trackQuestionResponse: 사용자가 질문에 응답했을 때의 데이터를 추적
• trackSummaryView: 사용자가 요약 페이지를 볼 때의 데이터를 추적
• trackEstimateView: 사용자가 견적 페이지를 볼 때의 데이터를 추적

이러한 함수들은 각각 다른 매개변수를 받지만, 모두 sendGAEvent 함수를 통해 데이터를 Google Analytics로 전송한다는 공통점이 있다.

Google Analytics 데이터 활용

Google Analytics에서 수집한 데이터는 다양한 방식으로 활용할 수 있다:

사용자 행동 패턴 분석

어떤 단계에서 이탈률이 높은지, 어떤 질문에 대한 반응이 좋은지 등을 파악할 수 있다. 예를 들어, 특정 단계에서 이탈률이 높다면 해당 단계의 UI/UX를 개선하거나 질문을 더 명확하게 수정할 수 있다.

A/B 테스트

두 가지 버전의 기능을 비교하여 어떤 것이 더 효과적인지 확인할 수 있다. 예를 들어, 다른 디자인의 버튼이나 다른 문구의 질문을 테스트하여 어떤 것이 더 높은 참여율을 보이는지 확인할 수 있다.

전환율 최적화

데이터 분석을 통해 전환율을 높일 수 있는 방안을 모색할 수 있다. 사용자가 어떤 지점에서 전환(구매, 가입 등)을 포기하는지 파악하고, 해당 지점의 경험을 개선할 수 있다.

사용자 세그먼트 분석

특정 사용자 그룹의 행동 패턴을 파악하여 타겟팅된 전략을 수립할 수 있다. 예를 들어, 모바일 사용자와 데스크톱 사용자의 행동 패턴이 다르다면, 각 그룹에 맞춤화된 경험을 제공할 수 있다.

실시간 모니터링

중요한 이벤트가 실시간으로 어떻게 발생하는지 모니터링할 수 있다. 이를 통해 즉각적인 문제 해결이나 기회 포착이 가능하다.

마케팅 캠페인 성과 측정

다양한 마케팅 채널과 캠페인의 성과를 측정하고 비교할 수 있다. 어떤 채널이 가장 가치 있는 트래픽을 가져오는지 파악하여 마케팅 예산을 효율적으로 배분할 수 있다.

결론

이번 코드 변경 사항은 애플리케이션의 사용자 경험 개선을 위한 중요한 첫걸음이 되었다. Google Analytics를 통한 데이터 수집 및 분석은 데이터 기반의 의사결정을 가능하게 하며, 이는 궁극적으로 더 나은 사용자 경험과 비즈니스 성과로 이어질 수 있다.

앞으로도 지속적으로 데이터를 수집하고 분석하여 사용자 경험을 개선해 나갈 계획이다. 데이터 분석 결과를 바탕으로 더 나은 서비스를 제공할 수 있을 것으로 기대된다.