Google Analyticsの新しいユニバーサルコードではイベントトラッキングのやり方が変わっているので注意が必要

951f6f6693d179c22cedbd85f381b82b_2l
このエントリーをはてなブックマークに追加
PR

ウェブサイトにイベントトラッキング用のコードを入れていたのですが、動いていなかったので調べてみたら。最新のユニバーサルコードと以前からあるコードではイベントトラッキングの書き方が違いました

なので、ユニバーサルコードへ切り替える方は注意が必要です

 

ユニバーサルコードでのイベントトラッキングのコードの書き方

ユニバーサルコードでのイベントトラッキングについてのページ
https://developers.google.com/analytics/devguides/collection/analyticsjs/events (英語)

標準コードでのイベントトラッキングについてのページ
https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide (英語)

Googleのヘルプに情報がありますが、英語ですね。

 

ユニバーサルコードの場合はは次のように書きます

ga('send', 'event', 'button', 'click', 'nav buttons', 4);

 

例えばaタグに組み込む場合はこのようになります

<a href="http://tenpara.net/download/016.zip" target="_blank" onclick="ga('send', 'event', 'download', 'click', '016.zip (ver.1)');">016.zip (ver.1)</a>

aタグのクリックがトリガーになっています

 

最初のコードの例で言うとそれぞれの項目は

send = 固定値 必須
event = 固定値 必須
button = カテゴリ 必須
click =アクション 必須
nav Buttons =ラベル(日本語可)
4 = 値(数字のみ)

それぞれはこのようなパターンで書けます

ga('send', 'event', 'category', 'action');
ga('send', 'event', 'category', 'action', 'label');
ga('send', 'event', 'category', 'action', 'label', value);

action 以下は省略する事が出来ます
それより前は必ず必要です
sendとeventは固定値です、それ以下が自由に設定できます

 

javascript・jQueryでスクリプトで使う方法がヘルプに載っています

 

この例は idがbuttonになっているものを想定しています

HTML

<button id="button">Please click</button>

 

javascript

var downloadLink = document.getElementById('button');
addListener(downloadLink, 'click', function() {
  ga('send', 'event', 'button', 'click', 'nav-buttons');
});

/**
 * Utility to wrap the different behaviors between W3C-compliant browsers
 * and IE when adding event handlers.
 *
 * @param {Object} element Object on which to attach the event listener.
 * @param {string} type A string representing the event type to listen for
 *     (e.g. load, click, etc.).
 * @param {function()} callback The function that receives the notification.
 */
function addListener(element, type, callback) {
 if (element.addEventListener) element.addEventListener(type, callback);
 else if (element.attachEvent) element.attachEvent('on' + type, callback);
}

 

jQuery

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

 

jQueryのがコードが短くて扱いやすいですね

 

コードを設置したらあとは実際に動作するか確認してみてください
現在のAnalyticsではリアルタイムでクリックのカウントができるので、正しく動いているかすぐわかると思います

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)