2017.7.5 その他

Google Optimizeを使ったウェブテスト

Google Optimizeとは

Google Optimizeは、Googleが無料で提供しているウェブテストを行うためのツールです。
A/Bテストや多変量テストを用いてさまざまなテストパターンと目標を設定し、ページの最適化を行うことができます。また、ビジュアルエディタでブラウザ上の実際の画面を見ながらテストパターンを追加・編集できるので、テキストや色の変更ならデザイナーに依頼しなくても比較的簡単にテストを作成し実施することができます。

Google Optimizeで出来るテストの種類

  • A/Bテスト(同じページ内で、AとBのデザインパターンの比較)
  • 多変量テスト(複数のデザインを掛け合わせたパターンの比較)
  • リダイレクトテスト(異なるページの比較)

事前準備

Google Optimizeを使用するにあたり、下記の準備が必要です。

1.Google Optimizeのアカウントを作成

まずはGoogle Optimizeのアカウントを作成します。

2.Google Chromeに拡張機能(Google Optimize)をインストールする

次にChromeに拡張機能をインストールします。
Google Optimizeはブラウザ上で編集しますので、エクステンションのインストールが必須になります。

3.対象サイトにコードを追加

テスト対象サイトのGoogleアナリティクスのトラッキングコード内に、Google Optimizeを使用するためのコードを1行追加します(XXXXXXXは割り振られたご自身のID)。

4.ページフリッカー対策(任意)

ページフリッカーとはテスト対象ページを表示する際、一瞬オリジナルパターンが表示されてからテストパターンに切り替わる現象です。
これを解決するために「Page Hiding」というコードが用意されています。
このPage Hidingのコードは、「ロード中○秒間はページを表示しない」という処理を行うため、ページフリッカーが気になるテスト対象のページのみ導入すると良いでしょう。秒数はデフォルトで4000(ミリセカンド)となっている値を変更することで、調整できます。

 

テストを作成する

1、管理画面へログインし、「CREATE EXPERIMENT(テスト作成)」を押下

2、テストの設定

ここでは、テストの大まかな設定を行います。

  1. テストのタイトルを入力
  2. テスト対象となるページのURLを入力(複数のページやディレクトリ単位での設定は、別の画面で行います)
  3. 実施するテストの種類(A/Bテスト、多変量テスト、リダイレクトテスト)を選択
  4. 「CREATE」ボタンを押下して作成

3、Draft(非公開の下書き)に作成したテストが追加される

 

A/Bテストを行う

A/Bテストとは、同一ページ内である要素を変更したパターンを比較するテストです。

A/Bテストの作り方

1.テストの種類で「A/B test」を選択し、タイトル、対象URLを入力後、「CREATE」を押下

1.「NEW VARIANT(新規テストパターン作成)」を押下

2.パターン名を入力し、ADDを押下

3.ビジュアルエディタでテストパターンを作成・編集

ビジュアルエディタの使い方はこちらをご覧ください。

4.公開する

 

多変量テストを行う

多変量テストとは、同一ページ内で複数のパーツの掛け合わせを同時に比較するテストです。

多変量テストの作り方

1.テストの種類で「Multivariate test(多変量テスト)」を選択し、タイトル、対象URLを入力後、「CREATE」を押下

2.Edit section infoからセクション名を編集

3.「NEW VARIANT(新規テストパターン作成)」を押下し、パターンを作成

4.ビジュアルエディタでテストパターンを作成・編集

ビジュアルエディタの使い方はこちら(ページ下部に飛びます)をご覧ください。

5.COMBINATIONSで掛け合わせを確認

6.公開する

 

リダイレクトテストを行う

リダイレクトテストとは、URLが異なるページを比較するテストです。
デザインをリニューアルする時や複数のLPの効果測定をしたい時に使用します。

URLが異なる2つのランディングページをテストする場合:
オリジナル – www.example.com/landing1
パターン – www.example.com/landing2

サブドメインでホストされる、デザインを変更したページをテストする場合:
オリジナル – www.example.com
パターン – new.example.com

リダイレクトテスト作り方

1.テストの種類で「Redirect test」を選択し、タイトル、対象URLを入力後、「CREATE」を押下

2.「NEW VARIANT(新規テストパターン作成)」を押下

3.パターン名と比較したいページのURL入力し、「ADD」を押下


ビジュアルエディタの使い方

編集対象を選択し、ビジュアルエディタ上のエディタパレットから、テキストや色、配置などを簡単に編集することができます。
また、エディタパレットにある「EDIT ELEMENT」からHTML、CSSを直接編集することもできるので、自由度の高いテストパターンの作成が可能です。

CSSを編集する

ビジュアルエディタ上でCSSの編集も行えます。

編集方法

1. 編集対象を選択する
2. ヘッダーコンポーネントの「<>」を選択し、エディタを表示させる
3. 編集対象のスタイルを編集する
4. SAVEを押下する

注意点

一度ターゲットを選択し、エディタパネルで仮でも良いのでスタイルを編集しないと、CSSエディタでターゲットのCSSが表示されません。

予め用意したクラスを付与する

スタイルを設定したクラスを事前に作成し、サーバーにアップしておきます。
そして、ビジュアルエディタ上でクラスを付与すればスタイルを適用することができます。

編集方法

  • 予めスタイルを用意し、本番サーバーにアップする
  • ビジュアルエディタでHTMLを編集し、クラスを付与する

HTMLの編集・追加

HTMLの編集・追加を行うには、Insert HTML機能を利用します。
編集対象の前後にある要素を選択し、編集を行います。

編集方法

  • 編集対象を選択し、右クリックもしくはエディタパレットのEDIT ELEMENTからEdit HTMLを選択。
  • エディタでHTMLを編集し、APPLYを押下。

FAQ

Q.テスト期間の設定はできる?

A. テスト期間の設定はできません。管理者自身が手動で完了にします。
Google Optimizeでは「最短でも2週間はテストを実施することを推奨」としています。

Q.同じディレクトリ内のページ全てをテスト対象にしたい

A.ConfigurationのTARGETING(ターゲット設定)で行うことができます。

1.対象のテストの「TARGETING」を押下

2.下部の「CREATE RULE」を押下

3.「URLs」を押下

4.「matches regex」を選択し、対象のディレクトリを入力、
Check your ruleで対象のページを確認し、「ADD」を押下

Q.テスト対象者の割合を変えることはできる?

A. ConfigurationのTARGETING(ターゲット設定)のPercentage of visitors to targetで設定することができます。

まとめ

イトクロではこのような手法を用いて、企画とデザイナー、エンジニアが協力し仮説と検証を繰り返し行い、サイトの改善を行っています。Google Optimizeは、ウェブテストを効率よく行えるツールですので、導入のヒントになれば幸いです。

現在イトクロでは、エンジニア・デザイナーを募集しています。
ユーザーファーストで価値のあるサービスを提供していきたい方、
技術を磨いていきたい方、ぜひご応募ください。

エンジニア募集中!
  • twitter
  • はてなブックマーク

関連記事

     関連記事はありませんでした