GoogleオプティマイズでA/Bテストをやってみよう

bingo!CMS公式サイトをテストしてみました!

① テストを始める前に

■テスト開始前の前提条件
・Googleアカウントを持っていること
・Googleアナリティクスのタグがテスト対象のサイトに導入済みであること(Googleタグマネージャで作成したタグも可)
・Googleアナリティクスのユーザー権限が編集権限以上であること
・Google Chromeをインストール済みであること
A/Bテストでは、事前に立てた仮説をもとに小規模なテストを繰り返し、Webサイトの最適化を進めていきます。
今回のbingo!CMS公式サイトに対するA/Bテストは、以下のような仮説や考察をもとに実施しました。

■テスト実施の目的
・bingo!CMS公式サイトのトップページにおける、効果的なコンテンツの配置を考える。

■仮説
仮説① トップページ内にエンドユーザー向け、制作会社向けのコンテンツが混在している。サイトの訪問者が混乱してしまうのではないか。
仮説② トップページが長すぎて閲覧したいコンテンツを探せず途中で離脱してしまうのではないか。

■仮説をもとにした対策
・トップページのコンテンツの配置を変えたり、削除することでページビュー数に変化があるか検証する。

■検証にあたり行ったこと
・Googleオプティマイズをbingo!CMS公式サイトに導入する
・オリジナルのページ以外にテストページを3つ作成する
・目標と期間を設定しテストを実施する
・テスト結果を分析する

【ご注意】
このページで紹介しているA/BテストはGoogleオプティマイズの導入のために行った模擬テストです。
このページ内の考察はbingo!CMS広報担当の独自の見解です。参考程度にご覧いただければ幸いです。

② Googleオプティマイズを導入する

以下のURLを参考にGoogleオプティマイズを設定します。
https://support.google.com/optimize/answer/6211921

■設定すること
① Googleオプティマイズのアカウントとコンテナを作成する
② Googleアナリティクスと紐付ける
つぎに、以下のURLを参考にGoogleオプティマイズをサイトにインストールします。
https://support.google.com/optimize/answer/6262084

■導入に必要なこと
① オプティマイズスニペットを取得し、テストをしたいWebサイトのbingo!CMS管理画面/サイト設定/アクセス解析用タグの欄に記述して保存する
② 必要に応じ、①の記述の上にページ非表示スニペットを記述して保存する

③ テストページを作成する

Google ChromeにGoogleオプティマイズのオプティマイズ画像エディタをインストールします。
オプティマイズ画像エディタを使用すると、簡単な要素であればbingo!CMSのようにドラッグ&ドロップで移動・変更ができるほか、HTMLやCSSで複雑なテストページを作成することも可能です。

オプティマイズ画像エディタは以下のURLからインストールしてください。
https://chrome.google.com/webstore/detail/google-optimize/bhdplaindhdkiflmbfbciehdccfhegci

テストページは以下のURLを参考に作成してください。
https://support.google.com/optimize/answer/6211930?hl=ja

今回は、以下のような考察をもとにオリジナル以外にテストページを3パターン作成しました。
パターン① お知らせをページの上部に持ってくる
仮説:トップページからお知らせへの遷移が少ない。オリジナル版はお知らせがページの下部にあり、スクロールを繰り返さないと表示されないため、ユーザーの目に留まらないのではないか。
対策:お知らせをページの上部(カバーの直下)に配置したテストパターンを作成する。
パターン② デモ関係を上に持ってくる
仮説:デモサイトへのお申し込みが減っている。パターン①と同様の理由でユーザーの目に留まらないのではないか。
対策:デモサイトへのリンクをページの上部(カバーの直下)に配置したテストパターンを作成する。
パターン③ 好き勝手やってみた
仮説:トップページに掲載する必要のないコンテンツが多すぎるのではないか。
対策:ランディングページとして機能しそうなコンテンツのみ残したテストパターンを作成する。

④ A/Bテストを開始する

ターゲットや期間、目標をあらかじめ設定します。
テスト開始後は変更できない項目があるので、設定内容の誤りにご注意ください。
今回のテストでは以下を設定しました。

ターゲティング
【条件】URLが次と一緒:bingo!CMS公式サイト
【かつ】デバイス カテゴリが次と等しい:desktop
※レスポンシブデザインでない場合、デバイスごとにテストを実施するのが望ましいです。

テスト期間
一週間
※通常は最低二週間以上続けることが推奨されていますが、今回は一週間としました。

目標
ページビュー数
※テストパターンによって閲覧するページ数に変化があるか検証するため。

⑤ テスト結果を確認する

設定した終了時刻を過ぎると自動でテストが終了します。何らかの理由で途中でテストを止める場合は手動で停止することも可能です。
テストの結果はGoogleオプティマイズ、Googleアナリティクスの両方で確認することが出来ます。
Googleオプティマイズのレポートでは、オリジナルのページビュー数を基準値とし、テストパターンが最適である確率やベースラインを上回る確率などが確認できます。
Googleアナリティクスのレポートを開くと、テスト結果がグラフで表示されます。
デフォルトではすべてのユーザーが対象になっていますが、セグメントを適用することでリピーターや新規ユーザーごとの結果を確認できます。

bingo!CMS公式サイトにおける平均のページビュー数の増減率は下記の表の通りです。
オリジナルと比較した場合の
平均ページビュー数の増減率
すべてのユーザー リピートユーザー 新規ユーザー
お知らせを
ページの上部に持ってくる
0.65% 34.36% 59.57%
デモ関係を上に持ってくる

-43.57% -33.22% -29.26%
好き勝手やってみた

-19.83%
69.06% 175.00%
■テスト結果のまとめ
・新規ユーザーにおいては、無駄なコンテンツをなくしたほうが平均ページビュー数が伸びた。
・お知らせの位置をページ上部に配置するとリピートユーザー・新規ユーザーともに平均ページビュー数が伸びた。
・デモ関係のコンテンツはページ上部に配置しても平均ページビュー数が伸びず、逆に低下した。

■今後の課題
・ファーストビューに最適なデザインがどのようなものか別途検証する。
・お知らせはページの上部に設置するがどの位置が最適なのかを別途検証する。
・デモ関係のコンテンツはコンテンツ自体の変更が必要な可能性が出てきたため別途検証する。

bingo!さん

テスト結果は以上です。
皆さまもWebサイトの最適化のためにぜひ挑戦してみてくださいね。

ページトップ