Zenn
🌸

Google Optimizeを触る前に知りたかったことまとめ

2022/04/01に公開
Google Analytics
googleoptimize
idea

Google Optimizeを1週間くらい触ってみて、わかったことをまとめました。

Google Optimizeとは

  • (主に)ABテストができるツール
  • たとえば「50%の人には赤いボタン」「50%の人には青いボタン」を表示して、どちらがクリック率(、滞在時間、etc)が高いかを検証することができる

ABテスト以外にも、リダイレクトテストや多変量テストもできるけど、基本的にABテスト目的で使うことが多そう。
https://zenn.dev/d0ne1s/scraps/3f4305d0af5cab

セットアップ

前提

  • Googleアカウントを持っている
  • 計測したいサイトに、GoogleAnalyticsが導入されている

追加で必要な作業

ABテスト作成の流れ

必要な手順は、大きく以下の3つ

1. パターンを作る

GoogleOptimizeのエディタ?上で、ページの要素を編集して、テストしたいパターンを作る。
GUIで編集することもできるし、ページ全体に適用されるグローバルCSS、グローバルJavaScriptを書くこともできる。

2. ターゲットを設定する

テストを適用するページのURLや、ユーザーの属性などを設定する。

3. 測定する項目を設定する

ABテストで計測したい項目を設定する

ページフリック対策

GoogleOptimizeを使ってABテストをすると、ページがちらつくことがある(ページフリック)。

ページを表示したとき、一瞬だけオリジナルの(ABテストをしない時場合の)画面が表示されて、その後GoogleOptimizeのタグが読み込まれてから、表示が切り替わるような挙動になってしまう。

アンチフリッカースニペットと呼ばれるタグをページに貼り付け、Optimizeのタグより前に読み込まれるようにすることで、ページフリックを回避することができる。

アンチフリッカースニペット
<!-- "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

使ってみて面倒に感じたこと

画像アップロード機能がない

GoogleOptimizeに直接画像をアップロードすることはできないぽい。
画像の差し替えなどを含むテストをしたい場合は、

  • S3等に画像ファイルをアップロード
  • 画像のURLをコピー
  • コピーしたURLをimgタグのsrc属性に入力する

という手順を踏む必要がある。

CSSの一部のプロパティが使えない?

contentプロパティなど、一部のプロパティがうまく反映されなかった。
contentプロパティが使えないので、疑似要素を使ってゴニョゴニョするのが難しい。

繰り返し表示される要素の修正が大変

例えば以下のようなUIで「Yahooで登録」ボタンの背景を白く、文字色を黒く、アイコンを赤くしたい場合。

1つ1つ手作業で編集していたら、(そもそもダルいし)、回答の数が変わった場合にうまく表示できなくなる。しかも前述の通り、疑似要素ゴニョゴニョがうまくいかない。

こういう場合、グローバルJavaScriptで対応できる。

// 特定の条件に当てはまる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に慣れていない場合、ちょっと大変に感じるかも。以下の手順で設定する。

  1. 計測したい要素のonclick属性に、GAにイベントを送信するコードを書く
gtag.jsの場合
<button onclick="gtag('event','イベントアクション', {'event_category': 'イベントカテゴリ', 'event_label': 'イベントラベル'});">ボタン</button>
analytics.jsの場合
<button onclick="ga('send', 'event', 'イベントカテゴリ', 'イベントアクション', 'イベントラベル');">ボタン</button>
  1. 測定と目標 > 目標 > カスタム目標を作成 > イベント で、送信するイベントにヒットするように設定する

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

その他もろもろ

  • ヒートマップの機能はない
  • GoogleAnalyticsのオプトアウトアドオンがブラウザにインストールされてると、ABテストの公開作業がうまくいかない場合があるので注意
  • 同時に実行できるテストは、1コンテナ(ワークスペース的なやつ)につき5個まで
    • 足りなくなったら、新たにコンテナを作ればよいかも
      • コンテナを追加する場合、アンチフリッカースニペットの記述も変える必要がある点に注意
    • 有料版(Google Optimize 360)だと無制限に実行できるらしいけど、価格は公開されていない。調べた感じ有料版使ってる人あんまりいなさそう
  • 非ログイン状態だけ表示される要素とかも、問題なくテストできた
  • 1つのテストを1つのページで適用している限りは、非エンジニアが独断で色々テストしてもあんまり危険はなさそうな印象
    • 編集過程でプレビューすることになるから
    • 逆に1つのテストを「URL」「◯◯」「含む」とかで複数ページに適用させようとすると、意図しないページでテストが実行されるリスクがありそう
  • ざっくり概要だけだけど、編集履歴を確認できる。複数人で管理する場合に便利

所感

ハマりポイントは結構あったけど、慣れたら普通に便利そう。
JavaScriptを書かないと対応できない部分もちょこちょこあるものの、基本的には非エンジニアでも扱える。
エンジニアリングリソースを節約しながら、改善のサイクルを速めることに繋がりそう。

Discussion