Webサイトで成果を上げるには、Webページの改善が欠かせません。特にサイト運営を行う上で重要なKPIとなるのがCVR(コンバージョンレート)です。
CVRを向上させるには、なぜユーザーがCVに至っていないか仮説をたて、ABテストでユーザーインサイトがどこにあるのか検証していく方法が有効です。
そこで今回ご紹介したいのが、Googleが提供する無料ABテストツール「Googleオプティマイズ」です。従来までABテストを行うには多くの障壁 がありました。
- 細かいサイト改修を制作会社に依頼するのはコミュニケーションコストがかかる
- 自社にサイト改善を行うための専門人材がいない
- 効果が出るかわからないモノに予算を割くことが難しい
- テストを実施するためのページを用意することが難しい
- 有料ツールは高くて導入できない
しかしGoogleオプティマイズはこれらの課題を一挙に解決し高速にABテストを回すことが可能です。Googleが提供するプロダクトであるため、Googleアナリティクス、Google広告などその他の製品とも連携も可能であり、データを利用して様々な角度からサイト改善を実施することが可能となります。
当記事ではGoogleオプティマイズについて設定・導入方法をご紹介したいと思います。
Googleオプティマイズとは
Googleオプティマイズは、Google製品の中でABテスト(サイト改善)をメインとして提供されているサービスです。Googleアナリティクスと同じように、ページにタグを設置することで動作するため導入も非常に簡単です。
ABテストツールは有名サービスとなると月数十万円の利用料金がかかるツールが少なくありませんでしたが、Googleオプティマイズは無料で同時に5つまでテストが可能です。
小規模〜中規模サイトでは5つ以上の施策を同時に行うケースは少ないと思いますので無料版で十分実践的な利用が可能です。
Googleオプティマイズ登録
それでは早速アカウントを開設していきましょう。
まずオプティマイズへログインします。
ログインしたら、「利用開始」を選択します。すると情報を受け取るためのライトボタンが現れるので、希望に合わせてチェックを入れて「次へ」を選択します。
次に地域で日本を選択し、各利用規約を参照の上チェックし「次へ」進みます。
これでアカウント開設は完了です。
Googleオプティマイズでテストケースを作成する方法
次にオプティマイズを利用するためのテストケースを作成します。「開始」を選択するとウィザードが表示されますので「名前」「URL」を記入し最後にテストタイプを選択します。
| ABテスト | ABテストはサイトの一部分を変更した場合の変化を知りたいときにおすすめのテストタイプです。コピー、バナー、カラーテストなどを実施するときに活用します |
|---|---|
| 多変量テスト | 多変量テストは、サイトパーツ(セクション)の最適な組み合わせを探るためのテストタイプです。最大4×4要素の組み合わせを一挙にテスト可能なため、16の組み合わせパターンから最適な要素パターンをテスト可能です。 |
| リダイレクトテスト | リダイレクトテストは対象ドメインに遷移したユーザーを別のランディングページへリダイレクトさせることができる設定です。例えば新しいランディングページを作成した場合などに旧ページとどちらがCVRテストするような使い方が可能です。 |
| カスタマイズ | カスタマイズを利用すると、テストの対象ユーザーを絞り込むことが出来ます。スマホやPCで分ける簡単なものから、特定のデータレイヤー変数からなるユーザーリストなどを作成するといかようなテストケースも作れるでしょう。 |
今回はベーシックなABテストを利用したいと思いますのでABテストを選択します。
テストケースの作成
それでは早速テストパターンを作成してみます。こちらからGoogleオプティマイズの拡張機能をクロームへ導入しましょう。
この拡張機能はサイトリソースをビジュアルエディターで変更できるので簡単にデザイン変更を行うことができます。
インストール後に有効化したら、「編集」をクリックしページを表示します。
テストを行うページが表示されますので、変更したい箇所をクリックで選択します。今回は例としてテキストを編集したいと思います。
要素を選択したら、エディターから「HTMLを編集」を選択します。
するとHTMLを編集するエディターが表示されますので、テキストを打ち変えます。
オプティマイズはJavascriptで編集内容が上書きされる仕様のため、本番環境のHTMLコードは影響を受けません。
最後に右上に表示されている「保存」ボタンをクリックして完了です。
もし２パターン以上のABテストを実施するのであれば、「バリアント」を選択して以降同様にテストパターンを増やします。
正しいABテスト実施方法
ABテストは基本的に1画面1要素のテストを実施します。ABテストの目的はデザインやコピーの要素変更による成果指標への影響度を計測することにあるため、
複数施策を同時期に実施してしまうと、成果が上がったとしても、何が成果を上げる影響要因であったのかを定量的に推察することが出来なくなります。
テストを複数同時に実施する場合は、施策同士が互いに影響を与えないように注意しましょう。
ページターゲティング設定
ページターゲティング設定では、テストしたいページできちんと対象ページで配信されるか確認しておきましょう。
マッチタイプによっては、 httpsとhttpの違いや www がURLに入っているか否か厳密に識別されるので、最後にルールの確認を行って配信ステータスを確認します。
1ページのみ施策を実施する場合であれば、変数にドメインを選択し、マッチタイプは「次に一致」でURLを挿入します。
商品一覧ページのように同階層の全てのページをテストしたい場合は、以下のような方法でテスト対象ページを選択します。
商品一覧(item-list)の構造が https://aaa.com/item-list/item/のような場合であれば /item-list/ を「含む」または https://aaa.com/item-list/ を「先頭一致」で選択すれば絞り込みをかけることが出来ます。
詳しくはOptimaize公式を参照しチェックしてください。
オーディエンスターゲティング設定
オーディエンスターゲティング設定では、テスト対象となるユーザーを絞り込むことが可能です。アカウントをリンクすることで「Google広告経由ユーザー」や「Googleアナリティクス」のデータを利用できます。
利用方法は幅広いですが、「モバイル経由ユーザー」「特定ページを閲覧したユーザー」「会員ユーザー」のみ絞り込んでABテストを実施したいなどの要件があればオーディエンスターゲティングを設定すると良いでしょう。
ページの追加
ページの追加を選択すると、ページ遷移を伴うABテストを実施することが可能です。例えばECサイトで「商品ページ」→「カート」→「決済情報入力」→「決済情報入力完了」のような導線があった場合に、ページを追加しておくと、この一連ページでテストパターンを作成しユーザーフローを追うことが可能です。
測定と目標設定
測定と目標設定では、今回のテストで目的とするCV(コンバージョン)目標を設定します。Googleアナリティクスと連携を選択します。
オプティマイズのスニペットが表示されますので、これをWebページに貼り付けることでオプティマイズは動作します。
gtag.jsなどを利用している場合は、アナリティクスのトラッキングコード赤字部分にオプティマイズIDを挿入することで設定は完了です。
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-139861827-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXX-1', { 'optimize_id': 'GTM-XXXXXX'});
</script>
XXXXX部分をご自身の環境に合わせていただくことでも利用できます。
オプティマイズは古いバージョンのGoogleアナリティクスタグには対応していません。従来版のGoogleアナリティクスなど古いバージョンを利用されている場合は、gtag.jsなど最新バージョンへ移行しましょう。
今回は推奨のGoogleタグマネージャーを利用した方法についてご紹介します。
Googleタグマネージャーを利用したGoogleオプティマイズ設定
Googleタグマネージャーで設定するためにタグマネージャー へ移動します。移動したら「タグ」→「新規」を選択します。
次にGoogleオプティマイズのタグを選択します。
すると以下のような画面が表示されるので、オプティマイズIDとGoogleアナリティクスの設定を入力し、最後にオーバーライドを有効化します。
GoogleアナリティクスとGoogleオプティマイズは連携しているため、タグマネージャーに登録されたGoogleアナリティクスタグと設定を一致させる必要があります。
オプティマイズのコンテナIDと、連携しているGoogleアナリティクスIDはオプティマイズのエクスペリエンス管理画面(TOPページ)で確認できます。
全て入力が完了したら保存を選択します。
以下のように「トリガーが設定されていません」と表示されますが、問題ありませんので保存を選択します。
Googleアナリティクスタグ設定
先ほど設定を行ったオプティマイズのタグを動作させるには、Googleアナリティクスのタグも変更を加える必要があります。
「タグ」からGoogleアナリティクスタグを選択し、Googleアナリティクスタグが発火する前にオプティマイズタグを読み込ませる設定を行います。
保存し、最後にGoogleタグマネージャーを公開して終了します。
アンチフリッカースニペットの追加
アンチフリッカースニペットは、ABテストを読み込みを行う際にちらつきを抑えるためのコードです。
追加必須ではありませんが、このコードを挿入することで、ユーザーがABテストページに訪問した際に一定時間(4秒)の猶予を持ってABテストが読み込まれるようになります。
<!-- Page hiding snippet (recommended) -->
<style>.async-hide { opacity: 0 !important} </style>
<script>
(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);
})(window,document.documentElement,'async-hide','dataLayer',4000,{'GTM-XXXXXX':true});
</script>GTM-XXXX部分をご自身のGoogleタグマネージャー コンテナIDを挿入し、Googleタグマネージャータグよりも上にこのコードを貼り付けます。
目標の追加
次に目標の追加を行います。今回のABテストでメインとなる目標を選択します。メインとなる目標の他に無料版では2つの副目標を設定できるのでニーズに合わせて選択しましょう。
設定項目
最後に設定項目を確認します。
| オプティマイズのインストール | 実行するとエラーが表示されますが、これはGoogleタグマネージャーを利用しているためなので、無視して構いません。アナリティクスタグなどに直接貼り付ける方法で導入された場合はタグの挿入位置に間違いがないか確認しましょう。 |
|---|---|
| メール通知 | 特定のマイルストーンに到達した場合にメール配信するよう設定できます。 |
| トラフィックの割り当て | 全体のトラフィックからABテストに利用するトラフィックの割合を設定できます。 |
| アクティベーションイベント | アクティベーションイベントは動的ページをテストしたい時などに利用します。 |
配信開始とレポート画面
では開始を選択して配信を確認します。「オプティマイズのインストールを確認できません」と表示されますが、これはGoogleタグマネージャーを利用しているためなので無視して「開始」を選択しましょう。
これで、配信設定は完了となります。
配信開始とレポート画面
オプティマイズの配信確認は「オプティマイズ」→「レポート」から確認する方法と、Googleアナリティクスから確認する方法があります。
まとめ
いかがでしたでしょうか？Googleオプティマイズは非常に簡単かつ手軽にABテストを実施することが可能です。
しかしテストはきちんとした仮説作りと検証を行うテスト・トラッキング設計が重要です。PALCOOLではWebbサイトのABテスト運用を含むCVR改善のコンサルティングも行なっております。
ご興味があればこちらから是非ご相談ください。