フロントのエンド

Web開発をがんばりたいブログ

Tool

アナリティクスでクリックを計測するならば、イベントトラッキングなのよ

by:
17/01/10

やー、アナリティクスになれてるつもりでも一歩踏み込んで使い方聞かれたらわたわたするよね。

具体的に言えばどこをクリックして遷移しているのか、とりたい。

グローバルナビなのか、フッタのリンクリストなのか、そういうやつ。

アナリティクスの機能だと、どういうの使うかというと、「イベント」

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

イベント トラッキング  |  ウェブ向けアナリティクス(analytics.js)  |  Google Developers

「イベント」は、ウェブページやアプリの画面の読み込みとは関係なくトラッキングできる、コンテンツとユーザーの接点です。ダウンロード、モバイル広告のクリック、ガジェット、Flash の要素、AJAX の埋め込み要素、動画の再生などはすべて、「イベント」としてトラッキングできます。

やりようはいくつかあるみたいだけども、一番シンプルなのが

<a href="~" onClick="ga('send','event','カテゴリー','アクション','ラベル',値,{'nonInteraction':1});">~</a>

aタグに仕込むスタイル。

ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);

必須項目は[eventCategory][eventAction]なので、後は省略してもよい。

<a href="~" onClick="ga('send','event','sitelink','click','gnav',this.href,);">~</a>

とかでクリックされた場所はとれそう。

this.hrefはaタグ自体の遷移先を自動で拾う。

WordPressのカスタムメニューを使っている場合

コードが自動生成されて、aタグ触れないわけだけども

  • jQueryで特定のクラス・IDにコードを差し込む
  • WordPressのプラグインを使う

の方法が選択できまして。

JinMenu — WordPress Plugins

管理画面から触れた方が柔軟な気がするから、プラグインでドン。

カスタムメニュー1個づつにonclickを設定出来るけども、これ、1つづつ設定するの、あんまり意味ないかも。

$( document ).on( 'ready', function () {
    $( '.menu' ).on( 'click', function ( event ) {
        ga( 'send', 'event', 'sitelink', 'click', 'gnav', );
    } );
} );

とかの方が、シンプルか。

という、感じです。

コメントを残す