Googleアナリティクスにおけるイベントトラッキングの使い方2013

追記：2018年2月22日　本記事は gtag.js では動作しません。＞＞公式ヘルプを参照する
追記 2015年3月9日　タグマネージャーのより詳細な設定や最新メジャメントプロトコルまで網羅した最新版を書きました。以下どうぞ。

＞＞2015年版イベントトラッキングの使い方＜タグマネージャ・ユニバーサルアナリティクス対応＞

イベントトラッキングとは

　Googleアナリティクスは、ただ単に設置しただけでは、Webページが何ページ見られた、どれくらいのユーザー数に見られた等、ページ閲覧を基本とした計測しか出来ません。

しかし、ページのどこをクリックしたか、来た人が動画を見てくれたのか、ページの最後まで見てくれか等、ユーザーを基準とした「より詳細な行動」を把握するニーズが高まってきました。

ページ内での動きを計測する、それがイベントトラッキングです。ユーザーのそういった行動やサイトが自動的に行う動作や制御など含めイベントと呼び、計測できるようにしたのです。

＞＞イベントについて – アナリティクス ヘルプ

イベントはどうやって計測するか

Googleアナリティクスのトラッキングコードが設置されていることが前提です。その上で、計測したい箇所に以下のコードを挿入すると、その動作をGoogleアナリティクスが記録します。

・カテゴリー
　イベントをカテゴリーに分けて管理できます。
・アクション
　主に、具体的な動作に名称などを付けて記録します。
・ラベル
　値と紐付けてさらにアクションを詳細に記録します。省略可能。
・値
　ラベルに対して値を紐付けできます。例えば、clickというアクションに10など。省略可能。
・ノンインタラクション
　trueかfalseという値を記述します。trueにすると直帰率に影響しなくなります。省略可能。

例えば、以下のように設置し、計測する事例が考えられます。

海外SEOの鈴木さんが折りにふれイベントトラッキングの記事をエントリーされています。ぜひ参考にしてみて下さい。

＞＞Googleアナリティクスのイベントトラッキングで検索順位を調べる方法 | 海外SEO情報ブログ

＞＞Google Analyticsで本当の直帰率を計測する方法 | 海外SEO情報ブログ

また、スマートフォン向けサイトで、ページ移動ではなくスワイプによる遷移など、ユーザーアクションに由来する動作の計測にも、イベントトラッキングが役立ちます。石本さんの記事が参考になります。

＞＞Google Analytics イベントトラッキングガイド | MOL

＞＞jQuery MobileでGoogle Analyticsを使うために気をつけなければいけないこと | MOL

イベントトラッキングの設置と注意点

設置自体はページ内のどこに設置しても構いません。そもそもページを読み込む事自体をイベントと捉えるならば、トラッキングコード内に入れても構いません。

JavaScriptという、ブラウザで動くプログラム言語で、Googleアナリティクスの基礎ともなっているプログラムを呼び出してさえあれば、どこに配置しても大丈夫です。

ただ、ここで注意があります。このonClickという記述は、クリックに反応する命令なのですが、その挙動がブラウザや状態により、精度にばらつきがあることが知られています。

その精度を検証した素晴らしいエントリーが以下です。ぜひ一読し、計測の際、心に留めておきましょう。

＞＞Googleアナリティクスでの外部リンククリック計測3つの手法の利点と欠点を整理してみた | Web担当者Forum

そして、晴れて細かくイベント設定できたならば、イベントフローのような、より細かなユーザーの動きを視覚化できる集計も可能になります。レポート＞コンテンツ＞イベント＞イベントフロー の操作で見ることも可能になります。

jQueryを使ったイベントタグ設定

さて、前述までで、イベントトラッキングはそのタグを様々な場所に記述できることがわかりました。

しかし、ページに内に直接タグを記述した場合、例えばGoogleアナリティクスの仕様が変わったら、どうでしょうか。その設置数によっては多くの改修作業が発生してしまうでしょう。

また、前述のようにブラウザの挙動など外部的な要因で、計測に疑義が生じた場合、コード自体を見直すケースも出てくるでしょう。その際に、直接タグを記述したとすると改修作業がとても煩雑なってしまいます。

そこで、リンクやページの動きを検知できる便利なプログラムを利用する手法が注目されています。それがjQueryというライブラリ（プログラム拡張のための外部から別途読み込んで使うプログラム部品）です。

jQueryは以下のサイトで詳しく知ることが出来ます。現在では、その多機能性からWebデザインからプログラム制御まで、多くのWebページで使われています。

＞＞jQuery 日本語リファレンス

それでは、具体的にGoogleアナリティクスにどう組み込むのか見てみましょう。

まずは、Webページのヘッダー部分にjQuery呼び出し行を記述します。※自身のサイトにjQueryのファイルをダウンロードしたものを置き、それを読み込んでも勿論OKです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

次に、トラッキングコード内、例えば_gaq.push([‘_trackPageview’]);の後ろに以下を追加します。すると、リンクである＜Ａ＞タグのうち、http://やhttps://?で始まるリンクのみ検知して、イベントトラッキングしてくれます。いわゆる外部リンクの計測となるでしょう（内部リンクでもhttp://?で指定していたら、また少し工夫しなければなりませんが）。

jQuery(function() {
    jQuery("a").click(function(e) {
        var url = jQuery(this).attr('href');
        if (url.indexOf("https") == -1 || url.indexOf("http") == -1 ) {
            _gaq.push(['_trackEvent', 'OutboundLink', 'Click', url ]);
        }
    });
});

より詳しいjQueryとの連携は、以下で知ることが出来ます。

＞＞jQueryを使って外部リンクをGoogle Analyticsで自動計測する方法 :: 「清水 誠」公式サイト

＞＞googleアナリティクスで簡単にクリックカウント出来るコード – ファンブログハック

＞＞外部リンクのクリックをGoogle Analyticsのイベントトラッキングに記録するJavaScript（jQuery使用） ≪ 頭蓋骨の中は楽園

追記 2013年1月22日19時06分

jQueryで自ら追加コードを書かずに、Googleアナリティクスに特化したライブラリ（追加プログラムを利用する）という方法もあります（thanks:森野さん）。以下は、発リンクなどさまざまなデータを取得できるGA Functionsという国産のライブラリです。

＞＞Google Analyticsにフォーム入力イベントなどを機能拡張するJavaScript「GA Functions」を公開 | Google アナリティクス | murak.net

タグマネージャーによるコード管理の効率化

さて、このようにトラッキングコードに、イベント関連のプログラムを付加して、ページ内のリンクや挙動にイベントを計測するならば、そのコード自体も一元管理してメンテナンス性を増したほうが良いのでは、という考え方が出てきます。

それが、タグ管理という考え方です。

広告の計測タグやGoogleアナリティクスのトラッキングコードなど、サイト運営をビジネスとして考えたときに、さまざまなデータ取得をする必要があります。そのために様々な計測タグを貼り付けることになります。しかし、それらが増えれば増えるほど、管理が煩雑になります。

その課題を解決すべく普及の兆しを見せているのが、タグ管理ツールです。実際Googleからも、昨年タグマネージャとしてツールが提供開始されました。

＞＞Google Tag Manager official website

タグマネージャについては以下が詳しいです。

＞＞Tag Manager 公式ヘルプ
＞＞アナリティクス 日本版 公式ブログ: Google タグマネージャのご紹介 　日本語インターフェースのリリース
＞＞タグマネジメントツール「Googleタグマネージャ（Tag Manager）」についての紹介｜コラム アユダンテ株式会社

複雑になったタグも、タグマネージャで管理すれば、何かあった場合でもそこを変更するだけで良いので、とても便利です。

今後、ユニバーサルアナリティクスの必要性が言われる中で、イベントはさまざまな局面で、私達に価値あるデータを示してくれるでしょう。その高度なトラッキングコードの管理の際、タグマネージャは管理コスト抑制の助となるはずです。

イベントトラッキング2013・まとめ

・ページ遷移でなく挙動や動作の計測にはイベントトラッキング。
・_gaq.push([‘_trackEvent’, ‘category’, ‘action’, ‘label’, opt_noninteraction]);”
・jQueryを使うと本体をいじらなくていいから楽。
・さらにタグマネージャも使うと管理しやすくなるはず。

Googleアナリティクスは、標準でも多くのデータを取得できます。しかし、ユーザーの挙動を一歩踏み込んで取得しようというときにイベントトラッキングが欠かせません。

とは言え、まずは気軽に設置して「こんな値も取れるんだ」と実践してみて下さい。カスタム出来るのがGoogleアナリティクスの良い所であり、それを実践しやすいのがイベントトラッキングです。

いろいろと試してみて下さいね。

＞＞
プロフェッショナルのためのGoogleアナリティクス完全マニュアル Ver.5対応版 (Next Publishing)
　

・　・　・　・　・

＞＞安っ！アマゾンで半額以下になっている食品タイムセール
セール特設ページを見る