JavaScript - 複数のURL候補からランダムに選んでリダイレクトする
以前、ホームページ運営者から次のような相談を受けました。
相談者「ABテストみたいなことがやりたい」
相談者「2択ではなく、もっと多くのURL候補からランダムに選択して リダイレクトさせたいのだけど」
私「多くの候補ってどれくらいですか？」
相談者「少なくとも5個以上」
この相談を解決するために、JavaScriptを使って、 複数のURL候補の中からランダムに選択してリダイレクトさせる方法を紹介します。
リダイレクト先が１つなら「location.href="リダイレクト先URL";」で済む話なのですが、 今回は「複数からランダムに選択する」ためのロジックが必要となります。まずソースコードを紹介して、その次に使用方法を説明します。
リダイレクト用のソースコード
<script>
// リダイレクト用プログラム
// 複数のURLからランダムに選択してリダイレクトする
f_redirect();
function f_redirect() {
// 下のクォーテーション内('')にリダイレクトしたいURLを記述
// 最後の行末にカンマ(,)は不要
var arr = [
'https://test-hoge.com/a.html',
'https://test-hoge.com/b.html',
'https://test-hoge.com/c.html'
];
var num = arr.length;
if (arr.length == 0) return false;
// 0 から (arr.length - 1) の乱数を取得
var num = Math.floor(Math.random() * arr.length);
location.href = arr[num]; // リダイレクト
}
</script>
プログラムの使用方法
まずは用語の整理をしておきます。
上図の「main.html」が「リダイレクト元」、 「a.html,、b.html、c.html」が「リダイレクト先」です。
ヘッダー部分に張り付ける
まずは、「リダイレクト元」HTMLのヘッダー部分「<head></head>の間」に 上記のプログラムをコピぺします （<script>から</script>までをコピペします）。
リダイレクト先URLを設定
ソースコードの真ん中あたりにリダイレクト先URLを設定している部分があります。
var arr = [
'https://test-hoge.com/a.html',
'https://test-hoge.com/b.html',
'https://test-hoge.com/c.html'
];
クォーテーション内('')にURLを記述します。 行の最後にカンマ(,)を付けるのですが、最後の行だけはカンマは不要です。
もしURL候補を5つにしたいなら次のようになります。
var arr = [
'https://test-hoge.com/a.html',
'https://test-hoge.com/b.html',
'https://test-hoge.com/c.html',
'https://test-hoge.com/d.html',
'https://test-hoge.com/e.html'
];
記述形式を守ってもらえれば、 10個でも何個でも好きな数だけ設定できます。