웹사이트를 운영 중이라면 대부분 추적 코드를 달아서 지표를 확인하는 도구가 구글 애널리틱스(google analytics, 이하 ga)인데요.
당근마켓 웹사이트( https://daangn.com )도 ga를 넣어서 각종 지표를 확인하고 있습니다.
A/B 테스트를 통해서 비교(원래 페이지, 변경 페이지) 해보고 더 나은 선택을 하고 싶다고 생각해 테스트를 진행해 보게 되었습니다.
ga에서는 아래 두 가지 방법으로 자체적으로 A/B 테스트를 지원하고 있습니다.
- 애널리틱스 콘텐츠 실험 도구
곧 지원이 중단된다고 함. Optimize를 통한 실험을 하라고 권장.
실험 목적, 트래픽 비율 등을 설정 가능하고 대안 웹페이지의 url 지정, 지정 ga 코드삽입 으로 구현 - Optimize를 통한 실험(구글 최적화 도구)
사용자가 미리 설정한 대안 페이지를 Optimize가 직접 바꿔주는 방식
버튼의 크기라든지 색깔 변경, 텍스트 문구 변경, 콘텐츠 위치 변경 등에는 위의 방법이 더 편하고 간단합니다. 다만 성격이 다른 동적 데이터를 보여주는 등의 방식에는 오히려 불편합니다.
그래서 맞춤 측정 기준(dimension) + 쿠키로 A/B 테스트를 구현했습니다.
맞춤 측정 기준은 특정 조건으로 구분 키를 세팅하는 것입니다. 기준은 개발자가 여러 가지를 원하는 데로 설정할 수 있는데 ga 자체적으로는 측정할 수 없는 ‘남녀 구분’, ‘활성 유저’, ‘중간 활성 유저’, ‘비활성 유저’ 등 원하는 기준을 마음대로 설정할 수 있습니다.(ga에 set으로 알려줘야 됩니다)
맞춤 측정 기준(dimension) + 쿠키로 A/B 테스트 구현 순서
- ga 관리자 페이지에서 맞춤 측정 기준 추가
- 원하는 비율만큼 쿠키에 값을 넣음(2가지로 구분하고 싶으면 true, false or ‘1’, ’2' 이런 식으로 하고 3~4가지로 구분 하고 싶으면 ‘a’,’b’,’c’로 구분하는 등 구분 키와 비율은 임의로 해도 됩니다
- ga send 호출 전에 ga set으로 해당 쿠키 값을 세팅
- 쿠키 값에 따라 대안 페이지 구현
- ga에서 데이터가 잘 쌓이는지 확인
순서만 쓰면 헷갈리니 제가 구현 한 방법을 그대로 따라가 보도록 하겠습니다.
저의 경우 당근마켓 사이트 대부분의 트래픽을 차지하는 ‘중고 상품 상세페이지’를 변경하여 a/b 테스트를 진행해 보았습니다.
1. ga 관리자 페이지에서 맞춤 측정 기준 추가
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 테스트 진행할 때 쿠키와 맞춤 측정 기준을 활용하는 게 더 쉬운 것같아서 공유합니다.
궁금하신 점, 잘못 작성된 점은 댓글로 알려 주세요. 감사합니다.
