大解剖!無料のウェブテストツールを使わないなんて損してない?2 ~Googleオプティマイズを「設定する」編~

  • このエントリーをはてなブックマークに追加

2017年3月、Google オプティマイズの利用が一般公開されました。

第1部ではGoogle オプティマイズでできることをご紹介しました。

そして今回、第2部ではGoogle オプティマイズの操作方法について紹介します。

第1部の記事についてはこちら:大解剖!無料のウェブテストツールを使わないなんて損してない?1 ~Googleオプティマイズを「知る」編~

Googleオプティマイズを設定してみよう

まずは下記のURLからGoogle オプティマイズにアクセスします。

Google オプティマイズ: https:// optimize.google.com/ optimize /home/

〔GET STARTED〕をクリックして開始します。

事前の共有としてこの記事で設定するGoogle オプティマイズと、関係するツールとの大まかな階層構造は下図を参照してください。

Google オプティマイズの管理画面は、

  • アカウント(Account)
  • コンテナ(Container)
  • テスト(Experiment)
  • テストパターン(Variant Original/Variant)

という階層構造になっています。

実際に配信されるのが「テストパターン」に設定したもの、そのテストパターンの出しわけをするのが「テスト」という機能です。配信データを蓄積するために、GoogleオプティマイズはGoogle アナリティクスと紐付けをする必要があります。

また、今回の記事ではGoogle タグマネージャを利用したGoogleオプティマイズの設定方法を紹介していますが、ウェブサイトのHTMLへGoogleアナリティクスのスニペットとともに直接記述する形で設定してもかまいません。

ただし、その場合はGoogleアナリティクスのスニペットの中に、Googleオプティマイズのコードを一文追加する必要がありますので忘れずに行いましょう。

1.まずは、Google オプティマイズの管理画面の言語を日本語にしよう。

Google オプティマイズは2017年6月現在、ページの言語が英語で表示されますが、日本語に変換することができます。URLを下のように変更してみましょう。

「…/オプティマイズ/home/?authuser=…」→「…/オプティマイズ/home/?hl=ja&authuser=…」

日本語で管理画面を操作できるようになりますので、このURLをブックマークしておくと便利です。

2.Googleオプティマイズのアカウントを作成しよう。

Google オプティマイズの機能の中では、最上位階層となる「アカウント」を作成します。〔アカウントを作成〕ボタンをクリックします。

画面右側から入力欄が現れます。

現れた入力欄には、下表を参考にしながら値を入力してください。

アカウント名への入力と、利用規約への同意をすると、〔次へ〕ボタンがクリックできるようになります。

3.Google オプティマイズのコンテナを作成しよう。

続けてコンテナ名の入力欄が表示されます。

テストを実施するウェブサイトのドメインやサイト名を入れるとわかりやすいです。

コンテナを作成すると、画面の上の方に先ほど設定したコンテナ名が表示されると同時に、テスト一覧のページに遷移します。

画面の右側に、このコンテナで必要な設定とそのステップが表示されます。ステップとして表示されているものを上から順に設定していきましょう。

4.Googleオプティマイズのテストを作成しよう。

右側のステップにある「②テスト作成」を設定していきましょう。

メインカラムにある〔テストを作成〕ボタンをクリックすると、画面の右側からテストの作成画面が現れます。

テスト作成画面の入力欄は下記を参考にしてください。

この記事では、A/Bテストタイプを選択した設定方法を説明します。それぞれの入力欄へ入力とテストパターンの選択をしたら、〔作成〕ボタンをクリックします。

5.Googleオプティマイズのテストパターンについて知ろう。

「テストパターン」とは、実際に配信されるテストのことです。

画面に表示されている「オリジナル」とは、現在のウェブページのクリエイティブのことです。

A/Bテストは、現在のクリエイティブと検証対象クリエイティブとの間でテストをすることになるため、「オリジナル」があらかじめ用意されています。初期表示時には、検証対象のクリエイティブが登録されていないため、配信比率は100%となっています。

〔新規パターン〕ボタンをクリックすると、オリジナルのクリエイティブが複製されます。このオリジナルの複製レイアウトをもとに、実際にユーザに表示されるテストクリエイティブを設定することができます。

クリエイティブの具体的な編集方法については、後述する「7. テストパターンの編集機能を使ってみよう。」を参照してください。

テストパターンの上限

テストパターンは、1つのテスト内で7種類まで作成することができます。
「オリジナル」を含めると、全8種類のパターンの同時テストをすることができるようなります。

「新規パターン」を7つまで作成すると、下画像のように当該テストにおいては〔新規パターン〕ボタンがクリックできなくなります。

テストパターンの削除

作成したテストパターンを削除する場合には、各テストパターンの右端から〔削除〕をすることができます。

テストパターンの配信比率

各テストパターンの中央に表示されている数値が、そのテストパターンの配信比率です。
この配信比率は、全パターンの配信比率の合計が100%になるようにすれば、パターンごとに自由に設定することができます。

6.テストパターンの編集機能を使ってみよう。

A/Bテストや多変量テストを選択した場合、Googleオプティマイズの管理画面上で対象ページのレイアウトやHTMLパーツを設定するなどの変更を加えることができます。ただし、2017年7月現在、ブラウザからこの編集ができるのはGoogle Chromeブラウザのみに限定されています。理由は、ウェブブラウザ上での、ウェブサイトの修正には、Google Chromeの拡張機能を用いているためです。

5章で作成したテストパターンをクリックすると、編集画面への初回遷移時はGoogle Chromeの拡張機能をインストールする誘導が表示されます。

③の〔拡張機能はこちらから利用できます。〕をクリックし、下のポップアップが表示されたら〔拡張機能を追加〕をクリックします。

正しくインストールされると、拡張機能がブラウザの拡張機能一覧に表示されます。

※ちなみにGoogle Chrome以外のブラウザで表示した場合にも同じメッセージが表示されます。

つまり、A/Bテストや多変量テストを使い、管理画面上でクリエイティブを修正する場合には、Google ChromeでGoogle オプティマイズを利用することが必須要件なのです。

変更したテストパターンを公開する前に、管理画面上でブラウザごとの互換が確認できません。別ツールなどでテンプレートを作成し、ブラウザ間の検証が完了したソースをGoogleオプティマイズの管理画面に適用するなど、オペレーションの工夫が必要です。

拡張機能のインストールが完了したら編集を再開します。編集するパターンをクリックすると、編集対象のページが開きます。

 

画面の右下には、フォントや背景色、文字サイズや文字種類を選択できる機能があります。マウスカーソルで、画面内の各要素をクリックすると、その要素に対して、現在設定されている定義を変更することができます。

また、この画面上でCSS定義やJavaScriptを新たに追加することも可能です。画面の上部には、現在選択しているDOM要素までのDOMパスが表示されますので、そのDOMパスを参考にしながらCSSやJavaScriptなどの各種定義を行うことができます。

7.Google アナリティクスへのリンクを設定しよう。

次にGoogle オプティマイズとGoogle アナリティクスとを紐付けします。右側のステップにある「③Google アナリティクスへのリンク」の設定をしていきましょう。

〔プロパティにリンク〕ボタンをクリックし、テスト対象サイトを計測しているGoogleアナリティクスのプロパティを選択します。

すると、プロパティに紐付くすべてのビューが表示されます。

この時点では、表示されているビューのすべてを選択することができますが、最終的にテストの結果を反映することができるビューは1つのビューのみとなります。

画面右上に表示される〔リンク〕ボタンをクリックするとリンクが完了します。

8.テスト結果の判断指標となる「目標」を設定しよう。

ウェブテストに限らず、あらゆるテストにおいては、そのテスト結果を評価するための判断基準(評価軸)を定める必要があります。Googleオプティマイズを使ったウェブテストの場合は、Googleアナリティクスと連携することによりGoogleアナリティクスで設定した目標を評価軸として利用することができます。

1つのテストに対し、選択することができる目標は3つまでとなりますので、あらかじめGoogle アナリティクス側に必要な目標を設定しておきましょう。

〔Google アナリティクスのビューにリンク〕というリンクをクリックすると、画面右側からテスト情報の編集ページが現れます。

紐付けしたプロパティに属するビューを、プルダウンから選択したら〔完了〕ボタンをクリックします。すると次の画像のように、ウェブテストの評価軸となるGoogle アナリティクスの目標を選択するプルダウンが表示されます。

目標は最大3つまで選択することができます。3つ選択すると、「目標の数が3個の上限に達しました。」と表示され、それ以上の選択ができません。

Googleアナリティクスの目標が3つ以上あるという場合でも、Googleオプティマイズ側で選択できる目標数に制限があるため、今回のテストの目的を改めて考え、目標に対して優先順位を設定するようにします。

また、ビュー単位でテスト結果を反映するため、ビューをまたいで目標を選択することはできません。

そして最大の注意点として、当該テストの稼働中は、連携しているGoogleアナリティクスに登録した目標の編集ができなくなることです。ですので、評価を行うための軸を、Googleアナリティクスのテストを稼働する前に、その目標が正しく計測されているかどうかを確認するようにしましょう。

9.Google オプティマイズ スニペットのインストールをしよう~GTM編~

Google オプティマイズを利用するには、Google オプティマイズのスニペットをページに設定する必要があります。設定方法は、HTMLテンプレートに直接スニペットを記述する方法と、Googleタグマネージャ(GTM)で設定する方法の2とおりがあります。

GTMには、Google オプティマイズのスニペットIDを登録する機能が設けられていますので、今回GTMを使った設定方法を紹介します。※大前提としてGTMのタグがウェブサイトに設定されていることが必要です。

まず、GTMにログインします。

「タグ」ページで〔新規ボタン〕をクリックすると、画面の右側からタグ設定ページが表示されます。

タグタイプの中から〔Google オプティマイズ〕を選択します。

それぞれの入力項目に、値を入れて〔保存〕します。入力する値は下表をご参照ください。

タグを登録しただけでは稼働しませんので、タグを稼働させるための条件を登録します。GTMに登録されたタグを発火させるための条件は「トリガー」機能を利用します。

具体的なテスト配信対象ページは、Google オプティマイズの管理画面で設定することができます。GTM上では、GTMタグが設定されているすべてのページで配信されるように「All Pages」トリガーを選択します。

タグに対し配信トリガーを設定したら、画面右上の〔送信〕ボタンをクリックし、このタグを公開します。

GTMの特性ですが、管理画面に設定した後に、公開作業をすることで初めてウェブサイト側に設定が反映されますので、公開作業は忘れずに行いましょう。

GTMでの設定は以上となります。次の章では、いよいよ実際にテストを稼働させるための設定を行います。

10.Google オプティマイズのテスト配信条件を決定する。

Google オプティマイズの管理画面で、作成したテストの配信比率や配信条件を決定します。

テストを稼働する場合には、

  • ターゲット比率
  • 配信比率
  • 配信条件

の3つの要素を決める必要があります。

ターゲット比率を決める

ターゲット比率とは、テストに含める訪問ユーザの割合のことです。テスト結果を早く出したい場合は、テストに含めるユーザの割合を高くします。ただし、大幅な変更やリスクをともなうテストの場合には、テストに含めるユーザの割合をほんの少し低くするようなリスクヘッジをすることができます。

配信比率を決める

配信比率とは、各パターンを配信する比率のことです。

配信比率は、パターンごとに決めることができますが、配信比率を0%に設定することはできませんので、「オリジナルのコンテンツは配信しない」というコンテンツの完全切り替えを目的とした使い方はできません。

配信比率は、それぞれのパターンの配信比率の和が100%になるように設定が必要です。

・オリジナル:33.3%
・パターンA:33.3%
・パターンB:33.3%

と「均等配分」で配信することや、

・オリジナル:50%
・パターンA:25%
・パターンB:25%

と不規則に配信することができます。

配信条件を決める

配信条件とは、テストを配信する条件やタイミングのことです。

  • ページの読み込み
  • カスタムイベント

の2通りの方法から条件を選択することができます。

さらに、ルールの作成でテストを配信する条件を細かく指定することができます。例えば、

  • URLが特定の条件に一致した場合
  • IPアドレスによって判定された地域が、指定した都道府県の場合
  • アクセスしたOSがAndroidの場合
  • 1st Party Cookieの値が指定した値に一致した場合

など柔軟な指定が可能です。どんな条件で配信をしたいかを、イメージしながら設計するとよいでしょう。

  • ターゲット比率
  • 配信比率
  • 配信条件

の3つの条件を指定したら、実際にテストを稼働するフェーズに進みます。

11.Google オプティマイズでテストを公開し稼働する。

  • 目標
  • ターゲット

の設定が完了し、すべての登録条件がそろったらテストを稼働させます。

テストは即時配信反映のみで、配信開始予約はできません。

Google オプティマイズのテスト稼働中、連携しているGoogle アナリティクスのビューに設定している目標設定は編集できなくなります。テストの結果にも大きく影響する部分となりますので、必ず公開前に目標設定が正しく計測されるかどうかを確認してください。

12.Google オプティマイズのテストを停止する。

Google オプティマイズでの検証期間が終了したら、配信しているテストを停止します。テストは即時配信停止のみで、配信停止予約はできません。

画面右上の〔テストを終了〕メニューをクリックすると、下画像のアラートが表示されます。終了する場合には〔終了〕を選択します。

テストの配信が終了すると、実行ステータスが「終了」となり、テストが終了します。一度終了ステータスになったテストを再稼働することはできません。テストを終了する場合は、スケジュールに沿った行動か、テストの結果が出ているか、を確認した上で実施してください。

 

仮に終了したテストと同じ内容で再度配信設定をしたいという場合には、オプティマイズのホーム画面を表示し、すでに作成したテストを複製することができます。

Google オプティマイズのホーム画面を表示し、各テストの右側にあるメニューの、「コピーを作成」から複製することができます。

以上がGoogle オプティマイズの設定から停止までの一連の流れです。

最後に

Google オプティマイズの設定から公開・停止までの一連の流れをご紹介しましたが、いかがでしたでしょうか。

Google オプティマイズがあることで、仮説ベースでのアイディアを、リスクを低減した上でスピード感を持って検証することができるようになります。よりよいサイト作りに活かしていただくことができれば幸いです。

第3部では、Google オプティマイズの結果をレポーティングする方法についてご紹介します。

  • このエントリーをはてなブックマークに追加