こんにちは、本日ご紹介するのは、
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
Latest entries
- 2018.04.16プロフェッショナルインタビュー【企業編】広島から全国、そして世界を目指す!株式会社MIRAIのハイレイヤー分析
- 2016.10.21プロフェッショナルインタビュー【企業編】【後編】「夢があればブラックじゃない」福岡の技術集団オルターブースはベーシスト小島氏と愉快な仲間たち
- 2016.10.18プロフェッショナルインタビュー【企業編】【前編】福岡の技術集団オルターブース。楽曲を作れると思ってCOBOLを書いていたベーシスト小島氏と愉快な仲間たち
- 2016.09.02プロフェッショナルインタビュー【フリーランス編】【後編】代理店の仕事は気が楽だけど、それでも直接受ける案件が大事。JUSO Coworkingオーナー深沢さんの仕事