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

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

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

  2. Google Tag Manager

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

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

  3. Google Analytics

    Google Analytics StandardのデータをBigQueryで分析するための力技

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

  4. Google Analytics

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

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

  5. Google Analytics

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

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

  6. Google Tag Manager

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

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

最近の記事

  1. 【UAとは違う!?】GA4で変更された”イベント…
  2. 【DBエンジニアが語るSnowflake】②このロールがすご…
  3. LookerStudioを知る。
  4. Google Analytics4 を知る。
  5. 過去取れていたリファラ情報が上手く取れなくなっている問題
  1. Amazon Web Services

    【初心者向け】AWSを学ぶ前に確認したい用語
  2. KARTE

    CXツール「KARTE」ってどんなツール?主な機能や魅力をざっくり紹介!
  3. ヒートマップ

    ムーブメント・ヒートマップ
  4. IT用語集

    コンソール(Console)って何?
  5. GA 360 Suite

    Google Analytics 360: BigQueryを使ってアトリビュー…
PAGE TOP