チェックボックスのチェック／未チェックで別々のイベントトラッキングを行う方法

Web2016年12月8日

Googleアナリティクスでチェックボックスのチェック／未チェック時のクリックイベントを別々に計測する方法をご紹介いたします。

サンプルコード

js

(function($){
	$("input#hoge[type='checkbox']").on('change', function(e){
		if($(this).prop("checked")) {
			alert("チェック済みのクリックイベントを計測しました");
			dataLayer.push({'event': 'UAevent','category':'カテゴリ名','action':'アクション名','label':'true'});
		}
		else {
			alert("未チェックのクリックイベントを計測しました");
			dataLayer.push({'event': 'UAevent','category':'カテゴリ名','action':'アクション名','label':'false'});
		}
	});
})(jQuery);

※jQueryを読み込んでいる場合のスクリプトとなります

html

<form action="">
<input type="checkbox" id="hoge"><label for="hoge">イベント計測するチェックボックス</label>
</form>

解説

input#hoge[type='checkbox']に対し、changeでチェックボックスで値が変わった際にチェック済みかどうかをpropで判断しています。
以下の記事でも解説していますが、attrよりpropを使ったほうがよいです。

※jsにおける属性を取得できるのに対し、attrはhtmlの属性を取得するため

以下の記事でも同様の解説をしていますのでもしよろしければ参考にしてください。

jsでページ読み込み時にチェックボックスをデフォルトでチェックしておく機能を実装

あとはif文で処理を分けるだけです。チェック済みの場合はチェック済みの、未チェック時は未チェック時のイベントトラッキングをdatalayer.pushでアナリティクスに飛ばします。

datalayer.pushの記述はダミーですので、サイトに応じて適宜変更してください。

まとめ

使用頻度の高くないケースだとは思いますが、先日業務で実装の必要があったのでメモとして記事にまとめてみました。

もしチェックボックスのチェック／未チェックでイベントトラッキングを計測したいケースがありましたら、どうぞ本記事をご参考にしていただければ幸いです。

この記事を読んでいる方にオススメの記事

「Web」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。