Webサイトを持っている人なら、コンバージョンを高めるためにボタンやマイクロコピーの最適化をしたいと思うこともあるでしょう。
ボタンの最適化といえばA/Bテストですよね。
ほんのちょっと変えるだけでCVRが大きく改善されることもあるので、ある程度のアクセスを取れるようになったら行っていきたい施策です。
でも、
「やった方が良いのは分かるけど、実際A/Bテストってどうやるの？」
「有料のツールを使わないとできないんじゃないの？」
という人もいると思いますので、今回は無料で使えるGoogle Optimize（グーグルオプティマイズ）を利用してA/Bテストを実施する方法を解説します。
Web担当の方は、ぜひ参考にしてみてください。
目次
A/BテストをGoogle Optimizeで行う理由
世の中には、A/Bテストを行うことのできるツールがいくつかあります（例：Optimizely）。
その中でなぜGoogle Optimizeを使うかというと、一番の理由は「無料だから」ということに尽きます。
A/BテストができるツールはA/Bテスト以外の機能を持っていたりしますが、これからA/Bテストを行おうという段階の人には無用の長物。
まずはGoogle OptimizeでA/Bテストを試し、物足りなければ他の機能も搭載したツールを検討すれば良いでしょう。
Google Optimizeなら、無料でA/Bテストだけでなく「多変量テスト（※1）」や「リダイレクトテスト（※2）」も行えるので、解析ビギナーなら十分です。
[memo title=”補足”]※1 多変量テスト…複数箇所の最適なパターンを同時に測ることができるテスト
※2 リダイレクトテスト…要素単位のテストではなく、アクセスしてきた人を複数のURLに振り分けて最適パターンを調べるテスト[/memo]
Google Optimizeのデメリット
Google Optimizeのデメリットは、クリック率を測ろうと思ったらGTMも使う必要がある点でしょうか。
計測したデータを見るためにGoogleアナリティクスもある程度できるようになっている必要があるので、これらにあまり馴染みがない人だと若干ハードルが高いかもしれません。
裏を返せば、Google Optimizeが使えるようになればGTMやアナリティクスも使えるようになるということなのですが、順序としてはアナリティクスとGTMを先に覚えることになると思うので、慣れない人には結構大変かもしれませんね。
最初からGoogle Optimizeをスイスイ使える人がいたら、その人はかなりリテラシーが高いです。
Google Optimizeの導入方法
では、実際にGoogle Optimizeを導入する方法を見ていきましょう。
まず最初に、以下にアクセスしてください。
[center]≫Google オプティマイズ[/center]
右上にある「無料で利用する」のボタンから利用を開始することができます。
するとこのような画面が出るので、中ほどにある「利用を開始」ボタンをクリックしましょう。
「メール登録を行ってGoogleオプティマイズを最大限に活用」という画面の設定は、後から解除・変更が可能です。どちらを選んでも問題ないので、選択を終えたら右下にある「次へ」を押して進みましょう。
次に出てくる「アカウント設定の選択」の画面のチェックボックスも、後から変更が可能な設定なので、どちらを選んでも問題ありません。
僕はGoogleのセールススペシャリストとやらにアカウントへのアクセス権限を付与したいとは思わないので、「詳しい分析情報を入手（推奨）」のチェックは外しました。
画面下部には居住地域を指定するエリアがありますので、プルダウンから日本を選びます。GDPR関連はチェックを入れておいて良いと思います。
[sanko href=”https://www.sbbit.jp/article/cont1/34759″ title=”GDPR（EU一般データ保護規則）とは何か？ 概要と対応方法をわかりやすく解説する” site=”ビジネス+IT” target=”_blank”]
完了を押して進むと、コンテナ画面が表示されます。これでGoogle Optimizeの利用開始手続きは完了です。
Google Optimizeを使ったA/Bテストの設定方法
Google Optimizeの導入ができたところで、A/Bテストの設定をしていきましょう。
今回は単純に、色の違う2パターンのボタンのどちらがクリックされやすいかを調べるテストを設定します。
手順としては以下の通りです。
- GTMでクリック測定の設定を行う
- アナリティクスで目標設定を行う
- A/Bテストのエクスペリエンスを作成する
- 専用の拡張機能をインストールする
- ブラウザ上で別パターンを作成する
- アナリティクスにリンクする
- 目標設定を行う
- 公開する
手順が多くて思ったより混乱しがちですが、一つ一つ見ていきましょう。
１．GTMでクリック測定の設定を行う
クリック率の差を見るためには、それぞれのパターンにおけるクリック数を数える必要があります。
そのため、まずはGTMで計測対象となるボタンのクリック数を数えるための設定を行いましょう。
今回は、以下の記事に書いてある「（２）計測したいURLにCSSクラスを付与してそれだけを計測する」のやり方で、「optimize」というクラスが付与されたaタグがクリックされたときにカウントを行う設定をしました。
[kanren id=”292″ target=”_blank”]
なお、プレビューモードで挙動確認する際に入れると思いますが、もしまだであればこの時点で、A/Bテストを行いたい記事のボタンのaタグに「optimize」のクラスを付与しておきましょう。
ちなみに、ボタンを作っているdivに該当クラスを付与してもクリック数は数えられませんので、aタグにクラスを付与するように注意してください。
２．アナリティクスで目標設定を行う
次に、Google OptimizeのA/Bテストでクリック率の差を確認するために、アナリティクスで目標設定というのを行いましょう。
最初、これをやっていなかったからなのか、何回やってもアナリティクス上でクリック数の確認ができなくて苦労しました……。
[box class=”box25″ title=”表示方法”]「管理」＞「目標」[/box]
アナリティクスで上記の画面を開くと、下記のような画面になるかと思います。
「+新しい目標」をクリックして進みましょう。
すると目標設定画面に進み、「テンプレート」「カスタム」の2種類を選ぶことができますので、「カスタム」を選択した状態で「続行」を押します。
次に進んだら目標の名前を入力し、タイプで「イベント」を選択して「続行」を押します。
その次は、「どのイベントが発生したら目標のコンバージョンとしてカウントするか」という設定です。今回はイベントラベルで「等しい」「optimize」と設定します（※）。
※GTMの設定でイベントラベルを{{Click Classes}}にしていて、さらにaタグに「optimize」というクラスを付与しているため。
最後に「保存」を押せば、目標の設定は完了です。
補足：目標設定をせずにクリック数の差を見る方法
クリック数の差を見るためにはGTMのイベントトラッキングを使うのですが、そのイベントラベルを分けてしまえば目標設定をしなくてもそれぞれのクリック数を見ることができます。
例えば「click-blue」と「click-green」という2つのクラスを用意して、パターンAでは前者を、パターンBでは後者を使用。そしてGTMでクリックされたクラスをイベントラベルとして取得するタグを作成すれば、それぞれのクリック数を見ることでどちらがよりクリックされたか知ることができます。
ただ、アナリティクスで見る場所が散らばってしまうので僕はあまり好きな方法ではありません。
３．A/Bテストのエクスペリエンスを作成する
ここからはOptimize側の操作です。
「最初のエクスペリエンスを作りましょう」の画面で「開始」ボタンを押して進みます。エクスペリエンスというのは、一つ一つのテストのことだと考えて問題ありません。
すると画面右側にエクスペリエンス作成のエリアが出てきますので、エクスペリエンスの名前とA/Bテストを行いたいページのURLを入力し、作成するテストのタイプとして「A/Bテスト」を選んだ状態で右上の「作成」をクリックしましょう。
「下書き状態です。」という画面になったら、「パターンを追加」をクリックして進みます。
パターンの名前を入力すると、画像のようにパターンが追加されます。今回はオリジナルページがボタンリンクなので、「テキストリンク」という名前のパターンを追加しました。
「50％の比重」という箇所をクリックすると、それぞれのパターンがどれくらいの割合で表示されるかを設定することができますが、基本的には均等な割合のままで大丈夫でしょう。
４．専用の拡張機能をインストールする
新しく追加したパターンの「編集」をクリックすると、Chrome拡張機能のインストールを推奨する画面が出ます。こちらは素直にインストールしましょう。
拡張機能のインストールが完了したら、再度パターンの「編集」を押せば次に進めます。
５．ブラウザ上で別パターンを作成する
拡張機能のインストールが済んでいれば、パターンの編集画面が開きます。
マウスオーバーした箇所の要素をクリックすると、右側のエリアで編集することができます。
単純なテキストの編集のほか、HTMLの編集やJavaScriptの実行なども行えますが、基本はテキストかHTMLの編集を使うことになるでしょう。
編集が完了したら、画面右上にある「保存」を押し、さらに「完了」を押します。
６．アナリティクスにリンクする
パターンの設定が終わったら、次はエクスペリエンスをアナリティクスとリンクさせましょう。
「測定と目標」セクションにある「アナリティクスにリンク」というボタンをクリックして、リンク先となるプロパティとビューを選択すればOKです。
ここで、ページに挿入するスニペットが出てきます。表示されたコードをページに挿入しましょう。
診断を実行することで、正しく挿入できているかチェックできます。
７．目標設定を行う
次に、Google Optimize上で目標の設定を行います。アナリティクス設定のすぐ下に「目標」というセクションがありますので、「テスト目標を追加」をクリックしてください。
「リストから選択」「カスタム目標を作成」の2種類がプルダウンで出てきますが、ここは「カスタム目標の作成」を選びます。
目標タイプは「イベント」を選び、「すべてのルールに一致（AND）」という箇所で【イベント ラベル】【次と等しい】【optimize】と設定していきます。
今回はoptimizeというクラスを用意したためこのような記述ですが、もちろんクラス名が異なる場合は用意したクラス名を入力するようにしてください。
説明はスキップし、カウント方法はプルダウンから「セッションごとに複数回」を選びましょう。
「ルールの検証」の箇所では、現在の設定で過去7日間に適用できるセッションがあったかどうかが表示されます。ルール設定が誤っていた場合、ここで気づける可能性がありますね。
ここまで設定できたら、目標の名前を分かりやすいものに設定して右上の「保存」を押しましょう。なお、副目標は設定する必要がありません。
８．公開する
最後に、設定が完了したエクスペリエンスを公開します。
画面上部に「準備完了です。」という表記があるのを確認したら、「開始」をクリックすることで測定をスタートすることができます。
A/Bテストの結果を確認する方法
Google Optimizeで設定したテストの結果は、アナリティクス上で確認することができます。
[box class=”box25″ title=”表示方法”]「行動」＞「ウェブテスト」[/box]
ウェブテストの画面を開き、作成したテストをクリックするとデータを確認することができます。
画像は違うサイトのデータですが、それぞれのセッション数とコンバージョン数（＝今回はクリック数）、コンバージョン率（＝今回はクリック率）を確認することができています。
アクセス数次第ですが、1ヶ月くらいテストを走らせれば、多くの場合で十分なデータを取ることができるかと思います。
まとめ
アナリティクスやGoogleタグマネージャなども一緒に使用するため、慣れた人でないとちょっと設定が大変かもしれませんが、Webサイト運営においてA/Bテストを行えるというのは非常に便利かつ有益です。
1ヶ月チェックして、要素を編集してもう1ヶ月チェックして……という方法でもA/Bテストはできますが、テスト期間が2倍必要ですし、季節的要因の影響を受けないとも限りません。
一方、Google Optimizeなら、同時に複数パターンのコンバージョンをチェックすることができますので、そういった影響を抑えつつ本当に効果のあるデザインやマイクロコピーを探せますね。
Webは効果測定がしやすいというのが大きな強みなので、そのメリットを最大化するためにも、ぜひA/Bテストを実施してみてください。