Skip to content

GA로 사용자 데이터 수치화하기

Jump to bottom
Gyeungil Choi edited this page Jan 26, 2025 · 9 revisions

1️⃣ 문제 식별

이전에 SEO와 Open Graph를 활용하여 사용자 유입률을 높이고 접근성을 개선한 경험이 있다.

하지만, 이를 실제 지인들을 대상으로 테스트했기 때문에 정확한 데이터를 기록하거나 분석하지 못했다.

이에 따라 유입 경로, 이탈률, 사용 빈도가 높은 페이지 등 사용자 행동 데이터를 기반으로 정확한 수치를 분석할 필요가 있다는 점을 느낌.


2️⃣ 관련 지식

“유입 경로”, “이탈률”, “사용 빈도가 높은 페이지” 등등

이를 Google Analytics를 통해 수행할 수 있다는 것을 알게 되었다.

그런데 Google Analytics말고도 Google Tag Manager라는 기능도 있었다. 둘 다 데이터를 수집하고 분석하는 도구처럼 보여서 어떤걸 써야하는지 혼동스러웠다.

✏️ Google Analytics (GA)

1

  • 주요 목적: 데이터를 추적하고 저장하며 웹사이트에 대한 보고서를 생성.
  • 사이트에서 상호작용이 발생하면 데이터를 GA로 보낸다.
  • 핵심 기능
    • 사용자 수
    • 접속한 지역
    • 이탈률
    • 방문한 페이지

✏️ Google Tag Manager (GTM)

2

  • GTM 스크립트 삽입 후, GA(여러 툴)를 연결한다.
  • 여러 툴을 관리할 수 있게 해주는 중간 다리 역할
  • GA와 같은 툴을 관리하게 해줌
  • GA에 추적 코드를 쉽게 추가, 규칙을 정의함
  • 사용 목적
    • 자바스크립트 추적 코드 관리 가능 (GA는 이 심어진 코드를 바탕으로 분석 보고서를 제공함)

✏️ GA vs GTM

  • 비유
    • GA: 각 기계를 개별적으로 설치하고 조작해야 함.
    • GTM: 모든 기계를 한 번에 제어할 수 있는 중앙 장치.
  • 차이
    • GA 단독 사용: 새로운 추적 스크립트 추가 시 HTML 파일을 수정하고 배포가 필요.
    • GTM 사용: GTM 코드만 추가하면 이후 모든 사이트의 태그 관리는 GTM 인터페이스에서 처리, 추가 배포 불필요.

결론: 난 GA만 사용했다. 한 사이트 대상으로만 할 것이기 때문.


3️⃣ 적용 과정

✏️ GA 구현 방법

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-SMXGZQRD0S"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag('js', new Date());
  gtag('config', 'G-SMXGZQRD0S');
</script>
  • 해당 코드를 index.html의 <head> 요소에 넣으면 된다

3

  • 첫 페이지 로드에 js?id=트래킹ID 이 로드되는 것을 확인 할 수 있다.

설명

<script async src="https://www.googletagmanager.com/gtag/js?id=G-SMXGZQRD0S"></script>
  • gtag.js 스크립트 로드
    • gtag.js는 GA와 통신하고 데이터를 전송하는데 필요한 함수와 메커니즘 제공
window.dataLayer = window.dataLayer || [];
  • dataLayer 초기화
    • dataLayer는 GA에서 사용하는 데이터 저장소로, 이벤트 데이터를 저장하는 배열
      • window.dataLayer가 존재하면 사용하고, 없으면 빈 배열로 초기화
      • 이 배열은 모든 추적 데이터를 저장하고, 나중에 gtag 함수가 이를 사용해 데이터를 처리
function gtag() {
	dataLayer.push(arguments);
}
  • 추적 데이터를 dataLayer에 추가하는 함수
    • arguments: gtag 함수에 전달된 모든 매개변수는 dataLayer 배열에 푸쉬된다.
    • ex) gtag('config', 'G-SMXGZQRD0S')가 호출되면 배열에 [ 'config', 'G-SMXGZQRD0S' ] 형태로 추가.
gtag('js', new Date());
  • Analytics 초기화 이벤트를 기록
    • 'js' 는 GA에서 사용자를 식별하는 특별한 이벤트
    • new Date() 는 초기화가 발생한 시간을 기록함
gtag('config', 'G-SMXGZQRD0S');
  • 추적 ID(G-SMXGZQRD0S)를 사용해 GA를 구성하고 설정합니다.
    • config: 기본 페이지 조회 데이터를 전송하고, 설정된 ID와 연동.
    • 이후 사용자 방문 정보는 이 추적 ID와 연결되어 GA에 전송된다.

✏️ 코드에서 gtag란 뭘까?

  • gtag(Global Site Tage)는 구글 마케팅 생태계(GA4, Google ADs 등)와 함께 사용할 수 있는 태그.
  • gtag는 웹 페이지에 JavaScript 코드를 삽입하여 사용자의 상호작용 및 페이지 이벤트를 모니터링하고 데이터를 Google의 분석 도구로 전송한다.
  • gtag는 코드 스니펫을 웹 페이지에 직접 추가하는 방식으로 구현된다. GTM은 단일 코드 스니펫만 페이지에 추가한 후 대시보드에서 모든 태그 및 스크립트를 관리한다.

✏️ React는 SPA인데 어떻게 페이지별 정보를 얻어올까?

  • 전제 조건: react-router-dom 같은 클라이언트 기반 라우터를 사용하고 있어야 한다.
    • React 라우터는 페이지 이동 시 브라우저의 History API(예: pushState, replaceState)를 사용해 URL을 변경한다.
    • GA는 이 히스토리 변경 이벤트를 감지하여 새로운 페이지뷰로 간주한다
  • gtag('config', 'G-SMXGZQRD0S') 설정은 기본적으로 페이지 URL과 제목을 자동으로 수집한다.
  • 리액트 라우터에서 URL이 변경되면 GA는 새로운 페이지 데이터를 전송한다.

4️⃣ 수치화된 결과

✏️ 실시간 개요

4

  • 최근 30분간 서비스를 사용한 사람들의 수와 사용한 지역을 확인할 수 있다.
  • 어떤 페이지를 들어갔는지와 어떤 동작을 했는지도 기록이된다.

✏️ 보고서 개요

image

  • 총 사용자 수와 평균 사용시간을 확인할 수 있다.
  • 지난 30분간 사용했던 사용자들의 위치들도 표시가된다.
  • 페이지별 총 조회수도 기록된다.
  • 페이지별 평균 참여율도 확인할 수 있다.
  • 사용자가 주기적으로 들어오는지를 확인하는 유지율도 확인할 수 있다.
  • 신규 사용자가 어떤 경로로 들어왔는지 확인할 수 있다.
    • Direct: 웹사이트 URL을 직접 입력하거나, 북마크를 통해 방문한 경우.
    • Referral: 외부 링크를 클릭해서 들어온 경우. (Github링크, 카톡 공유 링크 등등...)
    • Organic Search: Google, Bing, Naver와 같은 검색 엔진을 통해 들어온 경우.
  • 어떤 브라우저를 사용해서 서비스에 접속했는지 총 집계를 볼 수 있다.

  • 총 사용자들의 유입 경로들도 볼 수 있다.
  • 총 사용자들의 국가별 분류도 볼 수 있다.
  • 신규 사용자와 재방문자도 비교해서 그래프로 확인 가능하다.
  • 1일, 7일, 30일 단위로 활성 사용자 수를 확인할 수 있다.
  • 총 사용자들의 이벤트 종합결과도 볼 수 있다.
    • page_view: 용자가 웹페이지를 방문하거나 페이지를 새로고침할 때 발생.
    • scroll: 사용자가 페이지를 스크롤하여 전체 콘텐츠 중 일정 비율(보통 90% 이상)을 본 경우 발생.
    • user_engagement: 사용자가 웹사이트에서 일정 시간(기본적으로 10초 이상) 머물거나, 중요한 동작(클릭, 스크롤 등)을 수행했을 때 발생.
    • session_start: 사용자가 웹사이트를 처음 방문하여 세션(session)이 시작될 때 발생.
    • first_visit: 웹사이트에 처음 방문한 신규 사용자를 기록.

✏️ 팀원들과 GA 데이터 공유

6

  • Google Analytics 설정 → 계정 → 계정 엑세스 관리 → 팀원 gmail 추가
  • 팀원분은 구글 로그인 후 공유한 링크를 들어가면 됩니당

✏️ 참여율, 이탈률

image

  • 홈 페이지의 참여율은 71.9%, 작업 공간 페이지의 참여율은 82.4% 인 것을 확인할 수 있다.

  • 이탈률 = 100% - 참여율

  • 공식 문서 용어 설명

    • 참여 세션은 다음 기준 중 하나를 충족하는 세션입니다.
      • 10초 이상 지속됨
      • 주요 이벤트가 있음
      • 화면 또는 페이지 조회수가 2회 이상임
    • 참여율은 웹사이트 또는 모바일 앱에서 참여 세션의 비율.
    • 이탈률은 참여하지 않은 세션의 비율.
    • EX) 예를 들어 사용자가 웹사이트를 방문하고 10초 미만 동안 콘텐츠를 읽은 다음 나갔습니다. 사용자는 웹사이트에 머무는 동안 이벤트를 트리거하거나 다른 페이지를 방문하지 않았습니다.이 경우에는 사용자가 참여 세션의 어떤 기준과도 일치하지 않기 때문에(세션이 10초 미만이고 주요 이벤트가 발생하지 않았으며, 페이지 조회 또는 화면 조회가 2회 이상 발생하지 않음) 세션은 참여 세션으로 집계되지 않습니다. 이 세션이 웹사이트의 유일한 세션인 경우 참여율은 0%, 이탈률은 100%가 됩니다.

🍀 결론

  1. 서비스 유입률이 30%에서 60%로 증가한 것을 확인할 수 있었다.

  2. 유입 경로는 직접 URL 입력으로 들어오는 부분이 가장 컸다. (실 사용자보다는, 개발 중 테스트로 높은 수치가 생긴 듯 하다)

  3. 우리 BooLock 서비스의 평균 이탈률은 20% 정도이므로, 밑의 웹 사이트 별 평균 이탈률과 비교하면 상당히 낮은 수치임을 확인할 수 있었다 👍


🌐 참고 자료

🛠️ 리팩토링

✍️ 개선 기록

📆 주차별 계획

🌐 기존 서비스

Clone this wiki locally