背景と要件

キャンペーンサイトの制作にて、リアル店舗で利用できるクーポン情報をモーダルで実装。
モーダル内の要素としては、以下のような情報を記載。

店舗別にどれだけモーダル（クーポン情報）が表示されたか計測が必要。

対応方針

過去の経験上、モーダル表示のトリガーとなるボタンのクリック数を計測すれば、イコール表示回数になるでしょ！ってことで、いつも通りクリックイベントを仕掛けつつ、モーダル内の店舗名を取得できるようにカスタムJavaScriptで変数設定を追加。
あとは、プレビューでタグの発火が確認できれば完了！と思ってテストしてみたところで、予想していなかった問題が発生、、！

クリックイベントが使えない！

今回は、モーダル表示のトリガーとなる要素がカルーセル内に実装されているため、モーダルを開く動作以外にも、横スクロール時のクリック（タップ）でクリックイベントが発生してしまうという事態に、、、

よく考えれば、事前に分かりそうなものだが、クリックイベントでイケるだろうと高を括っていたのが良くなかった。
もう頭の中は「クリックイベント」という考えしかなく、どうすればモーダル表示のクリックだけ取得できるか試行錯誤、、、
JavaScriptのclickとかtouchとかmousemoveとかのイベントを駆使して、「一定時間以上イベントが継続したら発火させない」みたいなロジックをコネコネしてみましたが当然安定せず。。。
（人によってフリックする動作の時間なんて違うでしょっていうのは冷静になればわかる）
公開日に追われつつ途方に暮れかけたとき、今回の要件にうってつけのトリガーを発見！

要素の表示トリガーで解決！

モーダルの表示回数を計測するために存在するような「要素の表示」というトリガーを発見！
今までなぜ知らなかったのかと思うくらいとても便利な機能ですが、設定自体はとても簡単。

要素の表示トリガー
Google タグマネージャーの要素の表示トリガーは、選択した要素がウェブブラウザのビューポートに表示されると発動します。要素を表示させるイベントには、ページの読み込み、ページのスクロール、ブラウザタブのフォアグラウンドへの移動、要素の位置や表示に影響を与える自動タスクなどがあります。

参考：https://support.google.com/tagmanager/answer/7679410?hl=ja

要素（モーダル）の表示トリガーの設定内容

トリガーのタイプ：要素の表示
選択方法：ID（CSSセレクタでも可）
要素ID：モーダル内のID名を設定
このトリガーを起動するタイミング：各要素が画面に表示されるたび
DOMの変更をモニタリング：チェック
このトリガーの発生場所：すべての表示イベント（条件によってよしなに設定）

親要素のIDではイベントが発火しない可能性あり
要素IDにはモーダルの親要素のIDを設定したくなるが、今回それでは動かなかったので子要素のIDを設定。
プレビューでの検証時に発火しなくて一瞬焦るが、設定するIDやclass名を変更して再度テストすれば問題なく動くはず。

最後に

GTMの設定などは後回しにしがちなので、事前にある程度チェックしておくことが大事だなと反省。経験則に頼って予想で動くと痛い目をみるなと。。。
とはいえ、やはりGoogleさんはすごいですよね。痒いところに手が（届かない時もありますが）届くような機能はだいたい存在します。

アルビド・ジャパン株式会社では、各種ツールの計測設定やマンスリーレポートの作成なども承っておりますので、お気軽にご相談くださいませ！