Google Tag Manager

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

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

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');

のように組み合わせることも可能です。

セレクタを使用してn秒後に発火させるようにする

いよいよ本題に入ります。

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ですので

このようなトリガーになります。これをn秒後に発火させたいタグに設定しましょう。

以上で設定完了となります。


いかがでしたでしょうか?

セレクタを利用するときはそのページ上のコードがどのように記述されているかを理解する必要があるので少し難しいかもしれませんが慣れると細かい指定ができるようになります。

エクスチュアでは様々な企業様の基本的な悩みから高度な悩みまで丁寧にお手伝いいたします。

是非お気軽にお問合せください。

ピックアップ記事

  1. 最速で理解したい人のためのIT用語集

関連記事

  1. Google Cloud Platform

    Server-side GTM を Google AppEngine にデプロイする

    こんにちは、エクスチュアの権泳東(權泳東/コン・ヨンドン)です。…

  2. Google Analytics

    Google Tag Manager上でGoogle AnalyticsのclientIDを取得する…

    この情報は2018年4月当時の情報です。こんにちは、エクスチュ…

  3. Google Tag Manager

    同一サイトにGTMを複数導入する危険性について

    こんにちは。エクスチュアの岩川です。今回は何度か質問をいただ…

  4. Google Tag Manager

    サーバーサイドGTM: ウェブコンテナを使って1stパーティドメインからgtm.jsを配信してみた

    こんにちは、エクスチュアの權泳東(権泳東/コン・ヨンドン)です。…

  5. Adobe Analytics

    GTMのdataLayerをAdobeAnalyticsの「s」オブジェクトにコピーする

    こんにちは、エクスチュアの權泳東(コン・ヨンドン)です。Ado…

  6. Adobe Analytics

    AdobeAnalytics: GTMのdataLayerをAdobeAnalyticsの処理ルール…

    こんにちは、エクスチュアの權泳東(権泳東/コン・ヨンドン)です。…

最近の記事

  1. 忘年会シーズンに「DCRごっこ」のご提案
  2. タグ監査ツールとは? 〜〜出来ることと導入のメリット〜〜
  3. 実はSEO以上の効果がある!?Webサイトの「監査」とは?
  4. Vertex AIのベクトル検索によってブログの検索エンジン…
  5. Google Cloud iPaaS 「Applicatio…
  1. IT用語集

    サブルーチン(Sub Routine)・メインルーチン(Main Routine…
  2. IT用語集

    検索エンジン(Search Engine)って何?
  3. ブログ

    夏休みのまとめ
  4. Adobe Analytics

    【実験してみた】CNAMEを使わずにAdobeAnalyticsを1stパーティ…
  5. Office365

    エクセルで「テーブル」を使うメリット① 「BIツールで使いやすい」
PAGE TOP