GTMのdocument.activeElementは使わない｜クリック要素取得の正しい方法と運用ルール設計｜未経験から100日後にGTMのプロになる話【Day 42】

基本操作に慣れてきたら、次はチームで安全に運用するための応用スキルです。今日はカスタムJavaScriptの落とし穴と、運用ルールの設計を扱います。

クリックされた要素の取得に「document.activeElement」を使わない

クリックされたボタンのテキストを取得するカスタムJavaScript変数として、次のようなコードを見かけることがあります。

function() {
  var clickedElement = document.activeElement;
  return clickedElement ? clickedElement.innerText : 'Unknown';
}

これは動くこともありますが、信頼性に欠けます。document.activeElementは「現在フォーカスされている要素」を返すものであり、「直前にクリックされた要素」とは必ずしも一致しません。<button>のようにフォーカス可能な要素なら偶然一致することが多いですが、tabindexのない<div>や<span>をクリックした場合はフォーカスが移動せず、document.activeElementはbodyのままだったりして、期待した値が取れません。

クリックされた要素の情報を取りたいなら、Day8・9で扱った組み込み変数の「Click Element」「Click Text」「Click Classes」をそのまま使うのが正解です。これらはGTMがクリックトリガーの発火時に、実際にクリックされた要素を正確に渡してくれる仕組みで、独自にJavaScriptを書いて再発明する必要はありません。カスタムJavaScript変数は、組み込み変数でどうしても取れない情報がある場合の最終手段と考えてください。

データハブ化の実装はDay35のルールに従う

GTMを起点にBigQueryやCRM、スプレッドシートと連携する話はDay35で詳しく扱いました。結論だけ再掲すると、ブラウザ側のカスタムHTMLタグから認証情報付きで直接外部APIを叩くのは避け、サーバーサイドGTMかバックエンド間連携に任せるのが正しい設計です。「GTMをデータハブにする」というコンセプト自体は有効ですが、実装の入口を間違えると、Day35で指摘したセキュリティリスクをそのまま抱え込むことになります。

運用ルールは「命名規則」と「定期棚卸し」の2本柱

チームでGTMを扱う場合、タグ・トリガー・変数の命名規則を統一しておくと、後から見返したときの可読性が大きく変わります。「種類 - 対象 - 補足」のような型（例：「GA4 - イベント - CTAクリック_問い合わせページ」）を決め、チーム全員が守ることを最初に取り決めてください。

もう1つ重要なのが、定期的な棚卸しです。キャンペーンが終了した広告タグ、廃止したツールのピクセルなど、「もう使っていないタグ」は放置されがちです。Day25でも触れたとおり、不要なタグの蓄積はコンテナの見通しを悪くするだけでなく、ページの読み込み負荷にもつながります。四半期に1度など、タイミングを決めてコンテナ内のタグを棚卸しする運用を組み込んでおくと、後々の負債化を防げます。

今日のまとめ

クリック情報の取得は組み込み変数に任せ、独自JavaScriptは最終手段にとどめること。データ連携はDay35のセキュリティ原則を守ること。そして命名規則と定期棚卸しで、GTMコンテナを「誰が見ても分かる」状態に保つこと。次回は、GTMを活用した高度なデータ分析手法を扱います。