【簡単】Google Optimizeの設定方法と出来ること【初めてでもOK】

・Google Optimizeの設定の仕方がわからない!
・Google Optimezeで何が出来るの?

今回はこんな疑問に答えていきます!

本記事の内容

・Google Optimizeで出来ることがわかる

・Google Optimizeの設定の仕方がわかる

webサービスにおいてユーザーが今のサービスで使いやすいのかどうか、使いにくい・分かりにくいならどの部分で戸惑ってるのかを調べるためのABテスト(複数のパターンを試す)が必須です。

Google Optimize(グーグル オプティマイズ)はGoogleが提供している、無料で使えるABテストツールです。

エンジニアじゃなくても触りやすく、直接的な修正が出来るようになっているためサービスのユーザーテスト、修正をする際には重宝するツールになっています。

Google Optimizeで出来ること

optimizeで出来ることは具体的に以下の5つです。(2020/11/15 現在)

  1. ABテスト(複数のパターンをテストする)※ 基本的にはこれで大丈夫
  2. 多変量テスト(1ページで複数の修正箇所をテストしたい場合)※ 大量のトラフィックがある場合
  3. リダイレクトテスト(ABテストの一種で特定のページにアクセスされた時にリダイレクトさせる)
  4. カスタマイズ(特定のユーザー属性に絞って表示をテストする)
  5. バナーテンプレート(選択したページの上部にバナーの帯を出せる)

この中でも基本的に使用するのは1のABテストで十分だと思います。

ほとんどの場合においてABテストで事足りるので、それ以外の方法を知りたい方は是非ABテスト利用後に沢山試してみてください!

Google Optimizeの設定の仕方

Optimizeの設定の前に注意点。

まず、Google OptimizeはGoogle Analyticsでの解析を元にしたサービスになっていますのでAnalyticsのインストールが対象のwebサービスに導入されていることが必須になります。

Google Analyticsが分からない、導入されていない方は利用できないので こちら からまずGoogle Analyticsの導入をお願いします。

設定方法

では設定の方法を説明していきます。

まず Google Optimize にアクセスし、青いボタンの「無料で利用する」を押します。

するとGoogleアカウントを選択する画面が出るので利用したいアカウントを選択し、パスワードを入力します。

そうすると以下の画面になるので「利用を開始」を押します。

その後に出てくるヒントとおすすめ情報、サービス情報、マーケット調査は、はいでもいいえでもお好きな方を選んでください。

アカウント設定の選択は基本的に全チェックで構いません。

登録が完了すると以下の「最初のエクスペリエンスを作りましょう」となります。

ここでの用語ですが、

コンテナ:複数のテストの集まり

エクスペリエンス:1つのテストのこと(例:CVボタンの色の変更など)

アクティビティ:テスト開始や終了、変更などの履歴

のことです。

まずは「開始」ボタンを押してテストを作成していきます。

エクスペリエンスと作成となるのでテストの名前、種類、テストをするページのURLを入力して「作成」を押します。

今回は一番使用する機会の多い「A/Bテスト」を選択して解説します。

作成されると以下の画面になり、実際にテストを作成していきます。

「パターンを追加」を押し、パターンに名前をつけます。(修正内容がわかるように付けるといいです)

例:ボタンの色でテストする場合は「CVボタン:青」など

今回は「テストパターン」という名前で追加しました。

テストパターンの右にある「編集」ボタンを押します。

すると、以下のような編集ページにいきます。

このページで実際に変更していくのですが、画面で直感的に変更できる部分から、HTML,CSSを直接書き換えることも出来るので、ここで出来るの修正の幅はとても広いです。

今回は簡単なタイトルの色を変更するような修正にしようと思います。

基本的な修正は、修正したい部分を選択して、右下にあるボックスの部分で変更していけるのでいろいろな部分を触って試してみてもらうと慣れが早いと思います。

あと、スマホの画面を変更したい場合は上の帯の部分にある「標準」というところを押すと対象のスマホデバイスの画面で編集できます。

ここに関しては言葉と画像では難しいので実際にタイトルを変更している動画を載せておきます。

セクションごとに簡単に説明すると、

ディメンション:要素の縦、横の大きさ

LOCATION:要素の位置 ※ 絶対位置(position: absolute;)になっていないと効かない項目なので基本触らなくて大丈夫

タイポグラフィー:文字のフォント、大きさ、色、スタイル

背景:要素の背景の色、画像、パターン

枠線:要素の枠線の色、太さ、スタイル

レイアウト:要素の位置、透過度、重なり ※ これも基本触らなくて大丈夫

それぞれ上記を変更できる項目になっています。

修正が終わったら右上にある「保存」を押して、その後「完了」を押すと修正完了です。

テストの設定画面に戻ってくるので、ページターゲティングの項目を設定します。

ページターゲティングはどのページでテストを発動させるか、という条件を設定する場所です。

これは、デフォルトでエディターページで設定されたところが入っているのでそのページでよければ変更しなくても大丈夫です。

ただし、修正したURLのページのみでしか変更されないので、場合によっては複数のページで適用したい(例:domain.com/archive/xxx で/archive以下全部同じテストをしたい)ことが出てくると思います。

そういった場合は、鉛筆マークを押し、URLの条件(次と一致や、次を含む、次から始まる等)を変更して、対象のページを広げてあげてください。

オーディエンスターゲティングはどの条件の時にテストを発動させるか、という条件を設定する場所です。

設定できるルールは結構な種類があり、全部は紹介できませんが、一部ご紹介します。

デバイスカテゴリ:指定の端末(スマホ、PC、タブレット)を絞れる

行動:新規、リピートのユーザーを絞れる

地域:特定の場所からアクセスされる人に絞れる

テクノロジー:特定のブラウザ(chrome,safari,firefoxなど)、OS(mac,Windows,Linuxなど)を絞れる

その他にクエリパラメータやJavaScriptの変数でも設定出来るので、状況によっていろいろなパターンを試してみてください。

次に前にも説明した通り、google アナリティクスとの連携が必須になっていますのでこちらでリンクさせます。

「アナリティクスにリンク」を押すとそのアカウントに紐づいているアナリティクスのプロパティ情報(名前やビューなど)が出るので、対象のアナリティクスのビューを選択。

ここで出てこない場合は、optimizeでログインしているgoogleアカウントと、analylicsでログインしているgoogleアカウントが違う可能性があるので同じアカウントであることを確認の上更新し直してみてください。

無事リンクされるとその下にある「目標」が選択できるようになります。ここは計測したい目標を選択、作成します。

タグマネージャーを使いイベントを設定している場合には、目標はCV(コンバージョン)にあたる部分に設定することがおすすめです。

そうでない場合は、新たにイベントを設定する か、用意されている目標(セッション、ページビュー、直帰数)を設定します。

今回はタイトルの色を変更しているのでメインは直帰数に設定します。最大3つまで設定出来るので適宜変更してください。

それが終わればあとは自分のサイトにオプティマイズをインストールすれば完了です。

手順を表示を押すと、スクリプトタグが表示されているのでそれをコピーして、自分のサイトの<head>タグの先頭の方に貼り付け。

自分のサイトのHTMLが触れない方は頼んでいる業者の方などに頼んでみてください。

タグの設置が完了したら「インストールの確認」を押して正常にインストールされているかを確認します。

「Chrome 拡張機能をインストールする」の項目の同じように必要になるのでインストールしておきます。

全てが完了したら、一番上に戻り「開始」ボタンを押してテストを開始します。

正常にテストが開始されているか、自分の端末などでサイトにアクセスしてみて変更されているかを確認してみてください!(オリジナルに当たると確認できないですが、その際は違うブラウザで開いてみたりしてください、、)

変更されていることが確認できれば完了です。お疲れ様でした!

設定後は「レポート」のタブでテストの成果が確認出来ます。

オプティマイズでは2週間はテストして確認しましょうとなっていますが、こまめに確認してあまりにも結果がよくない方に傾いているのであれば何か修正で不具合等がある可能性もあるのでテストを中止したりの対応も必要になるのでこまめに確認しながら進めましょう。