9
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

9
Last updated at Posted at 2018-02-19

前記事ではGoogle Optimizeの導入方法についてまとめました。今回は具体的なテストの作成方法やちょっと分かりにくかったところの補足をしたいと思います。

テストの作成方法

事前にやること

  1. 事前にChromeの拡張機能を入れておく
  2. サイトにGoogle Optimizeをインストールする

作成手順

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

その他tips

スマートフォンのビューをテストしたい場合

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

  • Nexus7
  • iPad
  • Galaxy S5
  • Nexus5X
  • iPhone5
  • iPhone6
  • iPhone6 Plus
  • レスポンシブ(ベータ版)
ページ上部よりテストしたいデバイスを選択することができます

CSSを直接指定したい場合

CSSの編集ボタンを押すと、編集ウィンドウ開き、直接CSSを貼り付けることができます

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

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

javascriptを追加したい場合

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

  1. エディット画面で変更したいアニメーションが発動するDOM要素を選択
  2. 編集ウィンドウのところの「要素を編集」をクリック(キャプチャは「要素を編集」を押下後)
  3. JSのウィンドウが開くので適宜追加・修正
javascriptを追加・編集するには対象トリガーとなるDOMを選択して、「要素の編集」ボタンをクリックします 編集ウィンドウにjavascriptを貼り付けます

「開始タグの後」、「終了タグの後」というオプションが見えますが、こちらによると

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

有料(Optimize 360)でできること

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

主だったものとしては

  • Googleアナリティクスのオーディエンスターゲティングが使える
  • 多変量テストの組み合わせが最大36までできる(無料版では16個まで)
  • テストの目標は10個まで(無料版は3つまで)
  • 同時にできるテストは100個以上(無料版は最大3つ)

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

価格については

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

とのことです。

9
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?