無料でA/Bテストできる!WordPress×Optimizelyの使い方

参考になればシェアしてもらえるとうれしいです

  • このエントリーをはてなブックマークに追加
  • 8
Optimizely
スポンサーリンク

Optimizelyとは

Optimizely

A/Bテストのプラットフォーム。
全世界でトップシェアを誇る。

小規模ならば無料でトライアル出来るので、ぜひ一度利用してみて下さい。

A/Bテストを何故するのか?

OptimizelyはA/Bテストの定番ツールです。
サイトのある部分を変えたら、成果が上がったか、下がったかを判別することが出来ます。

optimizely

仮に下記のような設定で考えていただければ、A/Bテストの効果がわかっていただけるかと思います。

  • 現在のコンバージョン率は1.0%
  • 年末に広告に100万円投資をし、訪問者を1万人増加させる

投資までにA/Bテストでコンバージョン率を1.5%まで改善したパターンと、そのままのパターンを比べてみましょう。

パターン名 広告費 訪問者数 コンバージョン率 コンバージョン数 獲得単価
オリジナル 1,000,000 10,000 1.0% 100  \10,000
改善パターン 1,000,000 10,000 1.5% 150  \6,667

コンバージョン率をA/Bテストで上げていることで

  1. コンバージョン数が50増加。
  2. 獲得単価が30%減少。

という2つの効果が得られます。

また、獲得単価に関してはそのまま粗利に直結しますし、その先もずっと続く改善施策になります。
そう考えれば、A/Bテストをやらない理由は無いでしょう。

OptimizelyでA/Bテストを回す方法

1.アカウントの作成

まずはアカウントを作成しましょう。

画面右上「Sign Up」のリンクをクリックして情報を入力しましょう。

Optimizely- A-B Testing & Personalization Platform

続いて、何のプロジェクトなのかを聞かれます。

Optimizely- Create an application

Optimizelyでテストできるのは

  1. Webサイト
  2. iOSアプリ
  3. Androidアプリ

の3種類です。
今回はWebサイトのテストなので、いちばん左の「Web Project」を選択します。

Optimizely- Create a web project

Web Projectを選択すると、どのURLをテストするのかを聞かれるので、当ブログのドメイン「webmake.info」と入力します。

これでアカウントの作成は完了です。

2.テストパターンの作成

アカウントの作成が完了したら早速A/Bテストのパターンを作成していきましょう。
当ブログ「うぇぶまけ」を参考にして解説していきます。

webmake_optimizely_before

マウスカーソルを変更したい要素に合わせると、枠線が現れます。
枠線が出ている状態でクリックをすると、どのような変更をするかのメニューが現れます。

今回は、サイト名「うぇぶまけ/webmake」をシンプルに「うぇぶまけ」に変更するテストを作成したいと思います。

今回行ないたいのはテキストの変更なので、変更したいサイト名にマウスを重ね、「クリック→要素の編集→テキストの編集」を選択します。
そうすると、テキストが変更出来るようになるので「/webmake」を消します。

webmake_optimizely_test

これでテストパターンの完成です。

その後、テストを行ないたい目的に合わせて、目標の設定や訪問者グループの設定を行ない、実験の開始を行ないます。

3.Optimizelyコードの取得

テストケースの作成は無事完了しました。
続いて、サイトでテストが実施されるようにOptimizelyのコードを取得しましょう。

OptimizelyはサイトのJavascriptのコードを埋め込むことで動作します。
ですので、テストの対象となるページすべてにコードを埋め込む必要があります。

また、タグはプロジェクトごとで異なります。

「プロジェクト→設定タブ内→実装」の中にあるコードをコピーします。

Optimizely:ホームa

4.WordPressのプラグイン「Optimizely」をインストール

WordPressにはOptimizely公式が製作したプラグインが存在します。
そのプラグインを使ってコードの埋め込みなどを実行しましょう。

WordPress-Optimizely

「プラグイン→新規追加」画面の右上、検索窓で「Optimizely」と入力し、検索実行。
そうすると、恐らく一番左上に公式のプラグインが出てきますので、選択してインストール実行。

これだけでインストールは完了です。

5.WordPressプラグインの設定

さて、Optimizelyプラグインをインストール成功した後は設定です。
正常にインストールが出来て、有効化されれば管理画面メニューの一番下辺りに「Optimizely」というメニューが新たに追加されていると思います。

Optimizelyメニュー→Configurationタブをクリック。

Optimizely ‹ うぇぶまけ-webmake — WordPress

この画面内の「API Token」ボックスに、Optimizelyより取得したAPI Tokenを入力し、接続をすることで、すべてのページにOptimizelyのテストコードがロードされます。

6.API Tokenの取得

Optimizelyのマイページより、「アカウント設定」をクリックします。
その後、「アプリタブ→【Optimizely REST API を使用して認証する API トークンを管理します。】のテキストリンクをクリック」 もしくはログインしている状態で「https://app.optimizely.com/tokens」にアクセスすることで、トークンの生成画面に移動出来ます。

Optimizely:API トークン

画面右上「トークンの生成」ボタンを押下することで、トークンが生成されます。

Optimizely:API トークン (1)
生成されたAPIトークンの文字列をコピーします。

この文字列を前述のWordPressプラグイン「Optimizely」のAPI Tokenのテキストボックスに入力すれば連携設定が完了します。

これでA/Bテストの設定は完了です。

7.正しく動作しているのか検証する

設置が出来たら、最後に正常に動作しているのかを検証します。
Optimizelyのプレビュー機能を利用します。

Optimizelyのホームより、作成したテストを選択し「プレビュー」をクリックします。
そうすると、下記のようなプレビュー画面が立ち上がります。

Optimizely Preview

画面内の「Valiation」を変更することで、オリジナルと作成したバリエーションの違いを確認することができます。

あとはじっくり訪問ユーザが増えるのを待ってテストの結果を確認し、良い方をオリジナルに反映していく流れを繰り返す形となります。

番外編.成果が出たら

オリジナルに比べ、テストパターンの方が結果が良かった。という形で実験を終える場合、その成果をオリジナルに反映させる必要があると思います。

さすがにOptimizelyからワンボタンでオリジナルに反映!みたいなことは出来ません。
テストした内容に本番環境を手で書き換えましょう。
※ ワンボタンで反映なんて出来たらクラッキングみたいなもんですからねw

まとめ

Optimizelyの設定はいかがだったでしょうか。
思ったより簡単だった。と思っていただければ紹介した甲斐があります。

  1. ユーザ視点
  2. 誰の為に何を提供しているのか

あたりを常に意識をして、より良い形でのコンテンツを提供していけば、必ず結果も伴ってくるはずです。

ぐるぐるとA/Bテストを繰り返して、より成果の上がるクリエイティブやLP、サイトを育てていきましょう。

それでは良いグロースハックライフを!

スポンサーリンク

参考になればシェアしてもらえるとうれしいです

  • このエントリーをはてなブックマークに追加

フォローする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です