直前に閲覧したページのURL(リファラ情報)をJavaScriptで得る方法

どこか別のページからリンクをクリックして現在のページに到達した場合、アクセス者のブラウザは「直前に閲覧していたページのURL」を保持しています。この「直前に閲覧していたページのURL」の情報のことをReferrer(リファラ)といいます。このリファラ情報は、JavaScriptでも簡単に得ることができます。
例えば、以下のようなJavaScriptソースを1行書くだけで、ブラウザが記憶しているリファラ情報(＝直前に閲覧していたページのURL)が変数refに格納されます。

var ref = document.referrer;

リファラ情報は、documentオブジェクトのreferrerプロパティに格納されていますから、上記のように記述するだけで得られます。
ただし、アクセス者がブックマークから直接アクセスした場合や、URLを直接入力してアクセスした場合など、リンクをたどる以外の方法でアクセスした場合には、空文字が返されるだけです。

リファラ情報をアラートボックスに表示する例

ボタンをクリックするとアラートボックスにリファラ情報(＝直前に閲覧していたページのURL)が表示されるHTML＋JavaScriptソース例は以下の通りです。

<input type="button" value="リファラ表示" onclick="alert( document.referrer );" />

以下の場合には、アラートボックスには何も表示されません。

• ブックマークを使ってこのページにアクセスした場合
• ブラウザのアドレス欄に直接URLを入力してこのページにアクセスした場合
• リファラ情報をブロックするようなセキュリティ機能(orソフト)を遣っている場合

なので、「絶対にリファラ情報が存在するはずだ」という前提でスクリプトは書かない方が良いでしょう。
表示例は以下の通りです。もしあなたがこのページに「どこかのリンクをたどって」アクセスしたのであれば、直前に見ていたページのURLが表示されるはずです。

単にアラートボックスに表示するだけなら意味がありませんが、例えば、直前に閲覧していたページによって、パンくずリストの表示を動的に変えるとか、メニューの内容を変えるとか、「戻る」リンクの戻り先に使うとか、いろいろ活用できそうです。

アクセス者がサイト内外のどちらから来たかを判別する方法

このリファラ情報のドメイン(ホスト)部分を参照すれば、アクセス者がサイト内を回遊して来たのか、サイト外からリンクを辿って訪れたのかなども区別できます。
これによって、「サイト外からやってきた場合には、サイト内の主要(orお勧め)ページの案内を表示する」といったことができます。

var ref = document.referrer;             // リファラ情報を得る
var hereHost = window.location.hostname; // 現在ページのホスト(ドメイン)名を得る

// ホスト名が含まれるか探す正規表現を作る(大文字・小文字を区別しない)
var sStr = "^https?://" + hereHost;
var rExp = new RegExp( sStr, "i" );

// リファラ文字列を判別
if( ref.length == 0 ) {
	// リファラなしの場合
	alert("リファラ情報がありません");
}
else if( ref.match( rExp ) ) {
	// マッチした場合＝アクセス元が自サイト内の場合
	alert("自サイト内から来ました");
}
else {
	// マッチしない場合＝アクセス元がサイト外の場合
	alert("他のサイトから訪れました");
}

上記のJavaScriptソースの各行は、だいたい以下のような意味です。

• 1行目は冒頭で説明した通り、リファラ情報を得ています。
• 2行目で使っている、現在のページのホスト(ドメイン名)を得る方法について詳しくは、別記事「ページを移動させたり、現在URLを構成部分別に得る方法」をご参照下さい。
• リファラ文字列の中に現在のホスト名(ドメイン名)が含まれているかを判別する方法として、正規表現を使っています。正規表現を使って文字列を探す方法は、別記事「JavaScriptで正規表現を使う書き方」をご参照下さい。
  • 5行目で検索する正規表現のテキストを作っています。「^」は先頭を、「s?」はsが0回または1回ある場合を示しています。
  • 6行目で大文字・小文字の差を無視するフラグ「i」を加えて、RegExpオブジェクトを作っています。
  • 13行目で、変数refに対して正規表現で検索しています。見つからなかった場合(＝マッチしなかった場合)はNullが返りますから、if文で判別できます。
• リファラ文字列が空文字である場合もありますから、正規表現で探す前に(9行目で)チェックしています。

アクセス元がサイト内外のどこかによって表示を分ける例

上記ソースをボタンで動作させた表示例は以下の通りです。

アラートボックスに表示しても意味はありませんが。まあ、ここでは動作を簡単に確認するために使いました。
他サイトから訪れた場合にだけ、何かプラスアルファの要素を表示させるなり動的に生成するなりしたい場合(※)に使えそうです。

※サイト外からの訪問者にだけ特別なコンテンツを加えて表示している実例

このような「サイト外からの訪問者にだけ特別なコンテンツを見せる」仕組みは、Amazonでも使われています。Amazonサイト内を回遊して商品ページを見た場合とは異なり、Google検索結果ページなどからAmazonへ訪れると、下図の左側のようにヘッダ部分に類似製品が列挙されます。

サイト内を回遊してきた訪問者とは異なり、検索結果ページなどの外部からやってきたアクセス者は、目的の情報がなさそうだと感じたらすぐに去ってしまうでしょうから、極力それを防ぐために「検索結果ページから訪れた人にだけ」類似情報を列挙しているのでしょうね。私が試した限りでは、外部サイト全般ではなく「検索結果ページからアクセスした場合」に限って類書枠が上部に追加されるようでした。Amazonの場合、検索以外の外部アクセスだと商品を紹介する目的でのリンクの可能性が高いからでしょうかね。いずれにしても、リファラ情報を参照して表示を加えていることに違いはありません。

(更新日：2017年05月24日)