大幅な変更を加えるA/Bテストの実装方法

タグ :	A/Bテストバリエーションリダイレクト

Optimizelyを使用したA/Bテストでは、元から存在する要素の配置を変えたり、変更を加えたりする事でテスト内容を実装することが多いですが、時にはページ内容が全く異なるテストを行いたい場面があります。

全く異なるページ内容の全てを JavaScript ( 以下 JS ) 及び CSS で実装する事は、困難でコストも掛かる場合が多いかと思います。

そのような場合に、できる限り低コストでテストの実装を行う方法を2つご紹介します。

1. オリジナルのページ内に直接テスト内容をを記述し、Optimizelyで表示非表示を制御

読み込み元のページにバリエーションとなる内容を追加し、Optimizely側で、表示非表示を制御するという方法です。

読み込み元のページで、テストしたいバリエーションを CSS で非表示にし、body タグに id を加えることで表示するように CSS を設定しておきます。
そうした場合、Optimizelyの、バリエーションコードに記述するのは、下記のみになります。

$('body').attr('id','id名');

もちろん、テスト内容を直接表示するよう指示しても問題ありません。
その場合は、下記のようになるかと思います。

$('テスト内容の要素').css('display','block');

追加したテスト内容の表示だけではなく、同時に既存の要素にも変更を加えたい場合は、前者の方法の方が良いと思います。
もちろん、既存要素への変更は、従来通りバリエーションコードで設定してしまうのも良いでしょう。

Optimizely には実験の発動したユーザーを指定のページへリダイレクトする機能があります。

リダイレクト機能を用いる事でオリジナルページとは別にテスト用ページを作成し、テストを実施する方法です。

設定方法は簡単です。下記の図をご参考ください。

もちろんですが、リダイレクト先のページの計測も可能です。