人気ブログランキング | 話題のタグを見る

google analyticsの便利なプラグイン「autotrack.js」の紹介

このエントリはAdvent Calendar 2016の12/04公開分の記事でもあります。
エキサイトとして初のAdvent Calender参戦です。続々面白い記事があるので楽しみにしてください!!

こんにちはニュースでエンジニアをやってます新卒1年目の永野です。同期からはたまにJSおじさんって呼ばれたりしてます。
今回はgoogle analytics(GA)に関わる機会あり、その際に見つけたgoogle公式の便利なプラグイン集「autotrack.js」の紹介をします。

google analyticsの便利なプラグイン「autotrack.js」の紹介_f0364156_18145585.png

GA運用の問題点
ページ上にトラッキングコードを仕込むとなると、GA用のコードは単なるJSであるために用途によって2種類のケースが考えられるかなと思います。
  • ページビュー系(headerに仕込むケース)
  • イベントトラッキング系(bodyの後半に仕込むケース)
前者のページビュー系のトラッキングコードはPVを取得する前に離脱を防ぎ、PVの正確な計測が求められるためにheaderに入れる必要があります。
一方で後者のイベントトラッキング系はdom要素にイベントを仕込むために、domのレンダリングを考慮してbodyの後半に入れる必要があります。

この2種類のケースを同時に実装するとなると、ページの規模が大きかったり取得したいデータが多くなるとgaのコードがあちこちに散らばりがちになってしまい保守運用に影響が出てくるかと思います。
このケース以外にも
  • 外部リンクへのトラッキングコードを単に仕込むことで直帰率の計測に影響してしまったり
  • ソーシャルボタン(いいね)の計測はしたいが、iframeで実装されているのでクリックイベントを取得できない
  • etc…
このような問題に対して多少なりとも有効だと個人的に思うのが、最初に述べたgoogleの開発した「autotrack.js」です。


「autotrack.js」とは
「autotrack.js」とはgoogleがgit hub上で公開しているGA用のプラグイン集です。
ライセンスもApache Licence 2.0なので、改変や再配布も自由とのことです。

これらのプラグインの導入はとてもシンプルで2点だけです。
  • プラグイン集のautotrack.jsを非同期で読み込む。
  • ga関数を使用して希望のプラグインをrequireする。
実際に下記のコードを書いてしまえば基本的な導入はOKです。オプションを使うと、プラグインごとの設定変更ができますが、今回は簡単なプラグインの紹介なので割愛します。
<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>

ちなみにnode.jsを使用しているプロダクトなら以下のようにしても使えます
npmでインストールをして
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側の設定が必要なので今回は名前と簡単な説明に止めておきます。

cleanUrlTrackerURLを正規化した状態での自動トラッキング
impressionTracker要素に対してあるビューポートで表示した場合の自動トラッキング
mediaQueryTracker メディアクエリーでセグメント可能とした自動トラッキング
pageVisibilityTrackerより正確なセッションの管理上のトラッキング
urlChangeTracker シングルページアプリケーション用で、url変更のトラッキング


まとめ

今回はGAの運用の問題になりそうな点と、それを解決してくれそうなプラグイン「autotrack.js」の紹介をしました。この記事を見てGAの興味を持っていただければ嬉しく思います。

また深くは書きませんでしたが、プラグインもデフォルトのままだと使いにくいのでサービスインするならカスタマイズは必須だと思います。

しかし、既存のGAでは取得が難しかったりする値が簡単に取れるので長期的にみると導入を検討する価値があるように思いました。ぜひ皆さんも試してみてください。

ちなみに次回は同期の三浦君が今流行りのVRコンテンツの作り方を紹介してくれるらしいです。ぜひ挑戦してみたいです。

エンジニア募集

エキサイトではエンジニアとして一緒に働いてくださる方を新卒採用と中途採用で募集しています。詳しくは、こちらの採用情報ページをご覧ください。



by ex-engineer | 2016-12-04 00:00