구글 애널리틱스 A/B 테스트 쉽게 하기(쿠키 + dimension 활용) 🐿

willy
willy
May 27 · 5 min read

웹사이트를 운영 중이라면 대부분 추적 코드를 달아서 지표를 확인하는 도구가 구글 애널리틱스(google analytics, 이하 ga)인데요.
당근마켓 웹사이트( https://daangn.com )도 ga를 넣어서 각종 지표를 확인하고 있습니다.
A/B 테스트를 통해서 비교(원래 페이지, 변경 페이지) 해보고 더 나은 선택을 하고 싶다고 생각해 테스트를 진행해 보게 되었습니다.

ga에서는 아래 두 가지 방법으로 자체적으로 A/B 테스트를 지원하고 있습니다.

  • 애널리틱스 콘텐츠 실험 도구
    곧 지원이 중단된다고 함. Optimize를 통한 실험을 하라고 권장.
    실험 목적, 트래픽 비율 등을 설정 가능하고 대안 웹페이지의 url 지정, 지정 ga 코드삽입 으로 구현
  • Optimize를 통한 실험(구글 최적화 도구)
    사용자가 미리 설정한 대안 페이지를 Optimize가 직접 바꿔주는 방식

버튼의 크기라든지 색깔 변경, 텍스트 문구 변경, 콘텐츠 위치 변경 등에는 위의 방법이 더 편하고 간단합니다. 다만 성격이 다른 동적 데이터를 보여주는 등의 방식에는 오히려 불편합니다.

맞춤 측정 기준은 특정 조건으로 구분 키를 세팅하는 것입니다. 기준은 개발자가 여러 가지를 원하는 데로 설정할 수 있는데 ga 자체적으로는 측정할 수 없는 ‘남녀 구분’, ‘활성 유저’, ‘중간 활성 유저’, ‘비활성 유저’ 등 원하는 기준을 마음대로 설정할 수 있습니다.(ga에 set으로 알려줘야 됩니다)

맞춤 측정 기준(dimension) + 쿠키로 A/B 테스트 구현 순서

  1. ga 관리자 페이지에서 맞춤 측정 기준 추가
  2. 원하는 비율만큼 쿠키에 값을 넣음(2가지로 구분하고 싶으면 true, false or ‘1’, ’2' 이런 식으로 하고 3~4가지로 구분 하고 싶으면 ‘a’,’b’,’c’로 구분하는 등 구분 키와 비율은 임의로 해도 됩니다
  3. ga send 호출 전에 ga set으로 해당 쿠키 값을 세팅
  4. 쿠키 값에 따라 대안 페이지 구현
  5. ga에서 데이터가 잘 쌓이는지 확인

순서만 쓰면 헷갈리니 제가 구현 한 방법을 그대로 따라가 보도록 하겠습니다.
저의 경우 당근마켓 사이트 대부분의 트래픽을 차지하는 ‘중고 상품 상세페이지’를 변경하여 a/b 테스트를 진행해 보았습니다.

1. ga 관리자 페이지에서 맞춤 측정 기준 추가

맞춤 측정 기준은 무료기준 최대 20개까지 생성할 수 있습니다. 수정은 되지만 삭제는 불가합니다.

2. 원하는 비율과 값을 쿠키에 넣음
저의 경우 대안 페이지는 하나였고 전체 유저의 20% 유저에게만 적용하려고 아래 서버 함수(ruby on rails)를 적용했습니다. 쿠키 키는 ‘dimension2’, 값은 ‘true’ OR ‘false’.

def set_dimension2  if cookies[:dimension2].blank?    random_number = rand(1..10)    cookies.permanent[:dimension2] = random_number < 3 ? 'true' : 'false' # 20퍼센트만 true로 저장  endend

위 함수를 당근마켓 웹사이트 접속시 before_action으로 쿠키 값이 저장되게 합니다.

3. ga send 호출 전에 ga set 으로 해당 쿠키값을 세팅

ga('create', 'UA-XXXX-Y', 'auto');ga('set', 'dimension2', 'dimension2의 쿠키값-20%만 true');ga('send', 'pageview');

꼭 ga(‘send’, ‘pageview’) 전에 set을 먼저 해줘야 합니다. ga 호출을 보낼 때 맞춤 측정 기준이 세팅된 상태로 ga 데이터가 쌓이게 됩니다.

4. 쿠키 값에 따라 대안 페이지 구현

<% if cookies[:dimension2] == 'true' %>  <%= render 'article_test', article: @article %><% else %>  <%= render 'article', article: @article %><% end %>

위 코드는 ruby on rails의 view template 코드입니다.
쿠키로 분기를 태워서 대안 페이지를 보여주는 예시입니다.

5. ga에서 데이터가 잘 쌓이는지 확인

ga에서 데이터가 잘 쌓이는지 보겠습니다. 저는 중고 상품 상세페이지의 이탈률을 비교하고 싶었습니다. 세그먼트를 먼저 만들고 비교하면 더 보기 편합니다.

세그먼트 만들기

변경했던 페이지(저의 경우 상세페이지) 와 보고 싶은 지표(이탈률) 조건을 걸어서 비교하면 아래와 같이 비교해서 볼 수 있습니다.

연관 항목을 다른 걸 보여줬는데 이탈률이 낮아졌다!

작업하는 건 그렇게 어렵지 않은데 글과 사진으로만 설명하려니 길어지고 어려워진 것 같네요. 개발자 입장에서 동적 페이지를 a/b 테스트 진행할 때 쿠키와 맞춤 측정 기준을 활용하는 게 더 쉬운 것같아서 공유합니다.

궁금하신 점, 잘못 작성된 점은 댓글로 알려 주세요. 감사합니다.

참고자료

당근마켓 팀블로그

당근마켓은 동네 이웃 간의 연결을 도와 따뜻하고 활발한 교류가 있는 지역 사회를 꿈꾸고 있어요.

willy

Written by

willy

당근마켓 팀블로그

당근마켓은 동네 이웃 간의 연결을 도와 따뜻하고 활발한 교류가 있는 지역 사회를 꿈꾸고 있어요.