Google Optimize를 터치하기 전에 궁금한 사항 요약

Google Optimze를 일주일 정도 터치해 보며 깨달은 것을 정리했습니다.

Google Optimze

(주로) AB 테스트를 할 수 있는 도구

예를 들어'50%는 빨간색 버튼','50%는 파란색 버튼'을 표시하면 어느 조회수(체류시간, etc)가 높은지 확인할 수 있다

AB 테스트 이외에 리디렉션 테스트와 다변량 테스트도 할 수 있지만 기본적으로 AB 테스트에 많이 쓰인다.
https://zenn.dev/d0ne1s/scraps/3f4305d0af5cab

설정

전제 조건

Google 계정 보유

측정하고 싶은 사이트에서 Google Analythics

를 가져왔습니다.

필요한 작업 추가

GoogleOptimze에 로그인

웹 사이트에 Google Optimze 태그 포함

GoogleOptimze 설치 크롬 확장

https://chrome.google.com/webstore/detail/google-optimize/bhdplaindhdkiflmbfbciehdccfhegci

AB 테스트 제작 프로세스

필요한 절차는 대략 다음과 같은 세 가지가 있다

1. 도안 만들기

구글 Optimze 편집기?위에서 페이지의 요소를 편집하여 테스트하고 싶은 모드를 만듭니다.
GUI를 사용하여 편집하거나 전체 페이지에 적용되는 글로벌 CSS, 글로벌 자바스크립트를 작성할 수 있습니다.

2. 목표 설정

테스트를 적용할 페이지의 URL, 사용자의 등록 정보 등을 설정합니다.

3. 측정 항목 설정

AB 테스트에서 측정할 항목 설정하기

방비 조치

구글 Optimze로 AB 테스트를 진행하면 페이지가 깜빡이는 경우도 있다(페이지 스치기).
페이지를 표시할 때, 오리지널 (AB 테스트를 하지 않을 때) 화면을 한순간에 표시하고, Google Optimze 탭을 읽으면 디스플레이를 전환하는 동작이 됩니다.
페이지에 반섬광체로 불리는 탭을 붙이고 Optimze의 탭을 읽기 전에 읽으면 페이지 트리거를 피할 수 있습니다.
스켈리턴

<!-- "CONTAINER_ID"の部分を書き換えて使う  -->
<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{'CONTAINER_ID':true});</script>

스켈레톤 방지견은 GTM 등을 거치지 않고 소스에 바로 붙여야 한다.
https://support.google.com/optimize/answer/7100284
https://qiita.com/hex2323/items/bb29d7ed8298582720b8

사용후 귀찮은 일

이미지 업로드 기능 없음

Google Optimze에 이미지를 직접 업로드할 수 없습니다.
이미지 교체 등을 포함하는 테스트를 진행하려면

이미지 파일을 S3 등에 업로드

이미지를 복사할 URL

복사된 URL을 탭의 src 속성에 입력

이런 절차는 필요한 것이다.

CSS의 일부 속성을 사용할 수 없습니까?

content 일부 속성(예를 들어 속성)이 잘 반영되지 않았다.
콘텐츠 속성을 사용할 수 없기 때문에 의심 요소를 사용해 게임을 진행하기 어렵다.

반복 표시 요소를 수정하는 것은 매우 어렵다

예를 들어, 다음 UI에서 "Yahoo를 통해 등록"버튼의 배경을 하얗게 하고 텍스트 색상을 검게 하고 아이콘을 붉게 하려는 경우를 예로 들 수 있습니다.

하나하나 수작업으로 편집하면 (워낙 거칠어) 대답의 수가 바뀌면 잘 드러나지 않는다.그리고 위에서 설명한 대로 의심 요소인 GONOW는 원활하지 않다.
이 경우 글로벌 자바스크립트로 대응할 수 있습니다.

// 特定の条件に当てはまるimgタグの画像を差し替える
const yahoo_icons = document.querySelectorAll('.yahoo-icon');
for (const i of yahoo_icons) {
  i.src = 'https://hogehoge.s3.ap-northeast-1.amazonaws.com/google_optimize/yahoo_icon_64.png';
}

// 特定の条件に当てはまる要素にCSSを当てる
const yahoo_btns = document.querySelectorAll('.yahoo-register-button');
for (const i of yahoo_btns) {
  const cssText = i.style.cssText;
  i.style.cssText = cssText + 'color: #333; background-color: #fff;';
}

클릭량 측정

GA에 익숙하지 않으면 조금 힘들 수도 있어요.다음 순서에 따라 설정합니다.

측정할 소자onclick 속성에 GA에 이벤트를 보내는 코드

를 쓴다
gtag.js의 상황

<button onclick="gtag('event','イベントアクション', {'event_category': 'イベントカテゴリ', 'event_label': 'イベントラベル'});">ボタン</button>

analytics.js의 상황

<button onclick="ga('send', 'event', 'イベントカテゴリ', 'イベントアクション', 'イベントラベル');">ボタン</button>

측정 및 대상 > 사용자 지정 대상 만들기 > 이벤트에서 보낼 이벤트 설정

https://zenn.dev/d0ne1s/scraps/e2ab268e80b2c4

기타

히트맵 기능 없음

주의구글 Analythics 선택 영역 브라우저에 설치되면 AB 테스트의 공개 작업이 순조롭게 진행되지 않을 수 있습니다.

동시 실행 가능한 테스트, 1용기(작업공간의) 최대 5개

부족하면 컨테이너를 다시 만들면 돼

용기를 추가할 때 깜빡이는 설명을 바꿔야 한다는 것을 알아차렸다

유료(Google Optimize360)라면 무제한으로 실행할 수 있을 것 같다가격 미공개.조사한 결과 유료판을 아무도 쓰지 않는 것 같다

비로그인 상태만 표시하는 요소도 문제 없이 테스트할 수 있음

한 페이지에 테스트를 적용하면 엔지니어가 아닌 사람이 각종 테스트를 제멋대로 해도 위험하지 않다는 인상을 준다

편집 중에 미리 보기 때문

반대로 한 테스트를 여러 페이지의'URL','◯','포함'에 적용하면 무의식적인 페이지에서 테스트를 실행할 위험이 있다

대략적인 개요에 불과하지만 편집 이력을 확인할 수 있다.간편한 다중 관리

감상

어울리는 곳이 많지만 익숙해지면 보통 편해요.
자바스크립트를 쓰지 않으면 대응할 수 없는 부분도 많지만 기본적으로 비엔지니어도 처리할 수 있다.
공사 자원을 절약하는 동시에 개선의 주기를 가속화할 수 있다.