ajike switch

管理がラクに!Googleアナリティクスイベントトラッキングの設定方法について

Googleアナリティクスでボタンやリンクのクリック数を取得する際にはカスタマイズが必要になります(=イベントトラッキング)
htmlに読み込むタグが analytics.js に変わってから設定方法も変わったようなので、今回はその件について。

概要

ga.js から analytics.js への変更

いつからかは覚えていませんが、新しく発行されるものについては analytics.js になっているようです。
参考:ga.js から analytics.js へ

ga.js の場合のイベントトラッキング

ga.js の時は下記設定を行っていたかと思いますが、analytics.js では変更されています

_trackEvent(category, action, opt_label, opt_value, opt_noninteraction)

準備

  • analytics.js の設置場所
    • 設置場所は head 閉じタグの前
  • カテゴリ,アクション,ラベル,値を設定する箇所ごとに決める
    • Googleアナリティクスの管理画面で表示される時のために設定する

設定

jQueryを利用する場合は下記のように設定をします。
idがbuttonの要素のクリック数を取得している例:


// Using jQuery Event API v1.3
$('#button').on('click', function() {
  ga('send', 'event', 'button', 'click', 'nav-buttons');
});

button:カテゴリ
click:アクション
nav-buttons:ラベル

参考:イベント トラッキング – ウェブ トラッキング(analytics.js)

検証

検証方法は2つ考えられます

リアルタイム検索

イベントトラッキングについてもリアルタイム検索に反映されるようになったので、管理画面にログインをしてリアルタイム検索に反映されているかで確認がとれます。

Google Analytics Debugger(GoogleChromeの拡張)

管理画面が見れない等の場合は、Google公式の拡張を利用するのがよさそうです。

Google Analytics Debugger

GoogleChromeのコンソールから、アナリティクス側にちゃんと情報が送られているかが分かるツールなので検証に使えそうです。

その他

ga.jsより管理が楽になったね!

servi

ajike switchの更新をメールでお伝えします!

8年以上ajikeが蓄積したデザイン思考とUXデザインの知見を発信し続けるブログ<ajike switch>の更新情報を無料でメールにてお知らせ致します。

×