みなさん、Google タグマネージャを使っていますか？
一度Google タグマネージャ（以下GTM）のタグを設置しておけば、GTMの管理画面でスクリプトのロード・色々な設定や、テストができるので便利に使えますよね。
余談ですけど、Googleタグマネージャーではなく、Google タグマネージャですよ。Googleとタグマネージャの間は空ける、そして、最後の音は伸ばさない。ここ、表記の注意ポイントです。
その便利なGTMですが、基本的にはタグとトリガーの組み合わせで動作させます。
タグは動作させるスクリプトなどを入れ、トリガーはそのタグが動作（発火）するための条件を表します。
このトリガーの中に「要素の表示」というものがあります。
「要素の表示」はその名のとおり、特定の要素が表示されたときに動作するトリガーになります。
使い所としては、例えば、記事の最後に付ける「次のページを読む」のナビゲーションの表示されたかどうかで、そのページの記事が最後まで読まれたかどうかを判定したり、特定の「広告バナー」が表示されたかどうかを判定して、広告の表示効果などを判定したりと色々な利用ができます。
便利そうですよね！
その「要素の表示」ですが、うまく動かない場合があります。今回、私が数日間悩んだ（悩みすぎ）結果、解決したので、原因と解決方法を紹介します。
トリガー「要素の表示」が動作しなかった例
トリガー「要素の表示」が動作しなかったものは実はこのブログのコメント欄です。コメント欄の表示には、多くのサイトで使用されている「Disqus」を使用しています。
コメント欄のHTMLは以下のようになっていました。
<section class="my-5">
<h3>リアクションやコメントをどうぞ</h3>
<div id="disqus_thread"></div>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</section>
Disqusのスクリプトで <div id="disqus_thread"></div> の部分にコメント欄が読み込まれる仕組みになっています。空の要素の部分に何かするというのはよくあるやり方ですね。
id="disqus_thread" とあるので、GTMで簡単に指定できますね！…と以下のような設定になるかと思います。
CSSのセレクターがわかる人なら誰でも設定できる何も問題ない設定です。要素がID指定しているので「#」に続けてIDの値を書くだけ。簡単ですよね。classなら「.」に続けてclassの値を書くだけです。（「視認の最小割合」は何％要素が見えたら動作するか、というものなので、少しでも見えたらということで「1」（＝1％）にしてあります）
この設定をして、コメント欄のHTMLが見えるところまでスクロールしても、トリガーが動作（発火）しません…。なぜだ…。
設定の中にある「視認の最小割合」の設定を色々変えて試してみたのですが、改善されず…。
トリガー「要素の表示」が動作しない原因はアタリ判定の有り無し
設定に関して色々調べていてわかったことはGTMの設定の問題ではなく、トリガー対象要素の表示のされ方が原因でした。
アユダンテさんのGTMの設定に関するページではトリガー「要素の表示」に対して、以下の注意点を掲載しています。※強調は筆者によるもの
Googleタグマネージャへ新たに「スクロール距離」トリガーと「要素の表示」トリガーが登場
- 1画面に収まらない巨大なブロックを指定する場合、視認の最小割合の指定に注意
（100％などにすると、大きさ的に1画面内に収まらないので発火しなくなる）- 「各要素が画面に表示されるたび」を指定していても、表示中にスクロールしただけでは反応しないので大丈夫
（一度画面外に外れてまた表示した場合に反応する）- 初期表示画面内などで複数の対象が一度に表示された場合でも、問題なく動作する
（要素数分、個別にイベントが発生する）- CSSで対象要素の上に別の要素がかぶさっていて実際には見えない場合でも、トリガーは反応する
- CSSで非表示や画面外飛ばしなどをしていると、トリガーは反応しない
- IDで指定した場合、HTML内に同一IDが複数存在した場合（本来はHTML的にNG）は最初のIDの要素のみに反応する
- 要素の表示トリガーが存在すると、そのトリガーにタグが何も紐づいていなくても、プレビューなどで見ると全ページでイベントが発生する
強調した部分「CSSで非表示や画面外飛ばしなどをしていると、トリガーは反応しない」が今回の問題に該当するしているようでした。
今回のコメント欄の<div id="disqus_thread"></div>の部分にCSSを設定していない状態で、非表示にはしてはいませんでした。
しかし、GTM的には要素の高さが「0」なので非表示と同じ扱いで要素のアタリ判定がない、ということのようです。(ﾟДﾟ;)ｴｰ
解決策：要素に高さを付ける
以上のことから、つまり <div id="disqus_thread"></div> の部分の高さがあれば良いということです。
例えば、以下のようにHTMLを変更し、要素の中にローディング用のアイコンを入れ、高さを発生させることでトリガー「要素の表示」が発動できました。
<div id="disqus_thread"><div class="text-center text-muted"><i class="fas fa-circle-notch fa-spin fa-3x"></i></div></div>
もしくは、コメントのsectionの方にID「comment」を指定して、GTMの「要素の表示」の対象要素を「#comment」とすることでも対応できました。
これはsectionの中にある「h3」タグが既に高さがあり、要素のアタリ判定があるからです。
<section id="comment" class="my-5">
<h3>リアクションやコメントをどうぞ</h3>
<div id="disqus_thread"></div>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</section>
結論としては、「要素の表示」の対象となる要素には高さがあることが重要ということですね。
わかってしまえばたいしたことはありませんでしたね…(｡･ω･｡;)
それではよいGoogle タグマネージャライフを。