問題 × 解決策

gtag.jsのイベントトラッキングの設定方法

問題

Google analyticsのgtag.jdでのイベントトラッキングの設定をjQueryで行うには?

解決策

「gtag(‘event’,‘イベント名’, {‘event_category’: ‘カテゴリ名’,‘event_label’: ‘ラベル名’});」で記述する。

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

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

14 − nine =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧