referrerとは

document.referrerプロパティは、リファラー（リンク元URL）を参照。
Document.referrer プロパティは、このページへ「リンク」していたページの URI を返します。

参考リンク

仕様

日本語・英語ページのTOP,もしくは指定のページ以外へ行ったらその導線を出現させたい。
出現は最初の1回のみで同一サイトをいく場合、処理を行わない。

ページの階層

├── index.html // 英語版か日本語版のどちらへいくか → MAINTOP
├── en
│   ├── index.html // 英語版のTOPページ → ENTOP
│   └── other.html // 英語版のTOPページ以外(複数) → ENOTHER
└── jp
    ├── index.html // 日本語版のTOPページ → JPTOP
    └── other.html // 日本語版のTOPページ以外(複数) → JPOTHERT

動作

MIANTOP へいくと処理しない
ENTOP, ENOTHER, JPTOP, JPOTHERTの初回アクセス時には処理を行う
ENTOP → ENOTHER の場合にはENOTHERページでは処理を行わない
ENTOP → ENOTHER(1回目) → ページ閉じる → ENOTHER(2回目) の場合は、ENTOP, ENOTHER(2回目)のみ処理を行う
※ ENOTHER(2回目)はurl直打ちや履歴から訪れる前提
ENOTHERの一部ページのみ処理を行わない

今回作成したもの

Github

github.com

Page

referrer サンプルページ

作成した手順

http://localhost:8080/jp/other2.htmlから http://localhost:8080/jp/index.html へいく場合
今回はどのように動いているか見るためにページ移動での様子を記載しています。

現在のurlとページの名前を取得する

現在のページを取得し、.htmlの部分を取得する

var pathName = location.pathname.split('/') // ["", "jp", "index.html"]
var pageName = pathName[2] // index.html

referrerを使って前のページの情報を取得する

同一ページから来た判定(ページ内移動)として referrerHost

var referrerAry = document.referrer.split('/') // ["http:", "", "localhost:8080", "jp", "other2.html"]
var referrerHost = referrerAry[2] // localhost:8080

条件に合ったら処理を行う

referrerHostがサイトのurlが同じではないかurl直打ちか
localhost:8080のページではないか
localhost:8080/jp/other2.htmlのページではないか

の条件に合ったら処理を行う。

if(
  (referrerHost != location.host || referrerHost === '') &&
  pageName != '' &&
  pageName != 'other2.html'
) {
  // 何かしらの処理
}

実装に使おうと思った候補

cookie

最初は〇〇分たったら出そうと思ったが、1分で離脱してまた来る人もいれば1時間いる人も思ったので、時間の切替は無理だと思い不採用

session

ページにいる間はずっと情報を保持してくれると思ったが、ページ1からページ2へ行くと情報がなくなってしまうと思い不採用

jackmiwamiwa devblog

フロントエンドをメインに行ったことをまとめていくサイトになります。

referrerについての実装メモ