GoogleAnalyticsでイベントトラッキング一括設定 gtag.js

カテゴリー：JavaScript

記事作成日：2019.07.23

GoogleAnalyticsイベントトラッキングでボタンクリック数などを知りたい場合、各ボタンにonclickで設定する方法をよく見かける。
```
// analytics.js の場合
onClick="ga('send','event','category','click','label',1);"
```

このga()は analytics.js の古い記法なので、最近(2019時点)の gtag.js では記法が異なる。

```
// gtag.js の場合
onClick="gtag('event','click',{'event_category':'category','event_label':'label','value':1});"
```

ただし、HTMLタグ内にこれらを埋め込むのは非常にコードが汚くなってしまう。<br>
JavaScriptは別途記述して別ファイルにするべきだろう。

## サイト内の全ボタンを測定したい

サイト内の全ボタンを計測する場合、各ボタンやリンクにイベントリスナーを設定することになるが、個別にid属性を設置したのでは管理が煩雑になってしまう。<br>
querySelectorでの特定も考えられるがサイト構造が変更になった場合、メンテナンスが大変である。

## 効率よく設定

HTMLに何も加えることなく一括して制御できないか考えたが、なかなかいい案が浮かばず、結局今のところ以下のコードが最適だと思う。

計測したいボタンやリンクには data-event="xxxx" の属性を設置して、それを一括で取得し、イベントリスナーを設置することとする。<br>
ページ判定として var page = "top" などを仕込むことを前提。<br>
コードは以下の通り。
```
<!doctype="html">
<html>
<head>
</head>
<body>
<button type="button" data-event="PUSHボタン">PUSH</button>
<a href="http://example.com/" target="_blank" data-event="example.comへ">example.comを開く</a>

<script> var page = 'top'; </script>

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxxx-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){ dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-xxxxxxxxx-1');
</script>

<script>
(function(window,document){
	var _pages = {
		'top':'トップ',
		'about':'会社案内',
		'facility':'施設案内',
		'recruit':'採用情報',
	};
	window.addEventListener('load',function(){init();},false);
	function init() {
		var dataEvents = document.querySelectorAll('*[data-event]');
		for (var i = 0; i < dataEvents.length; i++) {
			(function(dataEvent){
				var eventCategory = _pages[page] ? _pages[page] : page;
				dataEvent.addEventListener('click',function(){
					gtag('event','click', {'event_category':eventCategory, 'event_label':dataEvent.getAttribute('data-event'), 'value':1});
				},false);
			})(dataEvents[i]);
		}
	}
})(window,document);
</script>
</body>
</html>
```

var page = 'top'; の部分は、敢えて記述しなくとも自動で設定される仕組みをかつてから使用している。<br>
よって、今回それを使用することとした。<br>
つまり、特別な手間は増えていない。

JavaScriptはES6ではなくあえてES5で記述。<br>
この程度の短いスクリプトを良く書くので、いちいちBabelを通すなどはしない。

## 解説

JavaScriptをよく書く人なら見た通りなので解説は不要でしょう。<br>
この例で作成される gtag() は以下の通り。
```
gtag('event','click', {'event_category':'トップ','event_label':'PUSHボタン','value':1});
gtag('event','click', {'event_category':'トップ','event_label':'example.comへ','value':1});
```

CONTENTS

ブラウザ

FirefoxでURL欄から検索させない。

ウェブサーバー

mod_rewrite、RewriteRule のデバッグ。正規表現にマッチした値を表示する

CSS

CSS counter 自動ナンバリングまとめ

CSS

CSSで変数(カスタムプロパティ)まとめ

その他

パソコン版Googleドライブを使用するとファイルアクセスが遅くなる

ブラウザ