maRkの

キャンペーンだとか、Chess.appについてのなにか

GoogleアナリティクスのAutoTrackを使用してみる

AutoTrack は Googleアナリティクス を便利に使う機能のプラグインのパッケージです。

はじめに、この機能は主に開発者向けとして提供されているものです。
はてなブログを始めたばかりでアナリティクスの設定をやりたい、という人は、google:はてなブログ Google Analytics とかすると詳しい方が解説されていますから、そちらを強くお勧めします。

前提として、analytics.js を設定済み(function(i,s,o,g,r,a,m)とかあるやつ)なこと、それと、autotrack.js と同梱のプラグイン群をホストする場所を持っていることです(自分の場合は bitbucketのサイト管理下で置いてます)

アナリティクス 日本版 公式ブログanalytics.js の自動トラッキング機能の紹介

これ、やり方がわかりにくいのですが、実はそれほど難しいものでもありません(最初英語ドキュメントくらいしかなかったりしたため)。
以下に、日本語によるドキュメントがあります。

Googleアナリティクスの便利プラグイン詰め合わせAutotrackのドキュメント日本語版 | 編集長ブログ―安田英久 | Web担当者Forum

まずは、GitHubにある、autotrackを ダウンロードしておきます。


自分の場合だと、こんなかんじの階層になってます。

└── js
    ├── autotrack
    │   ├── autotrack.js
    │   ├── gulpfile.js
    │   ├── lib
    │   │   ├── constants.js
    │   │   ├── plugins
    │   │   │   ├── autotrack.js
    │   │   │   ├── event-tracker.js
    │   │   │   ├── media-query-tracker.js
    │   │   │   ├── outbound-form-tracker.js
    │   │   │   ├── outbound-link-tracker.js
    │   │   │   ├── social-tracker.js
    │   │   │   └── url-change-tracker.js
    │   │   ├── provide.js
    │   │   └── utilities.js
    │   ├── package.json
    │   └── wdio.conf.js

(autotrack.js と libだけアップでいいような気もするのだけど。/test/とかはローカルだけでサーバーになくても大丈夫と思います)

このうち、必要なのが、autotrack.js までのパスです。example.com/ga/autotrack/autotrack.js

はてなブログへの設置


個人で行ったことのメモですので、はてなブログ公式でない、ということと、この方法による不具合で損害があったとしても当方では責任を負えませんのでご理解願います。AutoTrackのドキュメントを熟読され、テスト用のようなブログで動作確認されることが望ましいです。

設定のページで、詳細設定のタブに行きます。
headに要素を追加 とあるところの以前のコードは削除して、代わりに、AutoTrack 対応コードを入れます。

<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('require', 'autotrack');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<script async src='path/to/autotrack.js'></script>

上記は全部入りの場合のスニペットです。

イベントトラッキングだけ使う、という人は以下の通りに、必要なものだけ 'require'します。

例えば、はてなブログのイベントトラッキングの時は、

記事ページだけ設置したボタンにイベントトラッキングかけるには、

<button data-event-category="button" data-event-action="click" data-event-label="{Title}"></button>

イベントカテゴリー はbutton、イベントアクションは click、 イベントラベルとして はてなブログ予約ずみ変数の{Title}でページのタイトルが GAに送信されるということになります。

outboundLinkTracker は、自分のブログのホスト名と違う外部サイトへのリンクのクリックイベントを記録するものです。

イベント カテゴリ Outbound Link
イベント アクション click
イベント ラベル リンクの href 属性の値

といった形で記録されます。

設定が済んだら、「変更する」を押して反映させます。
あとは、機能がバッティングするような、既存のスクリプトは削除しておいたほうがいいです。ga('send'~ とか。

その他、必要なトラッキングの仕込みは、デザインの編集画面の方で行います。

変更できたら、自分でアクセスしてトラッキングされていることを確認します。

f:id:maRk:20160320210935j:plain