前回までで、GTM（Googleタグマネージャー）を使ってWordPressで作成したWebサイトに HTML / CSS / JavaScript を後付けすることに成功しました。
前回の記事
【GTM】WordPressにGTMを導入して機能追加してみた(2)
前回、実際にGTMでアカウントとコンテナを作り、簡単な機能（WordPressで作成したWebサイトの特定ページにアラートを出す）を追加してみました。そこで本記事では、より…
本記事では、GTMについてもう少し理解を深めるべく、「タグ」「トリガー」「変数」の3つについて深堀していこうと思います。
GTMの仕組み
- タグ：命令（実際にやりたい処理）
- トリガー：スイッチ（いつ／どこで命令を実行するか）
- 変数：センサー（条件判断に使う情報）
目次
タグとは？
実際に動いてくれる本体のこと。例えば、
- HTMLを追加して要素を増やす
- CSSを追加してデザインを変更する
- JavaScriptを追加して機能を追加・修正する
- Googleアナリティクスを動かす
こういう「命令文」は全部タグの中に書きます。
導入したい命令に合わせてタグタイプを選びます。
いくつか用意されていて迷いますが、
- HTML / CSS / JavaScript の機能追加 →「カスタムHTML」
- GA4（Google Analytics 4）によるアクセス解析 → 「Google アナリティクス」
基本的にはこの2つを使うことが多いと思います。
トリガーとは？
作成したタグを、「いつ」「どこで」「どのタイミングで」動かすか？
これを決めるのが トリガー（スイッチ）です。
タグを作成するときにトリガーも合わせて登録し、タグの発動タイミングを決められます。
タグタイプと同じくトリガータイプも複数用意されていますが、
よく使われるトリガータイプとしては、
- ページビューの「DOM Ready」 → DOMが読み込まれた瞬間
- ページビューの「ウィンドウの読み込み」 → 画像や動画も全部読み込んだ後
あたりでしょうか。
さらに、これらを選んだあとにより細かい条件を設定できます。
- {{Page Hostname}} → ドメイン名のみを参照
- {{Page Path}} → ドメインの後ろのパス部分のみを参照
- {{Page URL}} → クエリパラメータを含むURL全体を参照
- {{Referrer}} → 訪問前のページのURLを参照
変数とは？
前回までの記事では、GTM側でデフォルトで用意されている組み込み変数（ビルトイン変数）を使用したため、メニューの「変数」を触ることはありませんでした。
こちらでは、デフォルトではないオリジナルの変数を作ったり、組み込み変数のオンオフを切り替えたりできます。
作れる変数としては、
- 固定の文字列や数値：定数（Constant）
"hello"や"https://mycdn.com/script.js"
- URL から一部だけ抽出（URL 変数）
- ?id=123 → 123 を取り出す
- DOM 要素を読み取る（DOM Element）
- ページ内の特定要素のテキストを拾う
このように、「具体的な判断材料を作りたいとき」に変数を使用します。
GTMのまとめ
- タグ（命令）を、
- トリガー（スイッチ）が押されたときに、
- 変数（データ）を使って条件判定して発火させる
さらに短く纏めると・・・
- タグ ＝ 命令
- トリガー ＝ スイッチ
- 変数 ＝ センサー
こんなイメージ。
あとは実践で慣れていきましょう！