A/B test

A/B test란?

• A/B test란 A, B안의 서로 다른 페이지를 만들고 어떤 페이지에서 더 높은 성과(ex. 전환율)를 달성하는 지 실험하는 test

• 예시

  아래 사이트처럼 서로 다른 이미지에 따라 SIGN UP 버튼을 누르는 비율을 테스트하여 가장 높은 전환율(13.1%)을 보인 ‘Family Image’로 최종 결정을 할 수 있다.

  

  

  출처

Google Optimize

• Google의 Optimize를 사용하여 A/B test를 편리하게 진행할 수 있습니다. Google에선 이 툴을 아래처럼 설명.

  Google Optimize는 Google Analytics 데이터를 사용하여 웹사이트를 개선할 수 있도록 도와주는 쉽고 간편한 A/B 테스트 및 맞춤설정 도구입니다. 비주얼 편집기를 사용하여 현재 웹사이트와 유사한 다양한 페이지를 간편하게 만들 수 있고, 실험 결과를 바탕으로 다음에 수행해야 할 작업을 쉽게 파악할 수 있습니다.

A/B test 만들기

• 1. 가설 세우기

  예시: 상세 페이지에 ‘무엇을 얻을 수 있나요?’ 정보가 있으면 전환율이 높아질까?

• 2. 가설 테스트를 위한 코드 수정 후 배포

  예시:

    <!--실험 : 무엇을 얻을 수 있나요? -->
  
    <div class="detail-box" id="test-add-benefit" style="display: none">
        <div class="flex flex-row-m">
        	<div class="h6 detail-sub-title">무엇을 <br class="only-pc"> 얻을 수 있나요?
        		</div>
        			....
        	</div>
        </div>
    </div>
  

  원본 페이지에선 보여지지 않도록 display: none으로 배포

• 3. Optimize에서 A/B test 만들기

  • (1) 환경 만들기
    • 환경 만들기 를 클릭한 후 정보를 입력
    • 하나의 페이지에서는 반드시 한 가지 테스트만 진행
    • GTM 태그 이름과 페이지 이름 일치시키는 게 편함
  • (2) 대안 페이지 작성
    • 대안 추가를 클릭한 후 실험할 페이지 정보를 입력
    • 대안 페이지 이름과 실험 내용을 간단히 작성 후 완료를 클릭
    • 대안 페이지의 수정을 클릭하여 가설 내용을 반영합니다. 비주얼 편집기를 사용하여 수정
    • 해당 요소를 찾아 요소 편집으로 적절하게 내용을 수정한 후 (예시: display: none 삭제) 적용을 클릭하여 수정을 완료

    (❗️ 주의: Vue의 이벤트가 걸려있는 태그(ex. <div @click = "test()"> 등)를 수정하면 기능이 작동하지 않을 수 있음)

  • (3) 타겟팅 설정
    • URL 규칙 추가를 클릭하여 타켓팅 URL을 설정
    • 입력한 URL과 정확히 일치하거나, 해당 URL로 시작하는 모든 페이지를 설정하여 타겟팅할 수 있음
  • (4) 목표 설정
    • 실험 목표 추가를 클릭하여 목표를 추가
    • 목록에서 선택
    • 사용자 설정 만들기
      • 페이지뷰를 클릭하여 규칙을 설정
      • 제목은 GTM 태그 이름으로 통일
      • 규칙을 설정할 때 root 이후의 경로로 설정
      • 꼭❗️ 하단의 규칙 유효성 검사 결과를 확인하여 목표가 올바르게 설정됐는지 확인 (0개 세션으로 잡히면 안됨)
  • (5) 미리보기 점검
    • test 시작 전 미리보기 탭을 통해 웹(PC)과 모바일에서 레이아웃이 깨지지 않는지, 기능이 잘 작동하는지 등을 점검
  • (6) test 시작
    • 모든 설정이 완료되었으면 test를 시작 😆

  📌 보다 상세한 정보가 필요하다면 이 곳을 참고하세요.

  
  ``` 노션에 정리했던거 옮겨붙이기!