google analyticsの便利なプラグイン「autotrack.js」の紹介
2016年 12月 04日
- ページビュー系(headerに仕込むケース)
- イベントトラッキング系(bodyの後半に仕込むケース)
- 外部リンクへのトラッキングコードを単に仕込むことで直帰率の計測に影響してしまったり
- ソーシャルボタン(いいね)の計測はしたいが、iframeで実装されているのでクリックイベントを取得できない
- etc…
- プラグイン集のautotrack.jsを非同期で読み込む。
- ga関数を使用して希望のプラグインをrequireする。
<script async src='https://www.google-analytics.com/analytics.js'></script> <script async src='path/to/autotrack.js'></script><script>ga('require', 'プラグイン名1', オプション);ga('require', 'プラグイン名2', オプション);</script>
npm install autotrack
呼び出すだけrequire('autotrack');
後述するプラグインを個別に呼び出すこともできます。require('autotrack/lib/plugins/clean-url-tracker")
全部でプラグインは9種類あるのですが全部紹介すると長くなるので汎用性のある4種類をここでは紹介します。
eventTracker
イベントの自動トラッキングを提供します。 トラッキングしたいdomの属性にga~を付与するだけです。ga関数をクリックイベントに仕込む必要はありません。
これを使うことで、GAのイベントトラッキングとマークアップが紐づくので保守性の向上につながると思うので一番のおすすめです。ただし、既存のイベントトラッキングコードとの重複には注意です。
<button ga-on="click" ga-event-category="Button" ga-event-action="click" ga-event-label="ButtonA" > A </button>
outBoundLinkTracker
下に書いたような外部サイト(別ドメイン)へのリンクの自動トラッキングを提供します。
外部サイトの遷移を一律でトラッキングしたいといった場合にプラグインのインポートの手間だけで済むので工数の削減につながるのでおすすめです。
<a href="https://example.com">...</a>
outboundFormTracker
外部ドメイン(別ドメイン)サイトへのフォームアクションの自動トラッキングの提供をします。今回の例だとexample.comへsubmitするフォームを自動でトラッキングしてくれます。
これもoutBoundLinkTrackerと同じ理由でおすすめです。
<form action="https://example.com">...</form>
socialWidgetTracker
eventTrackerと使い方と用途は似ていますが、こちらはソーシャルウィジェット(いいねボタンなど)の自動トラッキングを提供します。
これらはdom要素としてはiframeで展開されるために、通常クリックイベントが発火しないためイベントが取れません。
そこでこれを使用すると、デフォルトだとツイッターやフェイスブックを自動で取得できます。SNS関連の施作をするなら検討する価値はあると思います。
他の5種類に関しては、私の勉強不足で用途が不明瞭だったり、GA側の設定が必要なので今回は名前と簡単な説明に止めておきます。
cleanUrlTracker | URLを正規化した状態での自動トラッキング |
impressionTracker | 要素に対してあるビューポートで表示した場合の自動トラッキング |
mediaQueryTracker | メディアクエリーでセグメント可能とした自動トラッキング |
pageVisibilityTracker | より正確なセッションの管理上のトラッキング |
urlChangeTracker | シングルページアプリケーション用で、url変更のトラッキング |
今回はGAの運用の問題になりそうな点と、それを解決してくれそうなプラグイン「autotrack.js」の紹介をしました。この記事を見てGAの興味を持っていただければ嬉しく思います。
また深くは書きませんでしたが、プラグインもデフォルトのままだと使いにくいのでサービスインするならカスタマイズは必須だと思います。
しかし、既存のGAでは取得が難しかったりする値が簡単に取れるので長期的にみると導入を検討する価値があるように思いました。ぜひ皆さんも試してみてください。
ちなみに次回は同期の三浦君が今流行りのVRコンテンツの作り方を紹介してくれるらしいです。ぜひ挑戦してみたいです。
エンジニア募集
エキサイトではエンジニアとして一緒に働いてくださる方を新卒採用と中途採用で募集しています。詳しくは、こちらの採用情報ページをご覧ください。