仙台・宮城のWEB担当者の方、こんにちは！今日は、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を取得できるんだぞ」と覚えておくと何かの時にいろいろなコードと組み合わせて実現したい処理が可能になるかもしれません。知識として覚えておいてもらえると嬉しいです。
それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならダテナまで！もちろん宮城県外の方も大歓迎です！
