Google Optimize로 A/B 테스트 세팅하기
Google Optimize 세팅하고, A/B test 만들기
웹이나 앱을 서비스하고 있다면 A/B 테스트가 무엇인지, 왜 하는지에 대해서는 이미 잘 알고 있을 것입니다. 하지만 서비스 운영과 개발만으로도 바쁜 상황에서 다양한 형태의 A/B 테스트를 반복적으로 할 수 있는 환경을 세팅하는 일은 우선 순위에서 자꾸 밀리게 될 뿐 만 아니라, 결코 쉽지도 않습니다.
Google이 Optimize 베타 버전을 무료로 공개한 이래로 베타 대상자가 되기만을 기다려오다가, 마침 대상자가 되었다는 메일을 받고 세팅을 해봤습니다. 그 과정을 공유합니다
Optimize 기본 세팅하기
1. 베타 테스터가 된다.
Google Optimize 사이트에서 신청할 수 있다. 당첨(?)이 되는 확실한 방법은 모르겠으나, google cloud platform을 처음 사용하자마자 Optimize 에서 초대장이 날라온 걸 보니, 다른 google 프로덕트 이용과 상관관계가 있을 수도 있을 것 같다.
2. Account, Container를 생성한다.
기본적으로 My Account, My Container라는 이름의 account, container가 등록되어 있었으나, 테스트 환경을 위해 Test Account, Test Container를 새로 등록했다.
Account 화면3. Google Analytics 계정과 연결한다.
Test Container에 들어오면 열리는 오른쪽 온보딩 패널의 2단계이다. 기존에 사용하고 있었던 GA Property를 연결한다. Optimize를 사용할 View도 지정한다. View의 경우 여러개를 지정할 수 있다.
Container에 Google Analytics Property를 연결한다.4. Optimize Snippet를 코드에 삽입한다.
Optimize snippet을 삽입할 단계이다. 위쪽의 기본 script만 사용해도 Optimize를 이용할 수 있지만, 페이지의 번쩍거리는 현상(original 컨텐츠를 로딩한 후 variant가 로딩될 때 발생) 을 막기 위해서 아래의 page hiding script도 함께 이용하는 것이 좋다.
<HEAD> 태그에 두 가지 스크립트를 모두 삽입해준다. 이 때, 순서는 page hiding script -> optimize script 가 되어야 한다.
Tip. 테스트 페이지에서는 snippet을 코드에 직접 추가했지만, 실제 서비스 환경에서는 Google Tag Manager를 이용해 태그를 관리하는 것을 추천합니다.
A/B 테스트 타입 결정하기
[Create Experiment] 버튼을 클릭하면 어떤 형태의 실험을 진행할지 결정하라는 화면이 나온다.
실험 제목과 url을 등록하고 타입을 결정하면 된다. (url의 경우 실제로 사용할 url을 입력하면 되지만, 이번에는 로컬에서 간단한 페이지를 만들어 테스트해볼 것이기 때문에 http://localhost:5000 라고 등록해줬다.)
실험 타입의 경우 3가지가 존재한다.
- A/B test (A/B/n test)
기존 페이지(original)와, 특정 요소를 변경한 페이지(variant)를 비교하는 테스트 방법이다.
- Multivariate test
A/B test와 유사하나, 여러 요소를 변형하여 테스트하고 싶을 때, 조합을 만들어서 테스트하는 방법이다.
예를 들면 상단 이미지 영역이 a, b의 2가지, 하단 우측 이미지 영역이 c, d의 2가지라고 했을 때 (a, c), (a, d), (b, c), (b, d) 의 4가지 조합을 이용해 (참고:
by Optimizely)
Multivariate test. 출처: apptimize.com- Redirect test
url이 다른 여러 페이지를 비교하는 방법이다. 기존 Google Analytics의 experiment와 같은 방법이다.
A/B test 타입 실험 만들어보기
가장 간단하게 진행해 볼 수 있는 A/B test 타입 실험을 먼저 생성해봤다.
부트스트랩을 이용하여 만든 간단한 사이트의 Welcome 페이지이다. original 버젼은 그대로 두고, 하단 Learn more 버튼의 텍스트를 “About Me” 로 바꾼 안(Variant 1)과 버튼 컬러를 푸른색으로 바꾼 안(Variant 2) 두 가지를 테스트하기로 했다.
[New Variants] 버튼을 클릭하여 2개의 Variant를 등록했다.
Original과 2개의 Variant.각 Variant를 클릭하면 실험을 등록할 때 설정한 url의 웹사이트가 visual editor와 함께 뜬다(Chrome extension 설치 필요). 여기서 어떤 부분을 어떻게 변경할 것인지 쉽게 설정할 수 있다.
Visual Editor로 Variant 편집하기
Variant를 클릭하면 뜨는 페이지는 처음에는 original과 똑같다. 여기서 변경할 부분을 마우스로 클릭해서 선택하거나, element ID나 Class를 이용해 찾아줄 수 있다.
좌측 상단의 Select elements 버튼을 클릭하면 나오는 메뉴.Tip. class로 변경하고자하는 element를 지정할 경우, 의도치않게 다른 element에 영향을 줄 수 있다는 점을 유의하셔야 합니다. 또, selector로 사용한 부분을 HTML으로 수정할 경우 정상적인 테스트가 불가능합니다. (ex. #element-1 이란 ID의 element를 변경 대상으로 한 후 variant에서 #element-2로 ID를 변경하는 것은 안됩니다)
간단하게는 Text, HTML, Attribute, Style을 수정할 수 있고, Element의 순서를 바꾸거나(Reorder), 스크립트를 추가할 수도 있다(Javascript).
버튼 텍스트를 Learn more -> About Me로 변경해 보았다. 참 쉽죠?몇가지 부분이 변경 되었는지 상태표시줄에 보이며, 그 부분을 클릭하면 변경사항 목록을 볼 수 있다.
Original, Variant 1, Variant 2Variant 편집이 끝났다면, 실험에 필요한 다른 부분들을 세팅해줘야 한다.
Objectives, Targeting 설정하기
Variants 하단의 Configurations 영역에서는 Objectives, Targeting 을 설정할 수 있다. 설정을 마친 후에야 A/B test 진행이 가능하다.
먼저, Objectives 탭에서는 말 그대로, 실험의 목적을 결정한다. 최대 3개까지 결정할 수 있다.
Experiment objectives기본적으로 Pageviews, Session Duration, Bounces 세 가지를 이용할 수 있고, 연결된 Google Analytics Property 에서 설정한 Goal을 실험 목적으로 설정할 수도 있다.
Tip. 실제 이런 실험을 하게 된다면 CTA 버튼의 클릭을 GA event 로 보내고, 이 event로 Goal을 만들어 Primary Objective로 사용하는 방법을 추천합니다.
Targeting 탭에서는 Original 과 모든 Variant에 대한 distribution과, 어떤 조건에서 실험을 실행할 것인지 결정할 수 있다.
좌측: distribution, rule 결정 화면 / 우측: rule 상세화면이렇게 모든 세팅을 마쳤으면 상단의 START EXPERIMENT 버튼이 활성화되며, 클릭하여 실험을 시작할 수 있다. 한 번 시작하면 Variant나 조건 등을 수정할 수 없으므로 최종적으로 한 번 점검하고 진행하는 것을 권한다(혹시 세팅을 잘못했다면 중단하고 기존 실험을 복사하여 사용할 수 있다).
서버를 실행한 후 Chrome incognito mode에서 여러 번 창을 띄워 확인해보면 original과 2개의 variant가 랜덤하게 뜨는 것을 볼 수 있다(일반 chrome 창에서는 처음 노출된 안만 계속 보인다).
이상으로 Google Optimize를 세팅하고, 간단하게 A/B test를 만드는 방법을 알아보았습니다. MVT(Multivariate test)와 Redirect test에 대해서는 이어지는 포스팅에서 다루도록 하겠습니다.
실험에 사용한 간단한 static page 코드는 여기서 확인할 수 있습니다.
