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 Tag Manager

    Google Tag Manager: 離脱リンクのクリックをトリガーにする

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

  2. Google Tag Manager

    GTMでiframe内のクリックイベントを取得したい

    こんにちは。エクスチュアの岩川です。GTMでクリックイベント…

  3. Google Analytics

    Cloud FunctionsとOpenWeather APIを使ってGoogle Analytic…

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

  4. Google Tag Manager

    GTMで複数のコンテナに同じ実装をしたい

    こんにちは。エクスチュアの岩川です。GTMで複数のコンテナに…

  5. Adobe Analytics

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

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

  6. Google Tag Manager

    GTMの検証でプレビューのSummaryを上手く使う

    こんにちは、エクスチュアの岩川です。GTMを使用してタグを実…

最近の記事

  1. GASを利用してWebスクレイピングをやってみよう
  2. Adobe Analyticsを知る。
  3. Cookieを数える -アメリカ、イギリス、オーストラリアの…
  4. Google App Scriptを特定のタイミングで自動で…
  5. Google App ScriptとGoogleスプレッドシ…
  1. Adobe Analytics

    入口とは-Adobe Analyticsの指標説明
  2. Qualtrics

    イベントレポート Qualtrics XM on tour TOKYO 2022…
  3. プログラミング

    Node.jsでCSVファイル内のダブルクオートで囲まれたカラム内のカンマを除去…
  4. Mouseflow

    Mouseflow:検索の仕様
  5. Adobe Analytics

    ページの深さとは-Adobe Analyticsの指標説明
PAGE TOP