大幅な変更を加えるA/Bテストの実装方法
Optimizelyを使用したA/Bテストでは、元から存在する要素の配置を変えたり、変更を加えたりする事でテスト内容を実装することが多いですが、時にはページ内容が全く異なるテストを行いたい場面があります。
全く異なるページ内容の全てを JavaScript ( 以下 JS ) 及び CSS で実装する事は、困難でコストも掛かる場合が多いかと思います。
そのような場合に、できる限り低コストでテストの実装を行う方法を2つご紹介します。
1. オリジナルのページ内に直接テスト内容をを記述し、Optimizelyで表示非表示を制御
読み込み元のページにバリエーションとなる内容を追加し、Optimizely側で、表示非表示を制御するという方法です。
具体例
読み込み元のページで、テストしたいバリエーションを CSS で非表示にし、body タグに id を加えることで表示するように CSS を設定しておきます。
そうした場合、Optimizelyの、バリエーションコードに記述するのは、下記のみになります。
$('body').attr('id','id名');
もちろん、テスト内容を直接表示するよう指示しても問題ありません。
その場合は、下記のようになるかと思います。
$('テスト内容の要素').css('display','block');
追加したテスト内容の表示だけではなく、同時に既存の要素にも変更を加えたい場合は、前者の方法の方が良いと思います。
もちろん、既存要素への変更は、従来通りバリエーションコードで設定してしまうのも良いでしょう。
2. テストをするページを別に用意し、Optmizelyでリダイレクトさせる
Optimizely には実験の発動したユーザーを指定のページへリダイレクトする機能があります。
リダイレクト機能を用いる事でオリジナルページとは別にテスト用ページを作成し、テストを実施する方法です。
設定方法は簡単です。下記の図をご参考ください。
もちろんですが、リダイレクト先のページの計測も可能です。