LPのようなウェブサイトの最適化を図るための一つの手法で、A/Bテストがあります。
A/Bテストとは、ユーザーが使いやすいウェブサイトを作るための実験です。
例えば、ボタンの色をA（赤）とB（青）の2種類用意して、どちらがより多くクリックされるか試します。これで最適なデザインを見つけます。
今回は、JavaScriptのsessionStorageを活用して、ランディングページのABテストを実装する方法を紹介します。
特に、無料でA/Bテストが行えるGoogle Optimizeが9月に終了するので、参考にして、是非最後までご覧いただけると嬉しいです。
sessionStorage
JavaScriptのsessionStorageは、ウェブページのセッション中にデータを一時的に保存するためのストレージです。
// sessionStorage にデータを保存する
sessionStorage.setItem('key', 'value');
// sessionStorage に保存したデータを取得する
var data = sessionStorage.getItem('key');
// sessionStorage に保存したデータを削除する
sessionStorage.removeItem('key')ページがリロードされたり、別のページに移動したりしてもデータは保持されますが、ブラウザやタブを閉じるとデータは削除されます。
各項目は文字列として保存され、setItem()で保存、getItem()で取得、removeItem()で削除することができます。
このコードで行うA/Bテストの概要
この記事で紹介しているコードは、初めてページを訪れたユーザーをランダムに”A”または”B”に割り当て、その値をセッションストレージに保存します。次に、その値に基づいてユーザーを特定のランディングページにリダイレクトします。
このコードは訪問者がランディングページを訪れるたびに実行されます。
実装の手順と方法
コードの詳細の前に、実装の手順と方法について解説していきます。
ここで解説するコードは、リダイレクト元のページに記述する形なのでご注意ください。
はじめにJavaScriptのコードを記述します。
コードは、HTMLドキュメントの読み込みが完全に完了する前にを実行するために、<head>タグ内に置きましょう。
document.addEventListener('DOMContentLoaded', (event) => {
// セッションストレージからテストの値を取得
let test = sessionStorage.getItem('ABTest');
// テストの値が存在しない場合（初回訪問者）、ランダムにAかBを選択
if (!test) {
test = Math.random() < 0.5 ? 'A' : 'B';
sessionStorage.setItem('ABTest', test);
}
// テストの値に基づいて、ページをリダイレクト
if (test === 'A') {
// テストAのランディングページへリダイレクト
window.location.href = "https://example.com/landing-page-a";
} else {
// テストBのランディングページへリダイレクト
window.location.href = "https://example.com/landing-page-b";
}
});最後にCSSを書きましょう。
/* リダイレクト元のページに記述 */
body {
visibility: hidden;
}これで完成です。
ざっくりとしたコードの解説
コードは、JavaScript・CSSの2種類です。ざっくりですが、順に解説していきます。
JavaScript
JavaScriptのコードは、ページの表示が完全に終わる前にDOMContentLoadedイベントが発火し、そのイベントリスナーに登録されているJavaScriptコードが実行されます。
実行されると、初めてページを訪れたユーザーをランダムに”A”または”B”に割り当て、その値をセッションストレージに保存します。次に、その値に基づいてユーザーを特定のランディングページにリダイレクトします。
document.addEventListener('DOMContentLoaded', (event) => {
// セッションストレージからテストの値を取得
let test = sessionStorage.getItem('ABTest');
// テストの値が存在しない場合（初回訪問者）、ランダムにAかBを選択
if (!test) {
test = Math.random() < 0.5 ? 'A' : 'B';
sessionStorage.setItem('ABTest', test);
}
// テストの値に基づいて、ページをリダイレクト
if (test === 'A') {
// テストAのランディングページへリダイレクト
window.location.href = "https://example.com/landing-page-a";
} else {
// テストBのランディングページへリダイレクト
window.location.href = "https://example.com/landing-page-b";
}
});このコードは、訪問者がランディングページを訪れるたびに実行されるので、一度ランディングページAにリダイレクトされた訪問者は、再度ページを訪れると再びランディングページAにリダイレクトされます。
そしてユーザーがブラウザを閉じたり、そのタブを閉じるとセッションがリセットされて、またアクセスすると再びランダムでA/Bにリダイレクトされます。
CSS
CSSは、リダイレクト元のページにある「body」タグに visibility: hidden; を記述して、リダイレクト元のページ全体を非表示にしています。
/* リダイレクト元のページに記述 */
body {
visibility: hidden;
}こうすることで、リダイレクト前にリダイレクト元のページが表示されないようにしています。
JavaScriptがブロックされているユーザーに対してはリダイレクトが行われずページが一切表示されない、といった問題もあるので注意しましょう。
さいごに
今回は、JavaScriptを使用したA/Bテストの実装方法についての解説でした。
色々と説明させていただきましたが、この方法でリダイレクトを行うと、オリジナルのページが一瞬表示される可能性があります。
その為、完全にこれを防ぐにはサーバーサイドで実装した方が良いのは覚えておいた方が良く、ユーザーをランダムで異なるページにリダイレクトさせると、検索エンジンがどのページをインデックスするべきか混乱する可能性があるので、適切にrel="canonical"を使用するなど、SEO対策も念頭に入れるようにしましょう。
この辺のA/Bテストのガイドラインは、上記の記事を参考にしてみてください。
