워드프레스 쇼핑몰 - A/B 테스트를 품다
Google Analytics를 활용한 A/B 테스트 활용법
측정 > 개선 > 공개 > 측정 > 개선 > 공개
마케터, 디자이너, 기획자, 개발자 등등.
IT 전문직 종사자들이 매일매일 겪어야 할 업무의 프로세스.
그중 가장 중요한 측정.
측정을 어떻게 하느냐에 따라 데이터의 신뢰도가 판가름된다.
특히 쇼핑몰은 그 중요도가 더욱 높다 할 수 있다.
광고를 통해 유입되는 유저들이 고객이 되고, 충성고객이 되기까지의 일련의 과정을 측정할 수 있다면 더욱 많은 매출을 직접적으로 발생시킬 수 있기 때문이다.
우리는 일반적으로 웹사이트 트래킹은 Google Analytics를 통해 진행하길 여러 군데에서 추천받고 있다.
나 또한 Google Analytics(이하 GA)을 통해 트래킹 하길 추천한 바 있다.
워드프레스의 플러그인을 통해 전자상거래 태깅이 꽤 쉽게 되는 편이고 확인할 수 있는 데이터 또한 국내의 서비스들보다 진일보했기 때문.
오늘은 그 ga를 통해 A/B 테스트 진행하는 것을 다뤄볼까 한다.
A/B 테스트는 측정과 개선을 한꺼번에 할 수 있는 테스트 수단이다.
하나의 콘텐츠를 A의 콘텐츠와 B의 콘텐츠로 나눠 만들고 같은 시각, 같은 날짜, 같은 대상에 공개하여 사전에 정의한 목푯값을 더욱 많이 이뤄낸 콘텐츠를 결정짓고 계속 집행하게 된다.
메인 페이지를 최적화한다고 생각해보자.
똑같은 랜딩페이지에 배너의 컬러나 텍스트, 이미지 콘셉트 등만 차별을 둔 후 동시에 캠페인을 시작한다.
시간과 대상 등이 다르면 표본이 달라져 결과를 신뢰할 수 없게 된다.
대상의 랜딩이 다르면 또한 결과를 신뢰할 수 없게 된다.
한 번에 너무 많은 콘텐츠를 달리하지 말고 개선하려 하는 콘텐츠 혹은 요소를 명확하게 집어내어 테스트를 진행해야 한다.
이 모든 것들은 GA에서 진행할 수 있다.
워드프레스도 별 어려움 없이 진행할 수 있으니 굳이 비싼 서비스를 이용할 필욘 없다.
GA에서 A/B테스트는 방문형태 > 실험에서 설정할 수 있다.
실험 만들기를 클릭해보자
설정은 그리 어렵지 않게 할 수 있다.
실험 이름과 목적(이탈, 페이지뷰, 목표, 전자상거래 데이터 등)과 트래픽, 그리고 실험 기간 등을 설정하고,
원본 페이지와 실험할 카피 페이지를 각각 넣어준 수 실험 코드를 원본 페이지에 넣어주면 끝이다.
워드프레스에서 개선을 시도하려는 페이지를 하나 더 생성한 후 원본 페이지 상단에 실험 코드(Javascript)를 넣어주면 되는데 아래의 코드를 활용하면 된다.
위치는 wp-content > themes > 사용 중인 테마명 > header.php > <head></head> 사이
<?php if(is_front_page()) { ?>
<!-- Google Analytics Content Experiment code -->
<script>function utmx_section(){}function utmx(){}(function(){var
k='120694090-3',d=document,l=d.location,c=d.cookie;
if(l.search.indexOf('utm_expid='+k)>0)return;
function f(n){if(c){var i=c.indexOf(n+'=');if(i>-1){var j=c.
indexOf(';',i);return escape(c.substring(i+n.length+1,j<0?c.
length:j))}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;d.write(
'<sc'+'ript src="'+'http'+(l.protocol=='https:'?'s://ssl':
'://www')+'.google-analytics.com/ga_exp.js?'+'utmxkey='+k+
'&utmx='+(x?x:'')+'&utmxx='+(xx?xx:'')+'&utmxtime='+new Date().
valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+
'" type="text/javascript" charset="utf-8"><\/sc'+'ript>')})();
</script><script>utmx('url','A/B');</script>
<!-- End of Google Analytics Content Experiment code -->
<script>
console.log("original");
</script>
<?php } ?>
나 같은 케이스의 경우 메인 페이지를 테스트할 목적으로 작성했기에 프런트페이지에만 보이게 하려고 is_front_page라고 작성하였는데 page id 나 slug, title을 가져오는 방법도 있다.
is_front_page()
When the front of the site is displayed, whether it is posts or a Page. Returns true when the main blog page is being displayed and the 'Settings > Reading ->Front page displays' is set to "Your latest posts", or when 'Settings > Reading ->Front page displays' is set to "A static page" and the "Front Page" value is the current Page being displayed.
is_page()
When any Page is being displayed.
is_page( 42 )
When Page 42 (ID) is being displayed.
is_page( 'About Me And Joe' )
When the Page with a post_title of "About Me And Joe" is being displayed.
is_page( 'about-me' )
When the Page with a post_name (slug) of "about-me" is being displayed.
is_page( array( 42, 'about-me', 'About Me And Joe' ) )
Returns true when the Pages displayed is either post ID = 42, or post_name is "about-me", or post_title is "About Me And Joe".
is_page( array( 42, 54, 6 ) )
Returns true when the Pages displayed is either post ID = 42, or post ID = 54, or post ID = 6.
스크립트 하단에 console.log 는 스크립트의 작동 확인을 목적으로 넣어두었다.
간단하게 정리하면 이렇다.
1. 테스트할 페이지(메인 페이지나 로그인, 회원가입 페이지)를 하나 정한다.
2. 무엇을 분기시켜 테스트할지 정한다.(메인 배너 이미지, 텍스트 등)
3. 테스트할 페이지를 하나 복사한 후 분기시킬 콘텐츠를 새로 만들어 적용한다.
4. GA 실험 코드를 원본 페이지 head 사이에 삽입한다.
이렇게 되면 해당 페이지에 유저가 접근했을 때 GA에서 알아서 원본 페이지와 테스트 페이지로 나눠 보낸다.
참 쉽쥬?
다음번엔 실제 적용사례와 테스트 결과(본인은 최소 2주를 진행하기로 했다.)를 공유하기로 하면서
이번 글은 여기까지!
메인 페이지 A/B 테스트를 진행하고 있는 워드프레스 쇼핑몰 구경하기
