GTMで任意のリンクをクリックしてｎ秒後トリガーを動作させる方法

こんにちは、エクスチュアの岩川です。

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を利用して発火させようと思いますので