Google Optimizeを使ってサイト改善を手軽にはじめよう

「バナーを作りたいが、どんなクリエイティブが良いか判断できない…」
「ボタンのクリック率が悪いが、何が悪いのか明確にわからない…」

そんな悩みは、日々のサイト運用の中で尽きないのではないでしょうか。

今回は、エンジニア・デザイナーの工数を取らなくても気軽にA/Bテストが実施できるGoogle Optimizeの使い方を詳しく解説します。
PDCAをスピーディに回したい方は、自分自身で使えるツールを使ったサイト改善を試してみてはいかがでしょうか。

Google Optimizeとは

Google Optimize（以下、Optimize）は、有料サービスGoogle Optimize360 の無料版として提供されているA/Bテストツールです。
ソースコードに実装タグを貼り付けるだけで、画面上の要素を変更することができ、手軽にA/Bテストを実施することができます。

無料版の制限

無料版では同時に5つまでテストを実施できます。有料版になるとこの制限が緩くなり、同時に100個以上のテストを実施することができます。

とはいえ、1つのサイト上でOptimizeを使用するのであれば、無料版の5つで充分でしょう。同じ箇所で複数のテストを同時に実施する場合、分析がかなり複雑になるため、あまり実施をおすすめしません。

また、有料版ではA/Bテスト実施時に追加できる目標の数が増えたり、Google アナリティクスと連携できるデータが増えます。そのため、Google アナリティクスとの連携を強化して分析に力を入れたい場合は、有料版の導入を検討しても良いかもしれません。

参考：
オプティマイズとオプティマイズ 360 の比較

Google Optimizeの登録

Google Optimize

Optimizeを使用するには、Googleのアカウントが必要になります。Google アナリティクスと連携して使うため、同じアカウントを使用しましょう。

Google Optimizeのページにアクセスし、必要情報を入力して登録します。

A/Bテストの基本設定をする

右上の「テストを作成」ボタンをクリックして、新規テストを作成します。

テスト設定のための基本情報を設定します。

テストの名前

自由な名前をつけることができますが、テストが多くなってくると一覧で見つけるのが煩雑になってくるので、命名規則を設けておくことをおすすめします。

例えば、

【テスト開始日_デバイス_テスト対象画面名_テスト内容】

のように、ある程度決まった形式で命名規則を作っておくと、テストが増えても過去のテストが見つけやすくなります。

テストするページのURL

ここで設定したURLが、テストを設定するときに表示されるURLになります。テストで変更したい要素があるページのURLを指定しましょう。

実際にテスト対象になるページのURLは後ほど別の項目で設定します。

テストのタイプ

A/Bテストは、ページ上の特定の1箇所の要素のみを変更するテスト形式です。

ページ上の2箇所以上の要素を同時に変更して、最適な組み合わせを探すには多変量テスト(MVT)を選択します。

ランディングページなどで、2つのhtmlファイルを用意してどちらのページの効果が良いかを調べる場合はリダイレクトテストを使います。

次の画面に進んだら、実際にA/Bテストを設定していきます。

A/Bテストの「パターン」を設定する

「オリジナル」が何も変更を加えないパターンです。
その下の「パターンを作成」をクリックすると、パターン1が作成されます。

「0件の変更」と書いてある赤文字をクリックすると、テストのエディタ画面に移動します。

こちらがA/Bテストのエディタ画面です。

マウスを載せると要素が選択でき、右下の窓で詳細な設定を入れたり、ドラッグ&ドロップで要素の移動やサイズ変更ができます。

従来であればJavaScriptなどを書いて変更する必要がありましたが、画面上で直感的に変更できることでWeb担当者だけでも簡単なA/Bテストを設定することができます。

テストを設定し終えたら、右上の「完了」ボタンを押して保存します。

テキストを変更する

文字を選択して右クリックして「テキストを編集」を選択します。終わったら右下の「完了」を押すと、画面上の文字が変更できました。

ボタンの色を変える

変更したいボタンを選択して、右下の窓の「背景」の箇所で色を指定します。右に出る「…」をクリックすると、スライダーで色を変更できます。

要素の位置を変える

ドラッグ&ドロップで、要素を移動することができます。

要素を追加/削除する

追加する場合、要素を追加したい前後の要素を選択して右クリックし、「HTMLを挿入」を選択します。
左下で要素を追加する位置を選択します。選択した要素の前に追加したい場合は「次より前」、選択した要素の後ろに追加したい場合は「後に挿入」を選択します。

削除する場合は、削除したい要素を選択して右クリックします。一番上の「削除」を選択すると、選択した要素を削除できます。

（上級者向け）JavaScriptやCSSを直接書き込む

左上にある四角いマークをクリックして、「要素の選択」窓を開いたら、その右下のプルダウンから「JavaScript」を選択することで、JavaScriptコードをかけるようになります。

CSSを書く場合は、右上の<>マークを選択します。

目標（評価指標）を設定する

テストを設定し終えたら、コンバージョンを設定します。
「目標」はテストで上昇させたい数値のことです。

プルダウンの「リストから選択」はGoogle アナリティクスに設定されている目標から選択する場合に指定します。

「カスタム目標を作成」を使うと、Google アナリティクスに送っているイベントトラッキングなどをA/Bテストの評価指標として使用することが出来ます。

最後に、テスト対象を指定します。

A/Bテストは各パターンが均等に配分される必要があるので、「ユーザーの比率」は50%ずつにしておきます。

「追加条件」の箇所で、A/Bテストが実施される条件を指定できます。
先程、テストするページのURLの箇所では特定の1ページを指定しましたが、ここで実際にテストする全てのページが該当するように条件を指定します。

特定のデバイスカテゴリのみで実施

「テクノロジー」では、ブラウザ・OS・デバイスカテゴリなどが選択できます。
デバイスカテゴリはGoogle アナリティクス同様「PC」「モバイル」「タブレット」から指定できます。

特定のURLのみで実施

テストを特定のページのみで行いたい場合は、「URL」を選択してテスト対象のURLを入力します。
「●●を含むページ」のような条件指定だけでなく正規表現も使用できるため、柔軟に条を指定できます。

URLを指定したときは、下に表示される「ルールの確認」エリアで必ずURL指定が間違っていないか確認しましょう。特に正規表現を使ってURLを指定した際には思わぬ設定漏れが無いようにチェックをすることが大事です。

特定のチャネルのみで実施

「特定の広告クリエイティブから来た時に、LPの要素を変更する」といったように、チャネルごとにA/Bテストを制御することもできます。

「クエリパラメーター＞新規作成」を選択すると、特定のパラメーターがついたURLのみでテストを実行することができます。
例えば「utm_campaign=summersale」というパラメーターがついている時のみ実施したい場合は、クエリキーに「＝」の左側を、値に「＝」の右側を指定します。

「ルールの確認」を使って確認してみると、指定したパラメータが付いている時だけテスト対象になっていることがわかります。

テストの配信設定

準備ができたら、いよいよテストを実施します。
即座に始めることもできますが、スケジュール機能を使って開始・終了のタイミングをあらかじめ決めておくこともできます。

テストを実施していて、「やっぱり終了日をもう少し先に伸ばしたい」といった場合は、後から変更することも可能です。

まとめ：まずは気軽にテストを始めてみよう

Optimizeを使ったA/Bテストの設定は、実際に使ってみるのが一番覚えやすいはずです。

また、直感的に要素の変更ができるので、「なんだか難しそう……」と不安なようでしたら、まず一度触ってみると良いでしょう。心理的ハードルがかなり下がると思いますよ。