問題
解決策
gtag.js
gtag.jsにgoogle analyticsが移行し、イベントトラッキングの記述方法も若干変わりました。
今回はgtag.jsでのイベントトラッキングの設定をjavascriptで行っていく方法をご紹介します。
イベントトラッキングの記述
イベントトラッキングの記述は以下になります。
それぞれ、適宜名称を決めて、記述します。
gtag('event','イベント名', {'event_category': 'カテゴリ名','event_label': 'ラベル名'});
例①：バナー等、特定の要素をクリックした場合の記述
例として、バナー等、特定の要素をクリックした場合は、クリックイベントの処理の中に上記の記述を行います。
- ※jQueryでの記述です。
$('特定の要素のセレクタ').click(function(){
gtag('event','イベント名', {'event_category': 'カテゴリ名','event_label': 'ラベル名'});
});
例②：コンテンツ内の外部リンク、ドキュメントリンク（PDF、Word、Excel）をクリックした場合の記述
さらに例として、全ページを対象に、コンテンツ内の外部リンク、ドキュメントリンク（PDF、Word、Excel）をクリックした場合の記述です。
- ※jQueryでの記述です。
- ※コンテンツがid「content」と設定されているという想定での記述なので、「#content」の部分をコンテンツを囲うidまたはclassに適宜、修正してください。
- ※イベント名、カテゴリ名、ラベル名は適宜、設定し直してください。
// CONTENT
if($('#content a')){
$('#content a').click(function(){
var href = $(this).attr('href');
var text = $(this).text();
if( $(this).find('img').length && text == "" ){
text = $(this).find('img').attr('alt');
}
if( text == "" || text == "こちら" || text == "詳細はこちら" || text == "くわしくはこちら" || text == "詳しくはこちら" ){
text = href;
}
if (href != null ) {
if($(this).attr('target') && $(this).attr('target') == "_blank"){
gtag('event','click', {'event_category': location.pathname,'event_label': 'コンテンツ内 外部リンク「'+text+'」 クリック'});
}
var rehref = href.replace(/#/g,'');
if (rehref.match(/.pdf/i) ) {
gtag('event','click', {'event_category': location.pathname,'event_label': 'コンテンツ内 PDFリンク「'+text+'」 クリック'});
}else if(rehref.match(/.xlsx/i) || rehref.match(/.xls/i)){
gtag('event','click', {'event_category': location.pathname,'event_label': 'コンテンツ内 EXCELリンク「'+text+'」 クリック'});
}else if(rehref.match(/.docx/i) || rehref.match(/.doc/i)){
gtag('event','click', {'event_category': location.pathname,'event_label': 'コンテンツ内 WORDリンク「'+text+'」 クリック'});
}
if(href.indexOf('mailto:') != -1){
gtag('event','click', {'event_category': location.pathname,'event_label': 'コンテンツ内 メールリンク「'+text+'」 クリック'});
}
if(href.indexOf('tel:') != -1){
gtag('event','click', {'event_category': location.pathname,'event_label': 'コンテンツ内 電話リンク「'+text+'」 クリック'});
}
}
});
};
- リンクテキストを取得し、google analytics側に渡すために、「$(this).text()」を変数「text」に入れてイベントトラッキングに設定しています。
- リンクがバナー等、画像の場合は条件分岐IFで「$(this).find(‘img’).length && text == “”」により、aタグ内に画像があると共にテキストが空である場合、画像のaltの情報を変数「text」に代入しています。
- リンクテキストは「詳しくはこちら」等、リンク先がわからない記述の場合は、リンク先のURLを変数「text」に代入しています。
- カテゴリ名は「location.pathname」を使い、現在のページ情報を設定しています。
- 「match(/.〇〇/i)」で、PDF、Excel、Wordそれぞれの拡張子の記述がリンク先のURL内に含まれていた場合、それに応じたイベントトラッキングを設定します。
- 「target=”_blank”」が設定されている場合は、外部リンクとしてイベントトラッキングを設定します。
- 「indexOf」で、「mailto:」または「tel:」の記述がリンク先URLに含まれていた場合、それぞれのイベントトラッキングを設定します。
ここに注意！
google analyticsのトラッキングコードを読み込む前に上記処理が読み込まれてしまうとエラーとなってしまうので、処理、読み込みの順番は十分気を付けてください。
参考ページ
【Google アナリティクスのイベントを測定する | ウェブ向けアナリティクス（gtag.js） | Google Developers】
https://developers.google.com/analytics/devguides/collection/gtagjs/events
【[JavaScript] 現在のURLやパラメタを取得する方法（Location） | Search Light（CakePHP PHP jQuery JavaScript CSS Linux MySQLMac）】
http://www.searchlight8.com/javascript-location/
【JavaScript 正規表現まとめ – Qiita】
https://qiita.com/iLLviA/items/b6bf680cd2408edd050f
【String.prototype.indexOf() – JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf
コメント