JavaScriptを用いて外部サイトからのランディングの判定をする

はじめに

メディアの開発において外部サイトからの流入者のみに何かポップアップやモーダールの表示したい時などはありませんか。
今回はその判定についてまとめていきたいと思います。

外部サイトからのランディングの判定をしよう

JavaScriptを用いて外部サイトからのランディングの判定をするには分割して考える必要があります。
主に以下3つになります。

①1つ前に開いていたページのドメイン取得
②現在開いているページのドメインの取得
③①1つ前のページのドメインと②現在のページのドメインが一致するか判定

※ちなみにドメインとは例えばhttps://www.google.com/toppagedayoこんなURLがあるとすると、www.google.comの部分のことです。

それでは1つづつ確認していきましょう。

①1つ前に開いていたページのドメイン取得

これはとても簡単です。
document.referrerで取得できます。
デバックとしてChromeデベロッパー・ツールのconsoleにdocument.referrerと入力して実行すると1つ前に開いていたページのドメイン取得結果が確認できます。

1つ前にgoogleのページを開いていたのでこんな感じに確認できます。

②現在開いているページのドメインの取得

これもとても簡単です。
location.hostnameで取得できます。
こちらも同じくChromeデベロッパー・ツーでデバックできます。

今Qiitaのトップページを開いているのですが、しっかり表示できていますね。

③①1つ前のページのドメインと②現在のそれが一致するか判定

文字列の中に、ある文字（もしくは配列）が含まれるか確認するにはindexOf関数を用いて確認します。
文字列が見つかればそのインデックスを、含まれなければ-1を返します。
つまり判定結果でインデックスが返ってくるということは1つ前のページのドメインと現在のページのドメインが一致する場合で、-1が返ってくるということは1つ前のページのドメインと現在のページのドメインが一致しない場合ということがわかります。

そして①から③までを考慮して実装すると下記のようになります。

if (document.referrer.indexOf(location.hostname) !== -1) {
    //1つ前のページのドメインと現在のページのドメインが一致する場合
}else{
    //1つ前のページのドメインと現在のページのドメインが一致しない場合
};

おわりに

いかがでしたでしょうか。
業務でこの実装する際に既存のコードが無かったり検索してもきれいにまとまった無かったりしたので、まとめてみました。