⑱ 베일에 싸인 A/B 테스트 도구, 구글 옵티마이즈
그로스 마케팅 파트너 허들러스
18. 베일에 싸인 A/B 테스트 도구, 구글 옵티마이즈
안녕하세요. 그로스 마케팅 파트너 허들러스의 유성민 대표입니다. 허들러스는 데이터에 기반한 비즈니스 성장의 방법론은 연구하며 컨설팅을 진행해드리고 있습니다. 앞으로 브런치에 구글 애널리틱스의 관련된 글을 순차적으로 연재해나갈 예정입니다 :) 오늘은 그 연재의 열여덟 번째 이야기를 진행해보도록 할게요.
Google Optimize는 말 그대로 A/B 테스트를 쉽게 진행할 수 있도록 도와주는 툴입니다. 하지만 아직 한국에서는 이 A/B 테스트를 많이 활용하고 있는 기업은 전무하다시피 합니다. 하지만, A/B 테스트는 아주 자그마한 노력이나 변화로도 큰 성과를 만들어낼 수 있는 비즈니스에서 굉장히 효율적으로 성과를 내는 방법론이며, 흔히 말하는 그로스 해킹의 꽃과 같은 역할을 합니다.
우선 여러분들이 A/B 테스트가 무엇인지부터 알아야겠지요? 약간은 홍보를 하는 것 같아 송구하지만, 허들러스 역시 어떤 브랜드의 A/B 테스팅을 도와드리고 있습니다. [위클리 랩]이라는 건강 기능 식품 브랜드는 상세페이지의 내용을 바꾸지 않고, 오직 UX의 변경만으로도 엄청난 변화를 이끌어냈습니다.
우선 위클리 랩은 미디어 커머스 기반의 여성 건강 기능 식품을 판매하는 쇼핑몰입니다. 해당 브랜드의 문제점은, 페이스북 광고에 대한 의존도가 매우 높았다는 것입니다. 페이스북 광고를 통해 바로 제품 상세페이지로 방문을 하고, 사실은 네이버나 구글과 같은 자연 검색을 통해 들어오는 유저들의 매출은 전체의 10%에 불과했습니다.
90%의 유저들이 광고를 통해 유입된 사용자들입니다. 우리가 모두 알다시피 자연적으로 키워드를 검색해서 들어오는 유저들보다는, 광고를 통해서 들어오는 유저들의 품질이 낮은 경향이 있습니다. 품질이 낮다는 것은 당연히 구매 전환율이 상대적으로 떨어지고, 아무것도 하지 않고 나가는 비율 , 즉 이탈률이 상대적으로 높은 것을 의미합니다.
트래픽은 충분히 많이 들어오고 있는 상황에서, 광고 유입자들이 대부분이다 보니, 거래로 이어지는 전환율이 낮았던 것입니다. 하지만 광고단에서의 성과가 나쁜 것은 아니었습니다. 클릭률도 높았고, CPM도 낮았기 때문입니다. 그렇기 때문에, 상세페이지에서 변화를 줘서 최종 거래 전환율을 끌어올릴 필요가 있었습니다.
그래서 상기 이미지와 같은 시도들을 했습니다.
1) 위클리 랩의 가격이 눈에 잘 띄지 않아, 소비자가와 판매가를 크게 강조하고, 그 옆에 할인율을 덧붙였습니다.
2) 광고를 통해 들어오는 사용자들이 호기심을 가지고 , 제품을 조금이나마 읽을 수 있도록 하기 위해, 상세페이지 상단에 매우 큰 글씨로 해당 제품의 누적 판매량과 평점을 제시하여, 주목도를 확보하였습니다.
3) 위클리 랩의 제품 발송시간은 매일 오후 1시 30분까지 였습니다. 즉 1시 30분 전에 주문을 하게 되면, 당일 발송이 가능했기 때문에, 당일 발송까지 남은 시간을 카운트다운하는 시계를 만들어서 배치해두었습니다.
이렇게 개선이 될 것이라 예상하고 수정한 상세페이지를 우리는 [대안 페이지]라고 부릅니다. 그리고 수정 작업을 하기 전 원래 위클리 랩의 상세페이지를 [원본 페이지]라고 합니다. 보통은 원본 페이지를 A페이지, 대안 페이지를 B페이지로 불러, A/B 테스트가 되는 것입니다. 하지만, 원본 페이지와 대안 페이지를 다른 일자에 각각 따로 보여주는 것은 결과치 확보에 시간도 오래 걸릴뿐더러, 기간에 따라 매출 변동성이 높은 브랜드의 경우, 데이터의 신빙성이 떨어질 수 있습니다. 구글 옵티마이즈는 이러한 것들을 해결해줍니다. A페이지와 B페이지를 한 개씩 보여주는 것이 아니라, 동기간 동안 동시에 노출하는 것입니다. 만약에 1주일 동안 100명이 들어왔다고 가정하면, 랜덤으로 50명한테는 A페이지를 보여주고, 나머지 50명한테는 B페이지를 보여줍니다. 그리고, 구글 애널리틱스와 연동하여, A페이지의 결제 전환율과 B 페이지의 결제 전환율을 비교합니다.
결과적으로는 B 페이지의 구매전환율이 A페이지보다 약 69% 상승하였고, 같은 광고비를 사용했음에도 불구하고, 매출은 2.5배 증가하였으며, 이탈률은 26% 감소하였고, 회원가입 전환율은 66% 증가하였습니다. 저희 같은 전문가들은 저런 대안 페이지를 만드는 데에는 2시간도 걸리지 않습니다. 2시간의 노력으로 매출을 2.5배 성장시켰다면, 매우 효율적인 방법론이라는 것이 증명된 셈입니다. 물론, 모든 A/B 테스트가 성공하는 것은 아닙니다. 하지만, 끊임없는 전환율 개선을 위해서 A/B 테스트를 통해 전환율을 최적화한다면, 단순히 광고 쪽만 신경 쓰는 것이 아닌, 웹사이트 자체를 신경 쓰는 것이기 때문에, 비즈니스는 자연스럽게 성장할 것입니다.
해당 강의는 구글 애널리틱스에 대한 강의라서 아쉽게도 구글 옵티마이즈에 대한 자세한 설명은 생략합니다. 하지만 구글 애널리틱스, 구글 태그 매니저, 그리고 구글 옵티마이즈의 연동 방법까지는 안내드리려고 합니다.
웹 창에서 구글 옵티마이즈를 검색하여, 가장 상단에 나오는 Google Optimize 영역을 클릭해 줍니다.
계정 만들기를 통해, 새로운 실험을 진행할 우리 비즈니스 계정을 만들어 줍니다. 구글 계정이 있으면 구글 옵티마이즈 계정은 무한으로 생성할 수 있으며, 모두 무료입니다. 유료 버전도 있긴 하나, 사실 글로벌 비즈니스가 아닌 이상은 아직은 크게 필요가 없습니다.
다양한 약관 동의를 한 다음에 [다음] 버튼을 눌러줍니다.
컨테이너 추가라는 영역이 보입니다. 구글 옵티마이즈 역시 구글 태그 매니저와 마찬가지로 [계정] - [컨테이너] 순으로 단위가 설정되어 있습니다. 컨테이너 이름은 여러분들이 알아볼 수 있으면 상관없습니다. 저는 [래빗_테스트]로 컨테이너의 이름을 만들고, [만들기] 버튼을 눌러보겠습니다.
처음으로 컨테이너를 만들면 저처럼 이렇게 화면이 나타납니다. 우선 보이시는 화면에서 오른쪽에 있는 영역은 구글 옵티마이즈와 구글 태그 매니저, 구글 애널리틱스를 연동하는 방법을 안내하고 있습니다. 그리고 왼쪽에 있는 영역에서 우리는 실험 환경을 만들고, 그 실험 환경 안에서 대안 페이지를 디자인할 수 있습니다. 우선은 디자인을 하기 전에 연동 작업을 안내드리겠습니다. 연동 작업의 순서는 하기와 같습니다.
1) 구글 태그 매니저에서 구글 옵티마이즈 태그 추가
2) 구글 옵티마이즈 태그에 구글 애널리틱스 계정 연동
3) 구글 옵티마이즈에서 환경 만들기 시작
순으로 진행이 됩니다. 일단은 구글 옵티마이즈 태그를 만들기 위해 구글 태그 매니저로 이동합니다. 구글 옵티마이즈는 A/B 테스팅을 도와주는 도구입니다. 우리는 어떤 페이지를 실험할지는 아직 정해지지 않았습니다. 그래서 일단은 모든 페이지에 구글 옵티마이즈가 작동할 수 있도록 세팅을 하고자 합니다.
태그 매니저의 [태그] 영역으로 이동하여, [새로 만들기]를 통해 새로운 태그를 만들어 줍니다.
태그의 이름은 구글 옵티마이즈로 적어두었습니다. 태그 구성의 빈 영역을 클릭합니다.
우리는 구글 애널리틱스로 데이터를 보내기 위해서 태그를 만드는 것이 아닙니다. 구글 옵티마이즈를 우리 웹사이트에 적용하기 위해서 태그를 만들어주는 것이지요. 그래서 태그 유형은 [Google Optimize]입니다. A/B 테스트를 지원해주는 명령어를 우리 웹사이트에 설치한다고 생각해주시면 됩니다.
구글 옵티마이즈 태그를 선택하게 되면, 컨테이너 정보를 적으라는 란이 나옵니다. 여기서 말하는 컨테이너는 구글 태그 매니저의 컨테이너가 아닌, 구글 옵티마이즈의 컨테이너입니다. 아까 전 만들어둔 구글 옵티마이즈 계정 영역의 왼쪽에서 컨테이너를 찾으실 수 있습니다. 해당 구글 옵티마이즈 컨테이너 계정을 복사합니다.
그대로 [컨테이너 최적화] 영역에 우리가 복사해두었던 구글 옵티마이즈 컨테이너를 붙여 넣기 하고, 구글 애널리틱스와도 데이터를 연동하기 위해, Google 애널리틱스 설정란에 우리가 미리 만들어두었던 사용자 정의 변수인 GAID를 넣습니다. 그러고 나서, 트리거 영역으로 이동합니다.
구글 옵티마이즈는 말 그대로 우리 웹사이트에 있는 모든 웹페이지에서 발동이 되어야 합니다. 우리가 어느 페이지를 실험할지는 아직 모르기 때문이지요. 그래서 트리거는 구글 태그 매니저에서 기본적으로 제공해주고 있는 All pages 트리거를 선택해줍니다.
이렇게 세팅을 하면 모두 완성입니다. 우리는 명령어를 쉽게 설치해줄 수 있는 구글 태그 매니저, 데이터를 볼 수 있는 구글 애널리틱스 , A/B 테스트를 진행할 수 있는 구글 옵티마이즈 3개의 툴을 하나의 태그로 묶어주었습니다. [저장] 버튼을 누릅니다.
당연히 구글 옵티마이즈 태그를 새롭게 발행할 것이기 때문에 버전에 대한 이름과 설명을 적어줍니다.
그리고 구글 옵티마이즈로 돌아와서, [시작하기] 버튼을 눌러, 새로운 환경을 만들어 줍시다. 새로운 환경을 만들게 되면, URL을 적으라는 란이 나타납니다.
저는 제 블로그에 있는 수십 개의 웹페이지들 중에서, onedge1.tistory.com/60이라는 페이지를 A/B 테스트를 진행코자 합니다. 그래서 해당 URL을 그대로 복사합니다.
환경의 이름과 수정할 페이지를 적어주었습니다. 그리고 아래쪽에는 환경의 유형을 선택하라는 란이 나타납니다. 하나씩 설명해드릴게요.
1) A/B 테스트 : 말 그대로 대안 페이지 1개와 원본 페이지 1개를 동시에 노출시키면서 테스트를 진행하는 유형입니다.
2) 다변수 테스트 : 변수가 많은 것을 의미하겠지요? 대안 페이지가 2개 이상일 때에는 다변수 테스트를 진행합니다.
3) 리디렉션 테스트 : 사실 A/B 테스트를 진행하게 되면, URL은 동일하되 랜덤으로 원본 페이지와 대안 페이지가 나타납니다. 하지만 리디렉션 테스트를 진행하게 된다면, 실제로 해당 유저가 원본 페이지에 들어오는 순간 제가 별도로 만든 URL이 바뀐 대안 페이지로 다시 리디렉션(재 설정)되는 원리입니다.
4) 맞춤 설정 : 특정 행동을 완료한 세그먼트들만 실험의 대상이 되도록 설정할 수 있습니다. 하지만, 해당 기능은 구글 옵티마이즈의 유료버전인 옵티마이즈 360에서만 진행 가능합니다.
우리는 기존에 하고자 했던 A/B 테스트를 환경 유형으로 선택하여, 오른쪽 상단 [만들기] 버튼을 눌러보겠습니다.
만들기를 눌러 환경 세팅 영역으로 들어왔습니다. 처음부터 간략히 정리드리면, 제일 처음 우리는 구글 옵티마이즈 계정을 만들었고, 실험을 진행할 컨테이너를 만들었고, 그 구글 옵티마이즈 컨테이너 내에서 환경을 만들어준 것입니다. 계정에는 여러 개의 컨테이너가 들어올 수 있고, 컨테이너에는 여러 개의 환경을 구성할 수 있습니다. 서로 다른 실험을 동시에 진행할 수도 있습니다. 파란색으로 나타나 있는 [대안 추가] 버튼을 눌러줍시다.
대안 페이지에도 이름을 적어줄 수 있습니다. 저 같은 경우엔 보통 환경에서 실험의 이름을 적어주는 편이라, 해당 대안 페이지의 이름은 그냥 대안 페이지 1로 설정을 하겠습니다. 여러분들이 좀 더 직관적으로 알고 싶다면, [리뷰 버튼 컬러 변경]과 같이 특정 요소가 변경될 상태를 대안 페이지의 이름으로 설정해두어도 좋습니다. [완료] 버튼을 눌러 최종적으로 대안 페이지를 생성합니다.
대안 페이지를 만들게 되면, 원본 페이지와 대안 페이지로 1개의 페이지가 2개로 나눠지는 것을 볼 수 있습니다. 보이시는 가중치는 5:5의 비율로 사용자들에게 랜덤으로 원본 페이지와 대안 페이지를 노출시키겠다는 표시이며, 해당 비율을 여러분들이 직접 바꿀 수도 있습니다. 대안 페이지를 1개 만들었다고 해서, 지금 원본 페이지와 다를까요? 당연히 아닙니다. 위 빨간 글씨가 말해주는 대로, 현재 대안 페이지는 처음 만든 상황이기 때문에, 변경사항이 0개입니다. [수정] 버튼을 눌러, 직접 변경을 해봅시다.
수정 버튼을 누르면 수정할 편집기가 우리 웹사이트에 설치가 됩니다. 하지만, 편집기를 사용하기 위해서는 구글 옵티마이즈를 활용하여 우리 웹 페이지를 변경시켜줄 수 있는 확장 프로그램을 설치해야 합니다. 그래서 우리는 [확장 프로그램 설치]를 눌러 구글 옵티마이즈 확장 프로그램을 설치해보겠습니다.
Google Optimize라고 된 확장 프로그램을 [Chrome에 추가] 버튼을 눌러 설치를 해줍니다. 간단하죠?
확장 프로그램 설치 후, 다시 [수정] 버튼을 누르게 되면, 제가 아까 전에 편집을 진행하겠다고 지정한 URL로 이동하여, 편집기와 제 웹페이지가 함께 나타나는 것을 볼 수 있습니다.
Share this Post 버튼의 크기를 좀 더 크게 만들고 싶다면, 해당 버튼을 누른 뒤, 오른쪽 하단 편집기 영역에서 텍스트의 크기를 키워주면 해당 버튼이 커진 것을 볼 수 있습니다.
이렇게 텍스트의 컬러도 바꿀 수 있습니다. 신기하죠?
또 제목을 한번 바꾸어서 테스트를 하고 싶다고 한다면, 제목 영역에 마우스를 갖다 대고, 오른쪽 마우스를 누르면 [텍스트 수정] 영역이 나타납니다. [텍스트 수정]을 한번 눌러보겠습니다.
텍스트 수정을 눌렀더니, 제목 영역에 제가 직접 텍스트를 수정할 수 있게 되었습니다. 이처럼 코딩하나 필요 없이 특정 버튼의 크기를 바꾼다거나, 텍스트 컬러, 그리고 텍스트 자체를 변경할 수 있습니다. 사실은 기존 웹 개발에서는 컬러를 하나 바꾸는 것도 코딩 작업을 거쳐야 했지만, 구글 옵티마이즈에서는 비전문가도 쉽게 특정 요소를 바꿀 수 있도록 굉장히 쉽게 설계되어 있는 것을 알 수 있습니다.
이제 마지막으로 저장 버튼을 눌러, 변경된 대안 페이지를 저장해주면 모두 끝나게 됩니다.
이렇게 변경된 대안 페이지와 원본 페이지를 랜덤으로 50%에게는 A페이지를 보여주고, 나머지 50%에게는 B페이지를 보여줌으로써, 어느 페이지가 우리의 KPI를 더 잘 달성하는지 까지 조회할 수 있게 됩니다.
