設定も簡単! A/Bテストに最適のoptimizelyの使い方

今日はOptimizelyの使い方を簡単に紹介します。

https://www.optimizely.jp/

 

皆さんはABテストはどうやってやってますか?

そもそもわたしはABテストっていう名前と概念は分かっていたのですが

 

「どうやってやんの?」

 

正直ずっと思っていました。

そこで仲間に聞いたらこのOptimizelyを知りましたのでちょっとご紹介。

 

わたしも使い始めてまだ1週間ちょっとなんですけど、

自分の分かっている範囲ですので、初心者用として読んで下さいね!

 

アカウント作成

まずはアカウント作成です。

スクリーンショット 2015-03-04 18.06.06

「勤務先メールアドレス」にEmailアドレスを入力して「試してみる」をクリック

そしたら、個人情報を入力する画面が出てきます。

スクリーンショット 2015-03-04 18.10.42

 

サクッと入力しちゃいましょう。そして「アカウントの作成」をクリック

すると、3つの選択画面に移ります。

スクリーンショット 2015-03-04 18.13.46

ここでは、テストしたい対象のプロジェクトを選んで下さい。

今回はWebサイトのABテストをしたいので「Web Project」を選択します。

次にABテストしたいWebサイトのURLを入力します。

スクリーンショット 2015-03-04 18.21.00

 

今回はわたしのサイト「AnyAny」のABテストをしたいので http://anyany.asia/と入力します。

すると、サイトを読み込んでくれます。

 

ちょっと待っててねーー

はい!

スクリーンショット 2015-03-04 18.24.49

ほら!読み込みました!

あとはガイドツアーを見ながらやっちゃえばOK!

ってこれじゃつまらないんで、1つテストしましょう!

では、下記の部分の色を変えてABテストましょう。

スクリーンショット 2015-03-04 19.09.13

 

んーでは青系にしてみましょうか!「ABOUT ME」の所をクリック

スクリーンショット 2015-03-04 19.11.37

すると上の様なポップアップが出てきます。

今回は黒枠から青系の枠に変えたいので、「要素の編集」▶︎「スタイルの編集」をクリック

スクリーンショット 2015-03-04 19.14.47

すると下記の画面に切り替わります。

スクリーンショット 2015-03-04 19.16.12

フォントも変更出来ちゃうんですねー

今回は色を変更したいので、「色と背景」をクリック

スクリーンショット 2015-03-04 19.17.45

あれ?背景色に何も出力されていない。。。。??

まぁいいや・・・背景色を変えてみましょう!丸い円をクリックします。

するとカラーサークル?が出現

スクリーンショット 2015-03-04 19.20.12

ここで自分が変えたい色にクリックしましょう。

ちょっと紫っぽい青を選択しました。

スクリーンショット 2015-03-04 19.21.51

お!反映されているみたいですねー!

では「完了」しちゃいましょう。

はい!こんな感じ

スクリーンショット 2015-03-04 19.24.50

良いですねー

ではさっそく右上にある「保存」をクリックして「実験の開始」をクリックしてABテスト開始!

スクリーンショット 2015-03-04 19.26.55 お、リロードですか、ではブラウザ更新をば。。。

おやなんだこれ?

スクリーンショット 2015-03-04 19.29.33

あー訪問者を絞れるのねー。ま、今回は置いておきます。

あれ?開始されない。。。あ、スクリプト入れてなかったw

では、上にある「ホーム」ボタンに行きましょう。

スクリーンショット 2015-03-04 19.36.29

「設定」をクリック

スクリーンショット 2015-03-04 19.37.09

この真ん中にある <script・・・ってやつを丸っとコピーします。

そこに書いてあるように<head>タグの直後に貼付けましょう

わたしのサイトAnyAnyはWordpressで出来ていますので、

編集ファイルは「header.php」になります。

スクリーンショット 2015-03-04 19.43.35

 

はい貼付けて保存!

それでは「概要」タブに戻って該当の実験をクリック!

スクリーンショット 2015-03-04 19.46.27

そしたら右にの実験の情報が出てきます。

スクリーンショット 2015-03-04 19.47.52

ちょっと説明すると、トラフィックの割り当てという欄があります。

ここのOriginalが元のサイト、要は黒い枠のままのサイト

Variation#1はさっき作った青い紫に変えたサイトになります。

50% 50%になっているのは、感覚的にわかるかと思いますが

半々でお客さんに見せるよってことです。

もちろんこの割り当てを変更する事も出来ます。

取り敢えずこのままにして早速実験開始!

「スタート」ボタンをクリック!

スクリーンショット 2015-03-04 19.52.09

そしたらステータスが「Draft」から「Running」に変わったはずです!

スクリーンショット 2015-03-04 19.53.07

まぁ簡単!!

あとは何日か放置をしてある程度のお客さんが結果を確認して、どっちの色が沢山クリックしてくれるか分かるってことなんです。

因に、途中経過や結果などを確認したいときは、右にある「結果」をクリックしましょう。

実験を辞めたい時は「停止」ボタンをクリックして終わりです。

本当に簡単ですね!

 

初めての方でも分かりやすい様に作りましたが、どうでしたか?

本当はもっといろんな編集やオプション設定が可能なので、レイアウト変更を決める前に

実験的に前回のデザイン、新しいデザインがどっちが良いか確認するLPOには持ってこいです。

 

https://www.optimizely.jp/