JavaScriptでリファラ（ユーザーが直前に表示していたページのURL）を取得する方法

仙台・宮城の皆さんこんにちは！

今日は、JavaScriptで「リファラ」を取得する方法について解説します。

リファラって何？

確認のためにも、最初にリファラについて簡単に触れておきます。リファラというのは「ユーザーが直前に表示していたページのURL」ということです。

つまり、このリファラを取得すれば、

• 検索エンジンから流入してきたユーザーだけに、広告を表示！
• サイト内の特定のページから移動してきた人だけに、テキストを表示！

みたいなことができるようになります。では具体的な方法を解説していきます。

document.referrerでリファラを取得する

javaScritpでは、document.referrerでリファラを取得することがきます。

document.referrer

実際に使う場合は、以下のような感じで使用します。

window.onload = function() {
    var ref = document.referrer;
    if(ref.match(/google/)) {
        //google経由のユーザー向け
    } else {
        //それ以外
    }
};

これは「goole経由でサイトに来てくれた人に特定の処理をしたい！」という場合のコードになります。それでは、1つづつポイントを解説していきます。

まず2行目をご覧ください

var ref = document.referrer;

document.referrerを変数refに格納しています。

そして肝になるのがこの3行目のref.match(/google/))という条件分岐で使用しているmatchです。

if(ref.match(/google/)) {

matchは引数に指定した文字列が含まれていた場合はtrueとなり「配列」を返します。

例では、リファラを格納したrefという変数に「google」という文字列が含まれていたらtrue（配列）を返すという命令です。

/google/の部分の正規表現については、奥が深いので解説は省略しますが、もちろんもっと複雑な条件を使用することもできます。

まとめ

リファラを取得すると例で挙げたような処理が可能になります。他には、、、正直使う場面は少ないですが、JavaScriptで「ユーザーが直前に表示していたページのURLを取得できるんだぞ」と覚えておくと何かの時にいろいろなコードと組み合わせて実現したい処理が可能になるかもしれません。知識として覚えておいてもらえると嬉しいです。

それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで！もちろん宮城県外の方も大歓迎です！