タイトルの通り。
ちょいとお仕事絡みでWeb解析ツール使ってて、デバッグのためRefererの書き換えをしたい！と思ったのだけど、意外にググっても情報が出てこない。。。良い感じのプラグインも無いし。
※以下のChromeプラグイン「Referer Control」があるにはあったけど、すげー使いづらい。。。
https://chrome.google.com/webstore/detail/referer-control/hnkcfpcejkafcihlgbojoidoihckciin?hl=ja
で、自分で調べたので、備忘録的にブログに載せておく。
まず、最初に思いついたのが、ChromeとかのDeveloper ToolのConsoleで以下のように書き換える方法。
document.referrer=”http://hoge.com/”;
実際にやってみたけど、Javascriptエラーにはならないがちゃんと上書きされずに元に戻ってしまう。
ブラウザの仕様かしら？元々referer情報はHTTP通信時に付与される情報だし、通信が終わった後でConsoleで変更しても意味無いと言えば無いので、document.referrerへの代入では変更できない仕様なのかもしれない。この辺り、あまり深堀りはしてないけど、調べてみるとちゃんとした理由はあるんだろう。。
で、代わりに使えるメソッド無いのかしら？と思ったら、やっぱりあった。
見つけたのは２つ。
どちらも試してみたけど変更はできた。
１つは、Objectオブジェクトのprototypeにある__definedGetter__()メソッドを使う方法。
<script>document.__defineGetter__(‘referrer’,function(){return “http://www.google.co.jp/?q=test123”;});</script>
ただし、以下のMozillaページみるとわかる通り、ECMAScriptで定義されていないため非推奨。
Object.prototype.__defineGetter__()
なので、もう１つのやり方を使った方が良い。
それがこちら。
<script>Object.defineProperty(document,”referrer”,{value:”http://www.google.co.jp/?q=test456″});</script>
詳細はこちら。
__definedGetter__()のヘルプにもこっちを使ってね、と書いてある。
Object.defineProperty()
あとは、このscriptタグを、解析ツールのタグの手前に挿入してあげれば良い。
例えばGTMのタグであれば、以下のように。
<script>Object.defineProperty(document,”referrer”,{value:”http://www.google.co.jp/?q=test456″});</script>
<!– Google Tag Manager –>
<noscript><iframe src=”//www.googletagmanager.com/ns.html?id=GTM-XXXX” height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>
〜
普通の作業しててReferer書き換えることってあまり無いけど、アクセス解析ツール仕込む際は、基本的にチャネル情報はRefererをベースに設計されているので、Referer変えられないとテストが出来なかったりする。
なので、この方法を頭に入れておくと有益。
この投稿が、同じ悩み抱えてる人の助けになれば幸いです。
