こんにちは、エクスチュアの岩川です。
GTMで用意されているトリガーでクリック計測しようとしたとき、
「すぐに発火してしまって思うように動作しない・・・」
「クリック直後に計測したいわけじゃないなあ・・・」
なんてことありませんか？
今回はそんなクリック後すぐに発火させたくないケースにおいて指定秒数後に発火させるような設定をGTMで行なっていこうと思います。
セレクタについて
まずこの設定を理解するにあたって”セレクタ”と呼ばれるものを理解する必要があります。
セレクタとはCSSやJavascriptを使用してDOMを取得したり操作したりする際に指定するものです。
例えばaタグを指定したい場合、
document.querySelector('a');のように指定します。
しかしこれではページ上の全てのaタグを指定してしまいます。
そこでhtmlで使用されているid属性やclass属性を使用します。
id属性の前には#を、class属性の前には.をつけることで指定が可能となります。
document.querySelector('#id属性名');document.querySelector('.class属性名');aタグにtestというclass属性のついているタグを指定したい場合
document.querySelector('a.test');のように組み合わせることも可能です。
セレクタを使用してｎ秒後に発火させるようにする
いよいよ本題に入ります。
GTMのカスタムHTMLに以下のコードを記述しましょう。※トリガーはDOM Ready
<script type="text/javascript>
window._fnc_exec_check = false;
var _exElem_ = ここにセレクタを指定;
_exElem_.addEventListener("click",function(){
if(!window._fnc_exec_check){
window._fnc_exec_check = true;
var _fnc_exec = function(){
clearInterval(_fnc_);
console.log("done"); // この部分を、任意のJS（dataLayer,pushなど）に変更
}
var _fnc_ = setTimeout(_fnc_exec , 5000); //1000＝1秒、例として5秒
}
});
</script>上記_exElem_部分に前述したセレクタの指定の方法で指定をしてください。
このままだとコンソール上にログが表示されるだけになっていますのでconsole.log(“done”);の部分を書き換えましょう。
今回はdataLayerを利用して発火させようと思いますので
dataLayer.push({'event': 'ex-click'});と書き換えましょう。
ここまでくれば下準備は完了です。
GTMのトリガーでカスタムイベントを使用し、イベント名を指定しましょう。
今回のイベント名はex-clickですので
このようなトリガーになります。これをｎ秒後に発火させたいタグに設定しましょう。
以上で設定完了となります。
いかがでしたでしょうか？
セレクタを利用するときはそのページ上のコードがどのように記述されているかを理解する必要があるので少し難しいかもしれませんが慣れると細かい指定ができるようになります。
エクスチュアでは様々な企業様の基本的な悩みから高度な悩みまで丁寧にお手伝いいたします。
是非お気軽にお問合せください。
