옵티마이즐리 X

in Plan: 계획

옵티마이즐리 (Optimizely X) 가이드: 설치 및 시작하기

Share

2008년 미국대선 오바마 캠프는 당시만 해도 생소했던 AB테스트를 통해 온라인 모금액과 후원자수를 40% 이상 개선했습니다.

당시 분석담당관이었던 댄 시로커는 대선 후 AB테스팅 전문 솔루션을 개발하는데요, 이게 바로 옵티마이즐리 (Optimizely) 입니다.

오바마 AB테스팅

이제 디지털 비즈니스에서 A/B테스트의 중요성을 의심하는 사람은 거의 없습니다.

관심이 높아지면서, 국내에서도 점차 많은 기업이 옵티마이즐리, 어도비 타겟구글 옵티마이즈를 사용중입니다.

이중 가장 많은 유저수를 보유한 옵티마이즐리 첫 설치 및 시작방법을 공유합니다.

옵티마이즐리 X, 기존 클래식(Classic) 대비 차이점은?

Web Experimentation(=웹전용 AB테스트) 만 본다면, 기존 대비 큰 차이는 없습니다. 리포트 UI 가 달라지고, JavaScript 라이브러리가 달라지면서 속도가 약간(?) 개선된것과, 기존에 10개였던 Custom Attributes (맞춤변수) 가 100개로 늘어난 것이 차이라 할 수 있습니다 (마치 아이폰/아이폰S 차이와 비슷합니다).

큰 차이는 아마 멀티채널 / 교차기기 기능이 강조된 모바일앱 버전인 것 같은데요. 실험군의 유저 ID 를 직접 지정해줄 수 있기 때문에, 나중에 실험 결과값을 Raw data 형태로 가져와서 CRM 데이터와 합치는 것이 가능해졌습니다. 기존 버전에서는 Optimizely 가 자체생성한 랜덤값을 기기별로 assign 했기 때문에 어려웠습니다.

모바일앱 사용자라면, 이곳에서 개발자 계정을 생성하거나 기존 사용자라면 Account Manager 에게 요청합니다. 자세한 설치방법은 이곳에서 확인하시거나, 아래 GitHub 링크에서 확인하세요.

optimizely x

추가로 뒷단, 앞단에 관계없이 실험을 할 수 있는 풀스택(Full Stack) 도 큰 업데이트라 할 수 있습니다. 기존 AB 테스트가 주로 앞단(=Front-end) 에만 제한됐다면, 사이트나 앱의 로직같은 뒷단(=back-end) 까지 테스트가 가능해지면서, 더 큰 비즈니스 임팩트를 만들어낼 수 있다고 합니다 (저도 아직 개인적으로 사용해보진 않아서 기대중입니다 ^^).

웹: 구글태그매니저로 설치할 수 있습니다!

기쁜소식 – 기존 태그매니저(GTM) 사용자라면, 별도의 개발 과정 없이 곧바로 적용할 수 있습니다.

단 이 경우, 현재 사이트에 GTM 이 “제대로” 설치되어 있어야 하는데요, 구글이 2016년 10월 이후 <head>상단에 JavaScript,  <body> 에 iframe 스니펫을 구분하는 식으로 권장함에 따라, 아직 수정하지 않으신 분들은 가이드에 맞춰 우선 업데이트가 필요합니다.

코드 쪼개기

head 와 body 에 나눠서 GTM코드를 삽입해주세요.

왜 A/B테스트 때문에 태그매니저 적용을 바꿔야할까요?

바로 GTM 코드 자체는 비동기(asynchronous) 방식이나, Optimizely 코드를 포함한 AB테스트 스크립트는 동기(synchronous) 방식으로 로딩되기 때문입니다.

다른 분석솔루션과 달리,  AB테스트는 각 방문자별로 방문여부, 노출페이지 시안을 먼저 결정한 뒤 스크립트를 실행합니다.

따라서 페이지 요소 로딩 이전, 즉  <head>상단에 스크립트가 있는것이 가장 좋습니다.

만약 부득이하게 기존방법으로 적용된 GTM (=모든 코드가  <body> 에 있는 형태) 로 Optimizely 를 실행하게 되면, 테스트 진행은 가능하나, 원안페이지가 로딩되고 나서 다시 실험페이지로 바뀌는 깜빡임 현상 (flicker effect) 이 생길 수 있습니다.

깜빡임현상

이러지않도록 주의합니다.

본격적으로 태그를 설치해봅시다!

기존의 GA, 어도비 또는 구글태그매니저 사용자라면 쉽게 스스로 적용하실 수 있습니다.

1) JavaScript 태그 확인

Web Experimentation 은 30일 무료체험을 제공하고 있습니다. 여기서 무료체험 계정을 생성합니다.

계정 Setting 에서 코드스니펫을 확인합니다.

<script src=“https://cdn.optimizely.com/js/1234567(프로젝트번호).js"></script>>

2) Publish!

구글태그매니저에서 Custom HTML 태그를 사용해서 모든페이지에 배포합니다 (태그 적용방법은 동영상을 참조해주세요).

개발 도움이 필요한 부분은 여기까지입니다.

 

3) 페이지 및 전환목표 설정

  • Pages(페이지설정): Implementation 메뉴 – Pages 에서 테스트를 하려는 주요영역 (예:홈페이지, 회원가입 첫화면, 장바구니, 로그인) 을 설정합니다.

옵티마이즐리 Implementation

  • Events(전환목표 설정): 이어서 테스트의 목표전환값이 될 액션 (회원가입, 장바구니 담기, 배너클릭 등) 을 지정합니다.

Optimizely 스크린샷

 

모든 단계가 완료되면, 이후 테스트 설정화면 (Experiments) 메뉴에서 A/B 테스트를 세팅할 수 있습니다.

아래 가이드에 맞춰 항목별값을 입력합니다.

옵티마이즐리 테스트

이것으로 AB 테스트를 위한 기본 설정이 완료됐습니다.

마무리

사실 이번 포스트에선 기본적인 초기 태깅방법을 다뤘습니다만, 실제로 비즈니스에 임팩트를 가져오기 위해선 올바른 AB테스트 가설과 목표설정, 결과분석이 훨씬 중요하다고 할 수 있습니다 (다음 포스트에서 다루도록 하겠습니다).

마지막으로 옵티마이즐리 도입을 고려중인 기업들에게 현실적인(?) 팁 하나 드립니다. 개인적인 경험과 몇몇 사용자 지적에 비춰보면 가격정책이 조금은 불투명합니다. 모든 B2B SaaS 가 그렇듯이, 모든 조건을 꼼꼼이 확인/협의하고 결정하시길 바랍니다.