JavaScriptが許可されていなくてもAnalytics分析ができる？

こんにちは、本日ご紹介するのは、
GoogleAnalyticsのTipsです。

通常のGoogleAnalyticsはコードを埋め込む

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

通常はこんな感じで</head>の終了タグ直前にコードを追加し、GoogleAnalyticsを有効にします。

それによってanalytics.jsライブラリが非同期で読み込まれます。

いつでも使えるわけじゃない

ブラウザの設定やセキュリティによって、JavaScriptを実行できない場合があります。それがサイトアクセスの数％だとしても、どうにか対応したいものです。

GoogleAnalyticsがやっていることを、CSSで一部実現できるようです。

GoogleAnalyticsがgifをよんでる

Chromeの開発者ツール（ネットワークタブ）を監視すると、どうやらgoogle-analytics.comからgifファイルを読み込んでいます。

GoogleAnalyticsはgifをGETするときにパラメーターをつけて送っています。ということは、そのRequest URLをつかってCSSで読み込むと…？

background-image: url(‘http://www.google-analytics.com/collect?v=1&_v=j...');

という具合に純粋なCSSでユーザーのアクションを追跡することが可能なようです。

まとめ

もちろん一回読みこめばいいものではなく、トラッキングするユーザーアクションに応じて設定する必要があります。具体的には、:activeや:focusなどの擬似クラスをつかって読み込みを発生させ、トラッキングするというものです。

欠点もあります。背景イメージの要求は一度だけであるため、その後すべてのクリックをトラッキングしたい場合、それぞれURLを変更する必要があります。

少し複雑な話になってしまいましたが、どうしてもJavaScriptが使えない状況の分析をしたい場合、お試しください。

参考：
CSS-Only Solution For UI Tracking | Smashing Magazine

Author Profile

Tsukasa Nagata

株式会社ユニマル代表取締役COO。「Web制作チームのためのクリエイティブ・プラットフォーム『universions』」では、UIデザイン・開発とマーケティング、色んなところに遊びにいくのが担当。

Latest entries