チェックボックスのチェック／未チェックで別々のイベントトラッキングを行う方法
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の属性を取得するため
以下の記事でも同様の解説をしていますのでもしよろしければ参考にしてください。
あとはif文で処理を分けるだけです。チェック済みの場合はチェック済みの、未チェック時は未チェック時のイベントトラッキングをdatalayer.pushでアナリティクスに飛ばします。
datalayer.pushの記述はダミーですので、サイトに応じて適宜変更してください。
まとめ
使用頻度の高くないケースだとは思いますが、先日業務で実装の必要があったのでメモとして記事にまとめてみました。
もしチェックボックスのチェック／未チェックでイベントトラッキングを計測したいケースがありましたら、どうぞ本記事をご参考にしていただければ幸いです。