GoogleオプティマイズでABテストをする方法

Googleオプティマイズを使ってABテストをする方法を紹介します。

リライト後の効果を確かめるのに重宝してます。

MEMO

すべての画像がクリックで拡大できます。画像が見えづらいときにクリックしてみてください。

このページの目次

注意
Googleオプティマイズの特徴
前提条件
Googleオプティマイズを使ってテストを開始するまでの流れ
1.Googleオプティマイズのアカウント作成
2.Googleアナリティクスとリンク
3.HEADタグへコードを追記
- gtag.jsを使う場合
4.Chromeのアドオンを追加
5.テストを作成
- テストパターンを作成
6.テスト目標を設定
7.テストを開始
レポートの確認
- Googleアナリティクスより確認
参考サイト

注意

この記事に載せた手順で、テストは問題なくできます。しかし、テスト開始前にエラーが検出されるので気になる方は注意してください。

エラー内容

サイトの利用状況を測定することも、オプティマイズのテスト結果を確認することもできません。

実際にはアナリティクスから利用状況を確認できますし、オプティマイズのテスト結果も確認できています。

ただ、100%大丈夫とは言えないので自己責任で使って欲しいです。

Googleオプティマイズの特徴

無料でABテストができる

Googleオプティマイズは無料で使えます。気軽に始められるのでおすすめです。

テストパターンの作成がWeb上で簡単にできる

編集したい要素を選んで右クリックすると編集できる

Googleオプティマイズでは、上記画像のようにWeb上でテストパターンを作成します。自分のサイトを見ながら画面上でレイアウトを変更し、変更後のデザインをテストパターンとして登録します。かなり直感的な操作が可能です。

レポートで様々な情報が確認できる

私はセッションの継続時間を指標にテストしていますが、以下のようなレポートが確認できます。

レポート

特に助かっているのが「最適である確率」を教えてくれるところです。セッションの継続時間をもとに、A案とB案のどちらが最適かをパーセンテージで表示してくれます。

前提条件

簡単なHTML、CSSが読める（推奨）
Chromeが使える
Googleアナリティクスのアカウントを取得している

Googleオプティマイズを使ってテストを開始するまでの流れ

アカウント作成からテスト開始まで7ステップです。1番難しいのはHEADタグへコードを追記するとこです。これができるなら他はたいして苦労しないと思います。

テスト開始まで7ステップ

Googleオプティマイズのアカウント作成
Googleアナリティクスとリンク
HEADタグへコードを追記
Chromeのアドオンを追加
テストを作成
テスト目標を設定
テストを開始

1.Googleオプティマイズのアカウント作成

Googleオプティマイズを使うためにアカウントを作りましょう。

以下の公式サイトにアクセスします。

参考 OptimizeGoogle Marketing Platform

Start for freeをクリック。

Start for freeをクリック

利用を開始をクリック。

利用を開始をクリック

お住いの国に日本を選び、各規約にチェックを入れて完了をクリック。

国を選び、各種規約にチェックを付けて完了をクリック

必要なメールを選んで次へをクリック。

各メールの設定を選んで次へをクリック

アカウントを作成して以下の画面になればOKです。

アカウント登録が完了した状態

2.Googleアナリティクスとリンク

A/Bテストのデータを計測するには、Googleアナリティクスとの連携が必要になります。

GoogleAnalyticsへのリンクをクリック。

Googleアナリティクスへのリンクをクリック

プロパティにリンクをクリック。

プロパティにリンクをクリック

Googleアナリティクスのアカウントを選んで設定。

Googleアナリティクスのアカウントを選択

3.HEADタグへコードを追記

Googleアナリティクスを導入する際、HEADタグへコードを追加したと思います。そのコードにGoogleオプティマイズのコードを追記していきます。

画面右のコンテナ設定から「オプティマイズをインストール」をクリックします。

オプティマイズをインストールをクリック

ウェブサイトへのオプティマイズ追加方法が表示されます。これに従ってコードを追加してください。

オプティマイズ追加方法

追記後のサンプルコードは以下の通りです。参考までにご確認ください。

HEADタグへ追記

<!-- 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.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',1000,
{'GTM-XXXXXXX':true});</script></p>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-XXXXXXXX-X', 'auto');
  ga('require', 'GTM-XXXXXXX');
  ga('send', 'pageview');
</script>

MEMO

UA-XXXXXXXX-XにはGoogleアナリティクスのIDを、GTM-XXXXXXXにはGoogleオプティマイズのIDを代入してください。

gtag.jsを使う場合

gtag.jsを使う場合は、以下の記述を参考にしてください。私はgtag.jsを使ってテストを行いました。

HEADタグへ追記

<!-- 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.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',1000,
{'GTM-XXXXXXX':true});</script>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXXXX-X', {'optimize_id': 'GTM-XXXXXXX'});
</script>

MEMO

UA-XXXXXXXX-XにはGoogleアナリティクスのIDを、GTM-XXXXXXXにはGoogleオプティマイズのIDを代入してください。