【JavaScript】リファラを取得してURLの内容で処理を分岐する方法

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでリファラを取得して、取得したURLに含まれる文字列によって処理を分岐する方法をご紹介しています。

今回実現したいこと

ざっくりと下記のような内容になります。PHPやjQueryではなく、すべて純粋な「JavaScript」で実装します。

• ユーザーのリファラを取得する
• リファラに特定の文字列が含まれるか検証する
• 検証結果によって処理を分岐する

今回私がこの処理が必要になったのは、サイトを表示する際に初回のみ掲載情報があったからです。外部からの流入であればある要素を表示し、内部の回遊であれば非表示にする、という感じです。

最初はCookieの使用も考えましたが、リファラだけでも問題なさそうだったので、今回はそのように実装しています。もし似たような処理を実装される場合に参考にしていただければ幸いです。

では、解説していきます。

リファラを取得する

「JavaScript」ではリファラを取得するためのプロパティが用意されています。下記を一行追記するだけでユーザーのリファラを取得することができます。

document.referrer;

せっかくなので現在閲覧してくれている方のリファラを取得してみたいと思います。

let btn = document.getElementById('btn');

btn.addEventListener('click', function(){
    alert(document.referrer);
});

上のボタンをクリックするとリファラが記載されたアラートが表示されます。たった数行で簡単に取得することができましたね！

続いて取得したリファラに特定の文字列が含まれるか検証する方法をご紹介していきたいと思います。

リファラに文字列が含まれるか検証する

JavaScriptで文字列を検証するプロパティはいくつかあると思いますが、本記事では「match」を使った方法で解説していきます。

「match」は引数に指定した文字列が含まれていた場合は「true」となり配列を返します。もちろん引数には正規表現を使用することができます。

下記のサンプルでは、取得したリファラのURLを検証して「example」という文字列が含まれているか確認しています。検証結果は「result」という変数に代入して保持しています。

var ref = document.referrer;
var result = ref.match(/example/)

もし「matchの検証結果が真だった場合は下記、ような配列が返ってきます。偽の場合は「null」が返ります。

["example", index: 8, input: "https://example.co.jp/", groups: undefined]

では「match」を使用してリファラで取得したURLに特定も文字列が含まれるかを検証後、結果によって処理を分岐するスクリプトを作成していきます。

リファラのURLで処理を分岐する

方法は簡単です。これまでご紹介してきた内容にif文で条件分岐を作成します。

window.onload = function() {
    
    var ref = document.referrer;
    var result = ref.match(/example/)

    if(!result) {
        //含まれない場合の処理

    } else {
        //含まれる場合の処理

    }
};

もし「match」で検証した結果、ヒットした文字列を使用して分岐したい場合は、下記のように記述することでヒットした文字列を取得することができます。

var ref = document.referrer;
var result = ref.match(/example/)

console.log(result[0]);
//結果: example

最後に

いかがでしたでしょうか。

JavaScriptでリファラを取得して何か処理をする、というスクリプトはあまり使用することはないかもしれないですが、知っていると将来的に役に立つことがありますので、「そういえばあの方法でリファラ取得できたな～」と頭の片隅にでもおいてもらえれば幸いです。

以上、JavaScriptでリファラを取得してURLの内容で処理を分岐する方法のご紹介でした！