長期にログを取る用途ではなく、開発過程でどのページがどのタイミングでアクセスされたかをチェックするための簡易サーバとクライアントサイドからの呼び出しコードです。

簡易ですがサーバ側でログを取るので、Webブラウザの環境に依存しにくい動作を期待できます。次のようなケースのとき向け。

• JavaScriptコンソールやWebブラウザの通信ログでは余計な情報が多すぎる
• モバイル端末での挙動確認なのでWebブラウザの開発者ツール類が使用できない

起動させたサーバに対して ?view=<測定対象URL> のようにしてGETアクセスすると、 <測定対象URL> のみを console.log() で出力します。後はそのまま眺めるなり、もう一工夫してファイルに記録するなり、用途に応じてカスタマイズ。

サーバ側

node.js 実装 + Docker 起動。停止時は適宜 docker stop などで。

index.js:

const express = require('express')

const server = express()
server.get('/', (req, res) => {
  const url = new URL(req.url, `${req.protocol}://${req.hostname}`)
  console.log('pageview: ' + url.searchParams.get('view'))
  res.setHeader('Access-Control-Allow-Origin', '*')
  res.statusCode = 200
  res.end()
})

server.listen(8080)

起動:

$ docker run -it -v${PWD}:/mnt/app -p 8080:8080  node node /mnt/app/index.js

クライアント側(Webブラウザ側)

jQueryやaxios等が使えるのであれば、そちらの方が色々便利かと思います。今回はターゲットWebブラウザがChromeだけなので、XMLHttpRequest決め打ちでよいだろうと判断。 なお、例ではRuby on Railsへ組み込んでいるので turbolinks:load イベントからの起動になっています。

<script>
  document.addEventListener('turbolinks:load', event => {
    const url = event.data.url;
    const req = new XMLHttpRequest()
    req.open('GET', 'http://' + window.location.hostname + ':8080/?view=' + url);
    req.send();
  });
</script>