JQueryで実装するA/Bテスト振り分け

A/Bテストやってますか！　今回はさくっと簡単に実装できちゃうA/Bテスト向けTipsです。URLパラメーターを取得して条件分岐させれば、ユーザーによって異なるページやコンテンツ、コンテンツの並び方などをテストすることが簡単になります。

A/Bテストでなくとも、女性ユーザーの場合はAを。男性ユーザーならBをなどと分岐も出来ますし、最近流行りの診断メーカーのようなことも可能です。

何はともあれURLをスプリット

GETメソッドで送信すると、
http://www.example.com/?key=man
のように?以降にクエリがくっついてきます。このURLパラメータを取得してみましょう。

var url = location.href;
params = url.split("?");
spparams = params[1].split("&");
var paramArray = [];

死ぬほど簡単ですね。

for ( i = 0; i < spparams.length; i++ ) {
vol = spparams[i].split("=");
paramArray.push(vol[0]);
paramArray[vol[0]] = vol[1];
}

if ( paramArray["key"] == "man") {
alert("man");
} else {
alert("no man");
}

条件分岐でアラートを出すサンプルになりますね。

現場でどう使うか

if ( paramArray["key"] == "man") {
$("#link").attr("src", "../images/man.jpg");
} else {
$("#link").attr("src", "../images/woman.jpg");
}

こんな感じで画像を入れ替えるといった使い方や、hide()などでコンテンツを消す。.insertAfter()でコンテンツの順序を変えるなど色々使えちゃいます。

このJQueryを実行する前のページでクエリを送らないといけないので、form inputなどでボタンを実装するなど色々やってみてください。