サイトの効果検証、ABテストにGoogleオプティマイズを活用する

GoogleオプティマイズがABテストに良さそうな話

Googleのオプティマイズ機能を試してみたことはありますか？

最近、春に向けてホームページのリニューアルを行いたいというご相談を受けることが増えてきました。
なるほど、もうそんな時期なんだなと思いつつ弊社でも商品サイトやコーポレートサイトのリニューアルに向けて準備をしている最中です。
こうしたリニューアルやサイトの効果検証や調整を行うために、マーケティングのチームでは日々テストを行っています。
WEBで行うテストというとイメージが付きにくいかもしれませんが、こんなことが気になったことはありませんか？

こうした時、我々はよく双方を表示させてユーザーの反応を見る「ABテスト」を実施することがあります。

世の中には多くのABテストツールがあります。
有料のものから無料のものまで様々ですし、テストできる内容やバリエーションの付け方もいろいろあります。
個人的には「Juicer」というサービスなんかも扱いやすくて好きですね。
また実際にAパターンとBパターンのページを用意してテストを行うのであれば、アナリティクスでもABテストが可能です。
しかし今回は「テストを行ってからページの変更を行う」ということを念頭において、オプティマイズを使った方法をご紹介したいと思います。

ABテストってなんだろう？

上記で述べたように、例えばバナーや配置を「Aパターン」「Bパターン」の2つ用意して
どちらの方がより良い結果（例えば問い合わせや滞在時間が伸びたなど）になるか検証する方法のことをいいます。

ABテストは、特に多くのユーザーが見るであろうトップページのレイアウトや、広告に対応するランディングページの検証などで効果を発揮すると言われています。
細かいところではありますが、テストで入れ替え反応を見る項目としては以下のようなものがあるでしょうか。

もっと他にもありますが、「新婚さん用バナーを置くのとペットOKバナーとどっちがいいのかな？」などで取り入れてみることをイメージすると、わかりやすいかもしれません。

Googleオプティマイズを使うために

まずは、GoogleAnalyticsやその他のサービスの中から「オプティマイズ」を選択してみましょう。
ログインして出てくる■が4つ配置されたアイコンを押すと選択肢が出てきます。
利用を開始すると、アカウントが作成され「コンテナ」を作成することになります。

アカウント？コンテナ？

アカウントやコンテナは大きな箱のようなもので、いろいろなABテストを作成、グループ分けする親となるものです。

イメージするとこんな感じでしょうか。
アカウントの中にコンテナがあり、コンテナの中に各種テスト（エクスペリエンス）が作成されます。
コンテナについては、後ほど発行されるコンテナIDをサイトに埋め込む必要があります。

タグマネージャーを利用してサイトに埋め込む

さて、オプティマイズを利用してテストを行うために、認識できるコードがサイトの中に必要です。
今回はすでにアナリティクスや他の計測タグが入っていることを想定し、その状況でもスムーズにスタートできる
Googleタグマネージャーを使った設定方法を記しておきます。

１）タグマネージャーにログイン後、コンテナからタグを設定します。

タグの種類に「オプティマイズ」が用意されているので選択肢、コンテナIDを入力します。
また、オプティマイズと連携したアナリティクスのIDを入力します。

２）トリガーを設定せずに保存

タグを発動させるトリガーを設定するところがありますが、今回はこれを「設定せずに保存」します。

３）アナリティクスタグの順序付けを変更する

続いて、アナリティクスタグの設定項目へと移動し、詳細設定＞タグの順序付けから「アナリティクスが発行する前にタグを配信」にチェックを入れて保存します。

４）タグマネージャーを更新

上記でタグマネージャーを使った設定は完了します。
このタグを埋め込む設定方法が少々ややこしく、設定までに時間がかかるかもしれません。
一つずつ確認しながら進めていただければと思います。

エクスペリエンスを作ってみる

エクスペリエンス（テストの項目）を作成してみましょう。
パターンを追加からテストするサイトのパターンを作成します。
例えば、「バナーの色が赤い方」などですね。

項目を作成すると、今度はエディターに入り実際に変更する箇所を操作します。
バナーの画像や文字の色など、テストしたい要素をここで設定します。

エクスペリエンスをアナリティクスと紐付ける

エクスペリエンスもアナリティクスとリンク設定が必要です。
すでにプロパティは設定されていると思いますので、ビューをプルダウンで選んでおきましょう。

パターンとターゲティング

どのくらいの比率でユーザーにテスト版を表示させるか、またどんなユーザーに対してテストを行うかを設定することができます。
例えば、ユーザーの地域やブラウザ、滞在時間や参照URLなどを指定することができます。

目標の設定

目標の設定では予め用意されたいくつかの項目、例えば滞在時間やCVの達成などの項目を指定できるほか、ページビューや任意のイベントなどをカスタム目標として設定することもできます。

ノンデザイナーでも操作できる操作性

コンテナの設置さえ完了してしまえば、後はスムーズです。
サイトの変更箇所は非エンジニア、ノンデザイナーでも直感で操作できるので扱いやすいのではという印象でした。
もちろん、HTMLやCSSの知識があればよりスムーズに操作できると思いますが、「画像を設置できる」というレベルくらいでも大丈夫なのではないでしょうか。
色の変更などもバーを左右に操作して行うことができるので色コードに詳しくなくてもいいですし、元々画像が設置されているところにはURLが出てきて表示したままか、「none（非表示）」かを選ぶことができます。

ここで行う変更はあくまでも「テスト用」なので、そのテストを終了させると元々の表示に戻ります。
そのため、テスト結果によって「問い合わせバナーは赤いほうが良かった」となった場合は、今度は本物のホームページの改修が必要です。
とは言え、WEB担当の範囲内でテストを完結させ、結果によって制作部門やデザイナーに本作業を依頼する。
こうした流れができると、効率よくテストを行いホームページをより良いものに育てていくことができるのではないでしょうか。
ノンデザイナーのWEB担当にも使いやすい仕組みです。

ほんと便利な世の中になりましたよねえ・・・・。