GTMのトリガーと変数:組み込み変数とデータレイヤーの使い分け

公開 更新 書いた人 大林 諒

Googleタグマネージャー(GTM)の画面は「タグ」「トリガー」「変数」の3つでできています。タグは「何を送るか」、トリガーは「いつ送るか」、変数は「そのとき何の値を使うか」です。この3つの役割と、組み込み変数で済む場面とデータレイヤーを使うべき場面の線引きが分かれば、ボタンのクリックやフォーム送信の計測を自分で組めて、あとから見た人にも意図が伝わるコンテナになります。前提として、GTMのコンテナがサイトに入っていて、Googleアナリティクス4(GA4)のGoogleタグが1つ置かれている状態から始めます。画面の名前と仕様は2026年10月時点のタグ マネージャー ヘルプで確かめたものです。

例は、スタッフ6名ほどの予約制の料理教室「サンプル料理教室」のサイト sample-cooking.example(WordPress)です。体験レッスン申込フォームとサンクスページ /thanks/、電話番号のボタン、LINE公式アカウントの友だち追加ボタン、Instagramへのリンクがあり、通常レッスンの予約は外部の reserve.example で受けています。

この記事の内容
  1. 先に決めること
  2. 一覧の表
  3. 手順
  4. 応用
  5. できないことと、その代わり
  6. よく詰まるところ
  7. 次にやること

先に決めること

トリガーと変数を作り始める前に、次の4つを決めておきます。ここを曖昧にしたまま作ると、半年後に同じ意味のトリガーが3つ並び、どれを消してよいか誰も分からなくなります。

  • 何をキーイベント(旧コンバージョン)にするか。サンプル料理教室では「体験申込完了」「電話タップ」「LINE追加」の3つに絞ります。Instagramへのリンクや予約システムへの移動は、数えはしてもキーイベントにはしません
  • 値をどこから取るか。画面に出ている情報(リンク先URL、ボタンの文字、ページのURL)で足りるなら組み込み変数で取ります。画面に出ない情報(どのレッスンへの申込か、フォームが本当に送れたか)はサイト側からデータレイヤーで渡してもらいます
  • サイトのコードを誰が触るか。サンプル料理教室のテーマは外部の制作会社が作っていて、テーマの直しは制作会社に頼みます。データレイヤーを使う計測は制作会社への依頼が要るので、頼む内容(イベント名とキー名)をこちらで決めて渡します
  • 名前の付け方。タグ・トリガー・変数の名前の型を最初に決めます。型は後半の「命名のルールとフォルダ」で書きます

判断の目安は単純です。組み込み変数とクリック・ページビューのトリガーで取れるものは、まずそれで取ります。画面の見た目が変わると壊れる計測や、送信の成否のようにブラウザの表面からは分からない情報だけをデータレイヤーに回します。データレイヤーは確実ですが、サイトの修正が要る分だけ手間と待ち時間がかかります。

一覧の表

トリガーの種類と使う場面

タグ マネージャー ヘルプの「トリガーの種類」に載っているもののうち、ウェブサイトで使う主なものです。

分類トリガー動くときサンプル料理教室での使い道
ページビュー系同意の初期化ほかのすべてのトリガーより前同意管理ツールのタグ、同意のデフォルト値を設定するタグだけ
ページビュー系初期化同意の初期化の次に早いGA4のGoogleタグ(ほかより先に読み込みたいもの)
ページビュー系ページビューページの読み込みが始まった直後サンクスページ /thanks/ の表示で申込を数える
ページビュー系DOM ReadyHTMLを読み終わり、ページの要素を読める状態になった後ページ内の文字や要素の値を変数で読むタグ
ページビュー系ウィンドウの読み込み画像やスクリプトまで全部読み込んだ後読み込みが遅くてもよい広告系のタグ
クリックすべての要素ボタン・画像など何かがクリックされたときリンクではないボタン(button 要素)のクリック
クリックリンクのみ<a> のリンクがクリックされたとき電話(tel:)、LINE追加、Instagram、予約システムへのリンク
フォームの送信フォームの送信フォームの送信イベントが起きたとき送信後にページが変わらないフォーム(使えないことも多い)
スクロール距離縦方向・横方向指定した割合かピクセルまで初めて下がったとき料金ページを最後まで読んだかを見たいとき
要素の表示要素の表示指定した要素が画面に入ったとき送信後に同じページに出る「送信しました」の表示
タイマータイマー指定した間隔ごとほぼ使わない(GA4のエンゲージメントで足りる)
その他カスタム イベントデータレイヤーに指定の event が入ったとき制作会社に入れてもらった「申込完了」の合図
その他履歴の変更URLのハッシュが変わったか、pushStateが使われたときページを読み直さずに画面が切り替わるサイトだけ

このほかに YouTube 動画トリガーと JavaScript エラートリガーもあります。動画はGA4の拡張計測機能でも取れるので、まずはそちらで足ります。

変数の種類

種類何が入るか使う場面
組み込み変数Page URL、Click URL、Click Text、Form ID などGTMが用意している値クリックやページの条件。最初にこれで足りるかを見る
データレイヤー変数dataLayer.push() で渡された値画面に出ない値(レッスンの種類、申込の成否)
定数決まった文字列複数のタグで使う同じID
JavaScript 変数ページにあるグローバル変数の値ページのソースにすでにある値を読む
カスタム JavaScript関数が返した値取り出した値を加工する(小文字にそろえる、近くの要素を探す)
ルックアップ テーブル別の変数の値に応じて決めた値URLからページの種類名に置き換える
正規表現の表正規表現で一致した行の値ルックアップ テーブルでは行が多くなりすぎるとき

手順

組み込み変数を有効にする

組み込み変数は最初から全部使えるわけではなく、使うものを有効にします。

  1. 左のメニューで「変数」を開きます。
  2. 「組み込み変数」の「設定」を押します。
  3. 「クリック」の Click Element、Click Classes、Click ID、Click URL、Click Text にチェックを入れます。
  4. 「フォーム」の Form ID、Form URL にもチェックを入れます。
  5. 「スクロール」の Scroll Depth Threshold を、スクロールを測るときだけ有効にします。
変数の「組み込み変数」の設定パネルで、「クリック」の5つにチェックを入れたところ
変数の「組み込み変数」の設定パネルで、「クリック」の5つにチェックを入れたところ

トリガーの条件を作る画面で「組み込み変数を選択します」から選んでも、その場で有効になります。

組み込み変数とクリックトリガーで電話タップを取る

電話番号のボタンは <a href="tel:03-0000-0000"> のようなリンクです。リンク先が tel: で始まるので、Click URL だけで見分けられます。

  1. 左のメニューで「トリガー」を開き、「新規」を押します。
  2. 「トリガーの設定」を押し、「クリック – リンクのみ」を選びます。
  3. 「このトリガーの発生場所」で「一部のリンククリック」を選びます。
  4. 条件を Click URL 先頭が一致 tel: にします。
  5. 名前を クリック - 電話リンク にして保存します。
トリガーの設定で「クリック - リンクのみ」、条件が Click URL 先頭が一致 tel: になっているところ
トリガーの設定で「クリック – リンクのみ」、条件が Click URL 先頭が一致 tel: になっているところ

このトリガーに、GA4のイベントタグ(タグの種類は「Google アナリティクス: GA4 イベント」、イベント名は tel_tap)をつなぎます。「タグの配信を待つ」と「妥当性をチェック」は、リンクのみとフォームの送信のトリガーに出る設定です。電話リンクではページが移動しないので、どちらもオフのままで困りません。

ボタンの位置を分けたいとき(ヘッダーの電話ボタンか、料金ページ下の電話ボタンか)は、Click Text やクリックされた要素の場所を変数で取り、イベントパラメータに入れます。ここから先は「GTMでボタンのクリックを計測する:電話・LINE追加・資料請求」で詳しく書いています。

データレイヤーの仕組み

データレイヤーは、ページからGTMへ値を渡すための入れ物です。中身は dataLayer という名前の配列で、サイト側が dataLayer.push() で値を入れると、GTMが入った順に1件ずつ読み取ります。event というキーを入れると、それがGTMにとっての「出来事」になり、カスタム イベント トリガーで受け取れます。

決まりは次のとおりです。

  • 初期化は window.dataLayer = window.dataLayer || []; と書き、GTMのコンテナ スニペットより前に置きます
  • dataLayer = [ ... ] と直接代入すると、それまでに入っていた値が消えます。値を足すときは必ず push() を使います
  • dataLayer は大文字と小文字を区別します。datalayer と書くと動きません
  • push() の中のキー名は引用符で囲みます
  • 同じ名前のキーをもう一度入れると、前の値は上書きされます
  • 値はそのページの中でしか残りません。次のページでも使う値は、ページごとにまた入れます

ページの種類のように、表示した時点で決まっている値は、コンテナ スニペットの前で入れておきます。

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  'page_category': 'lesson',
  'lesson_type': 'bread'
});
</script>
<!-- この下にGTMのコンテナ スニペット(GTM-XXXXXXX) -->

申込が完了した瞬間のように、ページを開いたあとで起きる出来事は、event を付けて入れます。サンプル料理教室では、体験レッスンのフォームが送信に成功したときに、制作会社に次の1行を入れてもらいます。

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  'event': 'trial_submit',
  'form_name': 'trial_lesson',
  'lesson_type': 'bread'
});
</script>

制作会社への依頼では、イベント名 trial_submit、キー名 form_name と lesson_type、値の候補(bread、japanese、sweets など)、入れるタイミング(送信に成功したとき。入力エラーのときは入れない)を文書で渡します。キー名の大文字・小文字やつづりがずれると受け取れないので、口頭で伝えないことです。

プレビューモードで、左の一覧に trial_submit が並び、データレイヤーの中身に form_name と lesson_type が見えているところ
プレビューモードで、左の一覧に trial_submit が並び、データレイヤーの中身に form_name と lesson_type が見えているところ

データレイヤー変数を作る

push() で入った値は、データレイヤー変数を作って初めてタグやトリガーで使えます。

  1. 左のメニューで「変数」を開きます。
  2. 「ユーザー定義変数」の「新規」を押します。
  3. 「変数の設定」を押し、「データレイヤーの変数」を選びます。
  4. 「データレイヤーの変数名」に lesson_type と入れます(push() のキー名と完全に同じにする)。
  5. 「データレイヤーのバージョン」は「バージョン 2」のままにします。
  6. 名前を DLV - lesson_type にして保存します。
  7. 同じように DLV - form_name も作ります。
データレイヤーの変数の設定で、変数名に lesson_type、バージョン 2 が選ばれているところ
データレイヤーの変数の設定で、変数名に lesson_type、バージョン 2 が選ばれているところ

バージョン 2 では、キー名のドットを入れ子として読みます。{'lesson': {'type': 'bread'}} と入れた値は、変数名を lesson.type にすると取り出せます。バージョン 1 はドットを含んだ1つのキー名として扱うので、特別な理由がなければバージョン 2 で困りません。

カスタム イベントのトリガーで受け取る

  1. 左のメニューで「トリガー」を開き、「新規」を押します。
  2. 「トリガーの設定」を押し、「カスタム イベント」を選びます。
  3. 「イベント名」に trial_submit と入れます。
  4. 「このトリガーの発生場所」は「すべてのカスタム イベント」のままにします。
  5. 名前を CE - trial_submit にして保存します。
  6. 「タグ」で「新規」を押し、タグの種類「Google アナリティクス: GA4 イベント」を選びます。
  7. 測定IDに G-XXXXXXXXXX、イベント名に generate_lead を入れます。
  8. イベントパラメータに、パラメータ名 form_name・値 {{DLV - form_name}}、パラメータ名 lesson_type・値 {{DLV - lesson_type}} を足します。
  9. トリガーに CE - trial_submit を選び、名前を GA4 - イベント - 体験申込完了 にして保存します。
カスタム イベントのトリガーで、イベント名に trial_submit が入っているところ
カスタム イベントのトリガーで、イベント名に trial_submit が入っているところ
GA4 イベントタグのイベントパラメータに、DLV - form_name と DLV - lesson_type が入っているところ
GA4 イベントタグのイベントパラメータに、DLV – form_name と DLV – lesson_type が入っているところ

「正規表現一致を使用」にチェックを入れると、イベント名を正規表現で書けます。^(trial_submit|contact_submit)$ のように、受けたいものを全部書き出して使います。.* と書くと、GTMやGoogleタグが自動で出すイベントにも全部反応するので使いません。

GA4のレポートでパラメータの値(パンかお菓子か)を見るには、GA4側でカスタム ディメンションに登録します。「管理」→「データの表示」→「カスタム定義」から、範囲を「イベント」、イベント パラメータを lesson_type にして作ります。レポートやデータポータル(Looker Studio)で使えるようになるまで24〜48時間かかります。

条件の書き方(含む・一致・正規表現)

トリガーの条件は「変数」「演算子」「値」の3つでできています。条件を複数並べると、全部を満たしたときだけ動きます(「または」にはなりません)。

演算子意味例注意
等しい完全に同じPage Path 等しい /thanks/末尾の / の有無で外れる
含む一部に含むClick URL 含む reserve.example思わぬURLも拾う
先頭が一致先頭が同じClick URL 先頭が一致 tel:電話・メールのリンク向き
末尾が一致末尾が同じClick URL 末尾が一致 .pdfクエリ付きURLで外れる
正規表現に一致パターンに合うPage Path 正規表現に一致 ^/thanks/?$部分一致なので ^ と $ で囲む
CSS セレクタに一致する要素がセレクタに合うClick Element CSS セレクタに一致する .line-btn, .line-btn *中の画像や文字がクリックされることがある
小さい・大きい数値の比較Scroll Depth Threshold 大きい 50数値の変数にだけ使う

それぞれに「含まない」「等しくない」のような否定の形と、正規表現には大文字と小文字を区別しない形があります。演算子の名前の細かい表記(「CSS セレクタに一致する」「含まない」「等しくない」など)はヘルプに書かれていないので、画面の一覧で確かめてください。

正規表現は部分一致で動きます。ヘルプの例では /pro/ が products、promotions、processes のどれにも一致します。サンクスページを thanks だけで書くと、ブログの「thanks-giving-cake」のような記事にも当たります。ページのパスは ^/thanks/?$ のように先頭と末尾まで書きます。. は「何でも1文字」の意味なので、ドメインを書くときは reserve\.example と前に \ を付けます。

LINE追加ボタンが複数あり、友だち追加のURLが2種類あるときは、1つのトリガーで Click URL 正規表現に一致 ^https://(lin\.ee|line\.me)/ のように書くと、トリガーを2つ作らずに済みます。

例外(ブロック)を付ける

タグの設定のトリガー欄は「配信トリガー」と「例外」の2つに分かれています。例外に入れたトリガー(ヘルプでは除外トリガー、ブロックトリガーとも呼びます)は配信トリガーより強く、両方が当てはまるとタグは出ません。

サンプル料理教室では、Meta広告のピクセルを全ページで出しつつ、制作会社が確認用に使うテストページ /test/ では出したくない、という場面で使います。

  1. 「トリガー」で「新規」を押し、「ページビュー」を選びます。
  2. 「一部のページビュー」を選び、Page Path 先頭が一致 /test/ にします。
  3. 名前を 除外 - テストページ にして保存します。
  4. 「タグ」で対象のタグを開き、「トリガー」を押します。
  5. 「例外」欄の右の「+」を押し、除外 - テストページ を選んで保存します。
タグのトリガー欄で、配信トリガーに All Pages、例外に「除外 - テストページ」が入っているところ
タグのトリガー欄で、配信トリガーに All Pages、例外に「除外 – テストページ」が入っているところ

実際に運用していると、例外が効かないという相談のほとんどは、トリガーの種類のずれです。配信トリガーがクリックで、例外のトリガーがページビューだと、クリックの瞬間に例外の条件が判定されず、タグはそのまま出ます。例外のトリガーは配信トリガーと同じ種類で作ります。どの種類で作ればよいか迷うときは、例外にせず、配信トリガーの条件に Page Path 先頭が一致しない /test/ を足すほうが確実です。

命名のルールとフォルダで整理する

タグ マネージャー ヘルプは「アイテムタイプ – アプリ名 – 詳細」の形の名前を勧めています。小さな会社のサイトはコンテナが1つなので、アプリ名の部分は省いて、種類と中身で付けます。

対象名前の型サンプル料理教室の例
タグツール – 種類 – 中身GA4 - イベント - 体験申込完了
タグツール – 種類 – 中身Google広告 - コンバージョン - 体験申込
トリガー種類 – 条件クリック - 電話リンク
トリガー種類 – 条件CE - trial_submit
トリガー除外 – 条件除外 - テストページ
変数種類 – キー名DLV - lesson_type
変数種類 – 中身定数 - GA4測定ID、LT - ページ種別

トリガーの名前に「どのタグに使うか」を書かないのがこつです。同じトリガーを別のタグにも使うと名前と中身がずれるので、条件だけを書いておきます。

フォルダは次の手順で作ります。

  1. 左のメニューで「フォルダ」を開きます。
  2. 「新しいフォルダ」を押して名前を付けます。
  3. 「タグ」「トリガー」「変数」の一覧でチェックを入れ、「移動」から入れるフォルダを選びます。
フォルダの一覧で「01 計測の土台」「02 キーイベント」「03 広告」「99 停止中」の4つにタグ・トリガー・変数が分かれているところ
フォルダの一覧で「01 計測の土台」「02 キーイベント」「03 広告」「99 停止中」の4つにタグ・トリガー・変数が分かれているところ

フォルダはタグの種類ごとか、目的ごとに分けます。サンプル料理教室では「01 計測の土台」(Googleタグ・定数・ページ種別)、「02 キーイベント」(体験申込・電話・LINE)、「03 広告」(Google広告とMeta広告)、「99 停止中」(使っていないもの)の4つにしています。使わなくなったタグは、消すか迷う間は一時停止にして「99 停止中」に入れ、次の見直しで消します。

人に引き継ぐときは、名前とフォルダに加えて、次の2つを残します。

  • ワークスペース右上の「公開」を押し、送信設定の「バージョンの公開と作成」を選んだ画面で、バージョン名と説明に何を変えたかを書く(「体験申込のlesson_typeを追加」)。ワークスペースの説明は、そのままバージョンに引き継がれます
  • データレイヤーのイベント名とキー名の一覧を、制作会社に渡した依頼書と一緒に保管する。サイトを作り直したときに同じ名前で入れ直してもらえば、GTM側は何も直さずに済みます

応用

ルックアップ テーブルでページの種類を付ける

URLのままでは、データポータルで「ブログからの申込」と「料金ページからの申込」を分けにくいので、ページの種類名に置き換えた変数を作ります。

入力(Page Path)出力
/top
/lesson/lesson
/price/price
/teacher/teacher
/access/access
  1. 「変数」の「ユーザー定義変数」で「新規」を押し、「ルックアップ テーブル」を選びます。
  2. 「入力変数」に {{Page Path}} を選びます。
  3. 上の表の5行を入れます。
  4. 名前を LT - ページ種別 にして保存します。

ブログの記事は /blog/ の下に何百ページもあり、ルックアップ テーブルでは書ききれません。この場合は「正規表現の表」で ^/blog/ → blog の1行を足します。正規表現の表は上から順に調べて、最初に一致した行の値を返します。どれにも一致しないときの値は「デフォルト値を設定」で other にしておくと、空欄が並びません。

定数でIDをまとめる

Google広告のコンバージョンIDのように、複数のタグで同じ値を使うものは定数の変数にします。IDが変わったときに直すのが1か所で済みます。名前は 定数 - Google広告ID のようにします。

JavaScript 変数とカスタム JavaScript

ページのソースに、テーマがすでにグローバル変数を出していることがあります。たとえば予約システムの埋め込みが window.reserveConfig を置いているなら、JavaScript 変数で reserveConfig.planName を指定して読めます。

画面上の値を加工したいときは、カスタム JavaScript を使います。値を返す関数の形で書きます。次は、クリックされた要素が data-area を持つ枠の中にあれば、その値(header、price-bottom など)を返す変数です。

function () {
  var el = {{Click Element}};
  if (!el || !el.closest) { return 'unknown'; }
  var box = el.closest('[data-area]');
  return box ? box.getAttribute('data-area') : 'other';
}

data-area の属性はテーマに入っている必要があるので、制作会社に「ボタンを囲む枠に data-area="header" のように付けてほしい」と頼みます。サイトの見た目は変わらないので、引き受けてもらいやすい依頼です。

スクロールと要素の表示は、GA4の拡張計測機能と重ねない

GA4の拡張計測機能は、ページの90%まで下がったときに scroll イベントを自動で送ります。GTMのスクロール距離トリガーで90%を足すと二重になります。GTMで作るのは、25%・50%・75%のように拡張計測機能に無い深さを取りたいときだけです。サンプル料理教室では、料金ページだけ Page Path 等しい /price/ に絞って、50, 75 の2つを取っています。

要素の表示トリガーは、送信後にページが変わらないフォームの「送信しました」の表示を数えるのに使えます。「選択方法」で「CSS セレクタ」を選び、完了メッセージの要素を指定します。「DOM の変化をモニタリング」にチェックを入れないと、送信後に現れた要素は見つかりません。

できないことと、その代わり

できないこと理由代わりの手
reserve.example(外部の予約システム)の中の申込を数える別ドメインで、こちらのGTMが入っていない予約システムの管理画面の件数を使う。予約システムがGTMやGA4の設置に対応していれば、そちらの機能で入れる
電話が実際につながったかを知るGTMが見られるのはタップまで受付の電話メモの件数と月ごとに突き合わせる
前のページで入れたデータレイヤーの値を次のページで読むデータレイヤーはページごとに消える次のページでも入れ直してもらう
画面に出ない値(レッスンの種類、会員かどうか)を組み込み変数で取る組み込み変数はページとクリックした要素の情報だけ制作会社にデータレイヤーで入れてもらう
テーマが変わってもクリック計測が壊れないようにするClick Classes や Click Text は見た目の変更で変わるリンク先URL(Click URL)で書くか、data- 属性を付けてもらう
過去にさかのぼって数えるGTMは設定した後の出来事しか送らない設定した日を記録しておき、前後で比べない

データレイヤーの依頼を制作会社が受けられない場合は、サンクスページ型(/thanks/ の表示をページビューのトリガーで数える)で始めます。サンクスページを直接開かれると数え間違えますが、小さな教室の申込件数なら、月に一度フォームの受信メールの件数と比べれば十分に気づけます。

よく詰まるところ

症状原因直し方
トリガーの条件に Click URL が出てこない組み込み変数が有効になっていない「変数」→「組み込み変数」の「設定」でチェックを入れる
カスタム イベントのトリガーが動かないイベント名の大文字・小文字やつづりが push() とずれているプレビューモードで実際のイベント名をコピーして貼る
データレイヤー変数が undefined になる変数名とキー名がずれている。または値の push() がトリガーのイベントより後キー名を合わせる。値は event と同じ push() に入れてもらう
前のページの値が残って見える同じページ内で同じキーが上書きされずに残っている毎回のイベントで同じキーを必ず入れてもらう
dataLayer を入れたら既存のタグが止まったdataLayer = [...] と代入していて、GTMの値を消した`window.dataLayer = window.dataLayer[]; と push()` に直してもらう
サンクスページのイベントが他のページでも出る含む や正規表現で thanks だけを書いた^/thanks/?$ のように先頭と末尾まで書く
ドメインの正規表現が思わぬURLに当たる. を何でも1文字として読んでいるreserve\.example のように \ を付ける
ボタンをクリックしても条件に当たらない中の画像や span がクリックされ、Click Element がそちらになる.line-btn, .line-btn * のように中の要素も含めるか、リンクのみのトリガーで Click URL を使う
例外を付けたのにタグが出る配信トリガーと例外でトリガーの種類が違う例外のトリガーを配信と同じ種類で作るか、配信トリガーの条件に「一致しない」を足す
スクロールのイベントが二重になるGA4の拡張計測機能の90%と、GTMの90%が両方動いているGTMからは90%を外す
.* のカスタム イベントでタグが何度も出るGTMが自動で出すイベントにも全部当たっている受けたいイベント名を全部書いた正規表現にする
変数やトリガーを消せないどこかのタグやトリガーが使っている一覧の使用中の表示から参照元を外してから消す
GA4でパラメータの値がレポートに出ないカスタム ディメンションに登録していない「管理」→「データの表示」→「カスタム定義」で登録し、24〜48時間待つ

作ったら、公開する前に必ずプレビューモードで1つずつ確かめます。プレビューの見方は「公開前の確認:GTMのプレビューとGA4のDebugView」に書いています。

次にやること

あわせて読む