2022.05.21コンバージョン最適化ナレッジを提供するWebマガジン『CRO/Tips』です。本記事では、A/BテストツールGoogleオプティマイズの使い方を解説します。「A/Bテストをしたいけど使い方がイマイチわからない」「具体的にファーストビューテストのやり方が知りたい」など、Googleオプティマイズを使ったA/Bテストを予定されている方向けに解説します。CRO支援プログラムについて見てみる目次Googleオプティマイズとは?基本情報を整理GoogleオプティマイズはGoogleが提供するA/Bテストツールです。Googleオプティマイズを使うことで、ドラッグ&ドロップで簡単にA/Bテストが実施できます。Analytics」と連携が容易であるため、テスト実行と解析がシームレスに行える点が魅力です。Googleオプティマイズを使うことで、「手軽に」「素早く」「正確に」A/Bテストの実行が可能になります。Googleオプティマイズはトラフィック規模によりますが無料で利用できます。大企業向けのオプティマイズ360は有料になります。詳しくはGoogle経由でお問い合わせください。あわせて読みたいA/Bテストの基礎知識。CRO特化のWebマガジン『CRO/Tips』です。本記事ではA/Bテストの基礎知識について徹底的に解説します。A/Bテストの実施を検討している方、サイト改善のノウハウを探して...ローコードで素早くテスト実行できるGoogleオプティマイズタグをサイトに埋めるだけ。ローコード(内容によってはノーコード)で手軽にA/Bテスト実装ができます。多変量テストからパーソナライズ配信まで豊富なオプションGoogleオプティマイズでは一般的なスプリットテスト以外にも様々なエクスペリエンス設計が可能です。複数要素を比較検証する多変量テスト、ページ単位でテストするリダイレクトテスト、ユーザー情報をもとにパーソナライズ配信、バナーポップアップなどサイト状況やニーズに応じて様々なオプションがあります。Analyticsで設定している目標やイベントなど各種指標を連携できます。Analyticsでも確認が可能です。本記事執筆時点でGA4との連携もアナウンスされています。初期設定編Googleオプティマイズの使い方について、アカウント作成から解説していきます。Googleオプティマイズの利用にはGoogleアカウントが必要になります。Googleアカウントをお持ちでない場合はまずアカウント作成からはじめましょう。Googleオプティマイズアカウントを作成するGoogleオプティマイズのアカウントを作成が必要になります。オプティマイズサービスサイトからアカウントを作成しましょう。コンテナを作成する続いて、コンテナを作成します。エクスペリエンス」という階層構造になっています。アカウントが最も上位階層です。アカウント:企業、サービスなどコンテナ:サイトなどエクスペリエンス:個別のテストなどコンテナ名はチームが認識しやすい内容であれば良いですが、Googleでは「www.mysite.org」のようにサイトドメイン形式を推奨しています。続いて、コンテナの設定を行います。Analyticsを連携しましょう。「アナリティクスへリンクする」を選択し、接続するGoogleアナリティクスを選択します。オプティマイズスニペットのインストールコンテナ設定の続きはGoogleオプティマイズスニペットのインストールになります。オプティマイズのタグをサイトに設置します。これはGoogleタグマネージャー活用がおすすめです。本記事ではGoogleタグマネージャー(以下、「GTM」)を使った設定を解説します。GTMのコンテナを開きタグの新規作成を選択します。タグタイプで「Googleオプティマイズ」を選択します。Googleオプティマイズ設定画面で確認できるコンテナIDを入力します。Pages」とします。インストールされていることを確認します(後述のエクスペリエンス作成画面で確認可能)。【補足】アンチフリッカースニペットについてページフリックとは?A/Bテスト時にはページフリックという現象が起こるケースがあります。ページフリックとは、テスト中に対象ページを読み込む際に一瞬だけ画面がちらつく現象です。これは、訪問者が対象ページをロードした瞬間にツールのスクリプトが読み込まれ、対象ページに対してCSSの変更が走るために発生します。オリジナルページが一瞬表示された後にテストバージョンページが表示される挙動となります。アンチフリッカースニペットとは?上記のページフリック対策がアンチフリッカースニペット(AFS)です。タグを別途サイトの<head>先頭に埋め込むことでページフリックを軽減します。(注意)Googleオプティマイズタグをタグマネージャーで設置している場合、アンチフリッカースニペットは直接サイトに記述する必要があります。Chrome拡張機能をインストールするChrome拡張機能をインストールすることで、オプティマイズのビジュアルエディタの利用ができるようになります。インストールしましょう。以上でコンテナ設定は完了です。エクスペリエンス作成編コンテナ設定が終わったら、続いては具体的なテスト設計=エクスペリエンス作成の方法を説明します。エクスペリエンスを作成するチュートリアルに従ってアカウント⇨コンテナの作成が完了したらメインダッシュボードが表示されますので、ここからエクスペリエンスの作成に移ります。チームが認識できるエクスペリエンス名および、対象ページのURLを入力します。続いてテストタイプを設定します。本記事においては最も基本的な「A/Bテスト」を解説します。ターゲティングとパターンを設定する続いて「ターゲティングとパターン」を設定します。これはいくつのバリエーションでテストするか、それを誰に表示するかを決めます。「パターンを追加」から作成をはじめましょう。チームが認識できるパターン名を入力します。パターンAだけでなくそのパターンがどのような内容なのか一目でわかると確認の手間を省けますのでおすすめです。以下のように作成したパターンが表示されます。複数のパターンがある場合は、再度追加をしていきます。「編集」ボタンから、具体的にパターンを編集に移っていきます。基本編集パターン実例」の章で解説いたします。配信比重を決めるパターンの配信比重を決めます。均等配信とカスタム配信の設定が可能です。バリエーションが4つだと25%ずつ配信制御できます。テスト対象ページを決めるテスト対象ページURLを定義します。複数条件がある場合はURLルールを追加していきます。配信オーディエンスを決める続いて、配信オーディエンス設定で誰に配信するか決めます。全てのユーザー、新規ユーザー、モバイルデバイスユーザーなど詳細の設定が可能になります。テストプランを考慮しながら適切なユーザーを選択します。テスト目標を設定するテスト目標を設定します。目標は「メイン目標」と「サブ目標」の設定が可能です。Analyticsで設定している目標をそのまま流用可能です。Analyticsで設定していない目標に関してもカスタムで設定が可能です。「通知」「ユーザー管理」「トラフィック割り当て」などは、必要に応じて設定をしましょう。Assurance)を行う各種設定が終わったら正常に動作するか必ずチェックを行いましょう。プレビュー機能を使って表示のバグがないかチェックします。主なチェックのポイントは以下です。各デバイスでプレビューを行うブラウザも主要なブラウザでプレビューを行うコンバージョンまで全導線のチェックを行うデバッグモードでトリガーが確認しているか確認する(可能であれば)低速通信での体験のクオリティチェックも行う以上でエクスペリエンス作成編は終わりです。最後に「公開」ボタンをクリックすると配信が開始されます。初心者向けで代表的な編集パターンの実例を解説します。頻出パターンとしてテキスト編集や画像設定についてGIF動画で解説をします。ビジュアルエディターを立ち上げるGoogleオプティマイズのエクスペリエンス編集にはビジュアルエディターが不可欠です。エディターを使う条件としては以下2つです。Step5」を参照ください。エクスペリエンス設定画面の「編集」ボタンをクリックするとビジュアルエディター画面が表示されます。以下の編集画面で各種の設定を行います。うまく表示されない場合は、Chromeのバージョン確認、拡張ツールのインストール設定、キャッシュクリアなどを確認ください。続いては具体的な編集方法を説明します。最初にテキストの編集方法を紹介します。テキスト編集は主に以下のテストケースで使えます。ファーストビューのコピーを検証したいCTAボタンのテキストを検証したい見出し変更を検証したい編集の基本的な操作は以下のステップで行います。検証したいテキストを入力する完了をクリック操作イメージをもっていただくためにGIFで収録しました。コントロールパネルを使えば、フォントファミリーやサイズなど各種要素を微調整できます。最後にインタラクティブモードで実際の見え方に違和感がないか確認をします。以上がコピー要素の編集です。簡単に編集できることがおわかりいただけたかと思います。続いては画像イメージの変更です。サイトの印象に大きく関係するのがビジュアル要素になります。以下のテストで活用できます。ファーストビューのビジュアルを変更したい商品画像をテストしたいテキストと同様に編集画面で変更したいimp要素を選択します。参照URLを変更するとすぐに画像は変更されます。HTMLの編集画面から参照URLを代替する方法でも変更が可能です。(あらかじめ、変更後の画像参照URLを控えておくとスムーズです)。画像設定方法に関しては、サイトごとに構造が異なるため上記はあくまで一例ではありますが、変更操作についてイメージがわいたのではないでしょうか。【テストパターン3】レイアウトの移動3つ目はレイアウト移動です。パーツの順番を変えたい場合に活用できます。編集画面右上の歯車アイコンから移動の設定ができます。「自由に移動」でウェブページの要素を自由に移動できるようになり、ウェブページ上の要素の位置(左、上、下など)に応じてスタイル変更が作成されます。移動させたいエリアを選択して、ドラッグ&ドロップで移します。以下GIFのように直感的に操作が可能です。以上、主要なテストパターンの解説となります。モニタリング編テスト状況はGoogleオプティマイズのレポート画面でモニタリングが可能です。セッションおよびコンバージョンが増えるごとに自動で更新されていきます。AnalyticsとリンクをしているとGAでも同様の内容が確認できます。オプティマイズのレポートと比較すると、GAの方がより詳細の内容が見れる点が特徴です。テストの勝敗判断の目安についてテストパフォーマンスはどのように判断するのでしょうか?Googleオプティマイズでは分析機能がついており、どのパターンが有効であるか確認が可能です。オプティマイズの分析にはベイズ推計という手法がとられています。ベイズ推計はデータが蓄積されるごとにテスト結果の精度をブラッシュアップできる手法であり、最適な確率を%で算出できます。確率算出のためには十分なデータ収集が必要となります。このため、Googleオプティマイズは2週間分のデータが収集されるまでテスト結果の報告は行われない方針になっています。トラフィックが多い場合であっても2週間はテストを続けましょう。データ収集が十分に行われたうえで最適である確率が高いパターンが優先度が高いとお考えいただくとよいでしょう。オプティマイズの通知を確認する事前にシミュレーションしたトラフィック数、コンバージョン数、CVRのリフト値を参考にテストの勝敗を検討することに加え、Googleオプティマイズではテストパフォーマンスにもとづいてメッセージが表示されます。メッセージはテストを続けるか止めるかの参考にできます。主なメッセージパターンは以下です。「リーダーが見つかりませんでした」:テストパターンはオリジナルとほぼ変わらない。これ以上データを取得しても結果が変わらない可能性が高いためテストを停止する。「XXXがリーダーです」:”XXX”にはオリジナルかテストの名前が入ります。データが十分に収集され、特定のパターンがパフォーマンスが優れていることを示しています。この場合もテストを完了させてよいでしょう。メッセージやオプティマイズで表示している確率を参考にしながらテストのモニタリングを行なっていきましょう。おわりに本記事ではGoogleオプティマイズの使い方について解説をしました。Googleオプティマイズの特徴は具体的なテストの使い方のイメージがわいたかと思います。A/Bテストを初めて行う際はぜひご参考いただけますと幸いです。CRO支援をご検討ならCRO/Tipsでは、本記事のようにCROに関する様々なナレッジや情報をお届けします。MARKETでは、CRO特化のマーケティング支援のプロフェッショナルパッケージ「GrowthFuel(グロースヒュール)」を提供しています。サイト改善、LP改善などにお困りの場合はお気軽に問い合わせください。Copied!A/Bテストの基礎知識。CRO特化のマーケティング支援コンサルティングサービス「GrowthFuel」のプロデューサー兼オプティマイザー。CRO/Tipsでは海外情報や自身のプロジェクトを中心にCROのナレッジやノウハウを公開中。Certification関連記事A/Bテストの基礎知識。導入状況に関する調査CROやABテストで使えるコンバージョンマーケティングのフレームワーク集ECサイトのコンバージョン率を改善させる42のチェックリストGoogleオプティマイズの使い方をgifで解説!設定から実装までABテスト進行がまるわかりA/Bテストの基礎知識。