GTM(Google Tag Manager / Google タグマネージャ)によりWebページ内で「何か」がクリックされたことを検知するためには、4通りの方法があります。
なお、GAのWebStreamタグ、各種のヒートマップタグのように、ツールによってはトリガーの設定が不要な場合もあります。
1. クリック - リンクのみトリガー
最も一般的に利用されるのがリンクのみトリガーです。ページ遷移を伴うクリックの検知に向いています。データレイヤー上でのイベント名は"gtm.linkClick"となり、プレビューモードでは"Link Click"と表示されます。
このトリガーはGTM読み込み時に有効であった場合、aとareaのDOM要素にイベントリスナーを追加し、クリックした際にデータレイヤーに詳細を通知します。
a、areaへのクリックが発生した場合はページ遷移を伴うことがあるため、タグの配信を待つオプションがあります。ユーザーにページの切り替えが遅いと感じさせてしまい離脱の可能性が高まることと、要素に紐づく他のJavascriptイベントリスナーと競合する可能性があるため、リンクのトリガーが発生するページのみに絞ってONにすることが望ましいでしょう。
妥当性をチェックオプションは、ページ遷移を伴わない場合はトリガーを無効にしたい場合に用います。こちらについてもページ遷移に関わるJavascriptイベントリスナーと競合する可能性があるため、リンクのトリガーが発生するページのみに絞ってONにすることが望ましいでしょう。
このトリガーを有効にしているにも関わらず、リンクのクリック時にイベントが有効にならない場合についてはこちらの記事で解説しています。
クリックトリガーで「すべての要素」は反応するのに「リンクのみ」が反応しない時の対処法 - アクセス解析担当者がGTMについて語るブログ
2. クリック - すべての要素
こちらのトリガーはページ遷移を伴わないクリックを検知する際に有効です。データレイヤー上でのイベント名は"gtm.click"となり、プレビューモードでは"Click"と表示されます。
例えばページ遷移を伴わないbutton要素のクリック数、a要素を使わないモーダルのクリック数を取得したい場合等に有効でしょう。
注意点として、gtm.elementの要素がクリックした要素のうち最下層の要素となります。よって、取得したいエリアの一部に別の要素が含まれる場合は、トリガーの条件を考える必要があります。CSSセレクタの全称セレクタ(*)等を活用しましょう。
3. フォームの送信
フォーム送信については送信のクリックではなくこちらのトリガーを使うとよいでしょう。データレイヤー上のイベント名は"gtm.formSubmit"、プレビューモードでは"Form Submit"と表示されます。
クリックの時点ではなく、遷移先ページの閲覧で取得することも検討すべきですが、フォームの遷移先にGTMを設置できない場合に有用でしょう。
gtm.elementの値はフォームそれ自体を指し、クリックした送信ボタンではありません。
このトリガーを設定し、かつページ内にFacebook Pixelを設置していると、Facebook Pixelのデータ送信タイミングが取得できるようになります。現状回避方法はありません。
4. カスタムイベント
上記の方法ではどうしても取得できない場合、カスタムイベントを利用することができます。設置方法は、イベントが発生したタイミングで以下のJavascriptスニペットを実行するように設定します。
dataLayer.push({'event': 'カスタムイベント名'});
カスタムイベント名部分は可変です。GTMプレビューモードではその名前で表示されます。カスタムイベントを使用しなければならない場合は、Javascriptの挙動が複雑になっている可能性がありますので、検証は十分に行ってください。
