Google Optimizeでのテストの作成方法

[前記事ではGoogle Optimizeの導入方法](https://qiita.com/takeshi_nozawa/items/4068ec42d489250e8e8d)についてまとめました。今回は具体的なテストの作成方法やちょっと分かりにくかったところの補足をしたいと思います。

# テストの作成方法

## 事前にやること
1. 事前に[Chromeの拡張機能](https://chrome.google.com/webstore/detail/google-optimize/bhdplaindhdkiflmbfbciehdccfhegci)を入れておく
2. サイトに[Google Optimizeをインストール](https://qiita.com/takeshi_nozawa/items/4068ec42d489250e8e8d)する

## 作成手順
1. Optimizeのコンテナを作成(テスト対象のドメインを入れておくと分かりやすい)
2. OptimizeのコンテナとAnalyticsのプロパティ・ビューと連携させる
3. 「テストを作成」をクリック。※英語だとテストは"Experiment"と訳されているので言語を英語で設定している方はご注意！
4. テスト名とテスト対象URLを入力。
5. パターンを作成(パターンA,パターンBなど)
6. テスト対象ページが開かれ、上記の拡張機能が起動し、ページデザインを見ながらDOMをエディットできるようになるので、適宜テストパターンを作成する。（[詳細はこちら](https://support.google.com/360suite/optimize/answer/6369964?hl=ja&ref_topic=7037477)）
7. 目標を設定する。目標とはオリジナルと各テストパターンを比較するときの指標値で、これの良し悪しでどのパターンが良いかをOptimizeが判断して教えてくれます。Optimizeでは以下の目標が最初から使えます。
  1. スマートゴール
  2. セッション時間
  3. トランザクション数
  4. ページビュー数
  5. 収益
  6. 直帰数
  7. 定義されたイベント
 <img width="1238" alt="optimizeで設定できる目標" src="https://qiita-image-store.s3.amazonaws.com/0/237077/1f85557a-106e-d10e-b5c6-e59566fc6169.png">
8. 副目標も設定できます。
9. ターゲット(テストを行ってもらうユーザーの指定と量の指定。さらに各パターンへの振り分ける割合)を指定します。
10. 条件を指定します。およそGoogle Analyticsで使用できる様々なディメンションを条件として指定できそうです。うまく組み合わせれば、「コンバージョンしたクッキーをユーザーだけ」とかもできそうです。また、テスト対象URLの条件に関しては[前記事](https://qiita.com/takeshi_nozawa/items/4068ec42d489250e8e8d)でもご紹介したとおり、前方一致や後方一致、正規表現などを使って複数のページに渡ってテストを実行することが可能です。
<img width="692" alt="rule.png" src="https://qiita-image-store.s3.amazonaws.com/0/237077/067bd396-000a-3b78-4901-6a8b5208a791.png">

## その他tips

### スマートフォンのビューをテストしたい場合
エディットモードのときにページ上部のセレクタから作成したいパターンの端末を選択することができます。現在確認できるのは以下の８種類です。

- Nexus7
- iPad
- Galaxy S5
- Nexus5X
- iPhone5
- iPhone6
- iPhone6 Plus
- レスポンシブ（ベータ版）

<img width="990" alt="ページ上部よりテストしたいデバイスを選択することができます" src="https://qiita-image-store.s3.amazonaws.com/0/237077/778e8017-807b-6fa3-a0d7-fb44070f3146.png">

### CSSを直接指定したい場合
<img width="1145" alt="CSSの編集ボタンを押すと、編集ウィンドウ開き、直接CSSを貼り付けることができます" src="https://qiita-image-store.s3.amazonaws.com/0/237077/6b50c680-dd9f-8310-76cc-71119a2d0da7.png">

こんな感じでCSSを直接貼り付けたりできます。
ただし、貼付け後は自動的にCSSをクリーンナップするらしく、
必ずしも貼り付けた内容がそのまま登録されるわけではないようです。

こまごまと各DOMに対して変更を適用していくのが面倒な場合は
CSSを一括指定したほうが便利そうです。

### javascriptを追加したい場合
javascriptを追加することで、DOMイベント後のアクションを変更することができます。例えばアコーディオンやモーダルなどのエフェクトを調整したい場合など、有効なのではないでしょうか。

1. エディット画面で変更したいアニメーションが発動するDOM要素を選択
2. 編集ウィンドウのところの「要素を編集」をクリック（キャプチャは「要素を編集」を押下後）
3. JSのウィンドウが開くので適宜追加・修正

<img width="999" alt="javascriptを追加・編集するには対象トリガーとなるDOMを選択して、「要素の編集」ボタンをクリックします" src="https://qiita-image-store.s3.amazonaws.com/0/237077/491dbe65-5fc4-a6f6-38fb-47511d0cfcd2.png">
<img width="990" alt="編集ウィンドウにjavascriptを貼り付けます" src="https://qiita-image-store.s3.amazonaws.com/0/237077/8496cc04-8041-8dfe-d113-74be2870eda2.png">

「開始タグの後」、「終了タグの後」というオプションが見えますが、[こちら](https://support.google.com/360suite/optimize/answer/6369964?hl=ja&ref_topic=7037477)によると

>各呼び出しは、選択したオプションに基づいてできるだけ早い時期に実行されます。オプションは次のとおりです。
>After opening tag: 一致したエレメントの開始タグだけが解析され、スクリプトが実行するためにページで使用されます。
>After closing tag: 一致したエレメントのすべてのコンテンツと終了タグが解析されて、スクリプトが実行するためにページで使用されます。

### 有料(Optimize 360)でできること
お金を払うとできることが以下で説明されています。
https://support.google.com/360suite/optimize/answer/7084762?hl=ja&ref_topic=6314903

主だったものとしては
- Googleアナリティクスのオーディエンスターゲティングが使える
- 多変量テストの組み合わせが最大３６までできる(無料版では１６個まで)
- テストの目標は１０個まで（無料版は３つまで）
- 同時にできるテストは１００個以上（無料版は最大３つ）

とありますが、多変量テストはパターンの管理が大変なので、そこまでたくさんパターンが必要なケースは限られてくるような気がします。またテストの目標も３つ以上使うことってあるかな・・・？同時にできるテストも１００以上とありますが、複数のテストを同時に走らせるときには、要因の特定が複雑になるので、同一ページに対するテストが複数走らないようにするのが鉄則です。とはいえ３個以上走らせたい組織もあるかと思いますので、そのへんが有料にするかどうかの基準になりそうです。

価格については
>Google の企業向け営業担当者または正規販売パートナーにお問い合わせください。

とのことです。