Googleタグマネージャーの変数とは?役割と設定方法を初心者向けに解説

Alt属性 Googleタグマネージャー

Googleタグマネージャーの変数とは何かを初心者向けに解説。組み込み変数・ユーザー定義変数・データレイヤー変数の違い、設定方法、タグやトリガーでの使い方までわかりやすく紹介します。

  1. Googleタグマネージャーの変数とは?
    1. GTMの変数を初心者向けに簡単に説明
    2. 変数は何のために使うのか
    3. タグ・トリガー・変数の違い
    4. 変数は値を一時的に保持する仕組み
    5. 変数はタグとトリガーの両方で使う
    6. GTMで変数を使う具体例
  2. GTMで変数が使われる仕組み
    1. Webサイトから値を取得する
    2. 変数に値が入る仕組み
    3. トリガー条件で変数を使う
    4. タグへ値を渡すために変数を使う
    5. イベント発生時に変数の値が変わることがある
    6. 変数・トリガー・タグが連動する流れ
  3. GTMの変数は大きく2種類ある
    1. 組み込み変数とは?
    2. ユーザー定義変数とは?
    3. 組み込み変数とユーザー定義変数の違い
    4. 初心者はまず組み込み変数から使う
    5. 変数の種類早見表
  4. 組み込み変数とは?
    1. 組み込み変数はGTMに最初から用意されている
    2. Page URLとは?
    3. Page Hostnameとは?
    4. Page Pathとは?
    5. Referrerとは?
    6. Eventとは?
    7. 組み込み変数を有効にする方法
    8. どの組み込み変数を有効にすればよい?
  5. クリックで使う主な組み込み変数
    1. Click Elementとは?
    2. Click Classesとは?
    3. Click IDとは?
    4. Click Targetとは?
    5. Click URLとは?
    6. Click Textとは?
    7. 外部リンククリックで使う例
    8. CTAボタンで使う例
    9. クリック変数早見表
  6. フォーム送信で使う主な組み込み変数
    1. Form Elementとは?
    2. Form Classesとは?
    3. Form IDとは?
    4. Form Targetとは?
    5. Form URLとは?
    6. Form Textとは?
    7. 問い合わせフォームで使う例
    8. フォーム変数を使うときの注意点
    9. フォーム変数早見表
  7. スクロール・動画・エラーで使う組み込み変数
    1. Scroll Depth Thresholdとは?
    2. Scroll Depth Unitsとは?
    3. Scroll Directionとは?
    4. Video Statusとは?
    5. Video Percentとは?
    6. Video Titleとは?
    7. Error Messageとは?
    8. Error URL・Error Lineとは?
    9. 用途別の変数早見表
  8. ユーザー定義変数とは?
    1. 組み込み変数で足りないときに作成する
    2. ユーザー定義変数は自分で設定する
    3. データレイヤー変数とは?
    4. 定数とは?
    5. JavaScript変数とは?
    6. カスタムJavaScriptとは?
    7. DOM要素変数とは?
    8. ファーストパーティCookieとは?
    9. ユーザー定義変数の主な種類早見表
  9. データレイヤー変数とは?
    1. データレイヤーとは?
    2. dataLayer.pushとの関係
    3. データレイヤー変数で値を取得する仕組み
    4. 変数名とキー名の関係
    5. 商品名や価格を取得する例
    6. 問い合わせ種類を取得する例
    7. データレイヤーバージョン1と2の違い
    8. データレイヤー変数を使うメリット
    9. データレイヤー変数早見表
  10. 定数変数とは?
    1. 定数は変わらない値を保存する変数
    2. 同じ値を複数タグで使うときに便利
    3. IDや固定文字列を保存する例
    4. 定数を使うメリット
    5. 定数に保存しない方がよい情報
    6. 定数変数の使い分け早見表
  11. JavaScript変数とカスタムJavaScriptの違い
    1. JavaScript変数とは?
    2. カスタムJavaScriptとは?
    3. 2つの違いを初心者向けに説明
    4. JavaScript変数を使う例
    5. カスタムJavaScriptを使う例
    6. 初心者がむやみに使わない方がよい理由
  12. ユーザー定義変数を新しく作成する方法
    1. 手順1|GTMのコンテナを開く
    2. 手順2|「変数」をクリックする
    3. 手順3|ユーザー定義変数の「新規」をクリックする
    4. 手順4|変数名を入力する
    5. 手順5|変数のタイプを選択する
    6. 手順6|必要な設定を入力する
    7. 手順7|保存する
    8. ユーザー定義変数の作成手順早見表
  13. 変数をトリガー条件に使う方法
    1. Page URLを使ってページを限定する
    2. Page Pathを使ってURLパスを判定する
    3. Click URLを使って外部リンクを判定する
    4. Click Textを使ってボタンを判定する
    5. Form IDを使ってフォームを判定する
    6. データレイヤー変数を条件に使う
    7. 複数条件を設定するときの注意点
    8. トリガー条件で使う変数早見表
  14. 変数をタグで使う方法
    1. タグへ動的な値を渡すとは?
    2. GA4イベントパラメータに変数を使う
    3. クリックURLをイベント値として送る例
    4. 商品名や価格をタグへ渡す例
    5. 固定値と変数を使い分ける
    6. タグで変数を使うときの注意点
    7. 変数を使う場所早見表
  15. 変数の値を確認する方法
    1. プレビューモードを起動する
    2. Tag Assistantでイベントを選択する
    3. Variablesを開く
    4. Page URLの値を確認する
    5. Click URL・Click Textを確認する
    6. データレイヤー変数を確認する
    7. undefinedと表示された場合の確認ポイント
    8. 公開前に必ず値を確認する
    9. 変数確認手順早見表
  16. GTMの変数設定でよくある失敗
    1. 必要な組み込み変数を有効にしていない
    2. Page URLとPage Pathを混同している
    3. Click URLとClick Textを間違えている
    4. 変数名とデータレイヤーのキー名が違う
    5. データレイヤーへ値が送られる前に参照している
    6. undefinedのままタグを発火している
    7. 同じ意味の変数を複数作っている
    8. カスタムJavaScriptを必要以上に使っている
    9. プレビューせずに公開している
    10. よくある失敗と対処方法早見表
  17. 変数を管理しやすくする方法
    1. 変数名の命名ルールを決める
    2. 組み込み変数とユーザー定義変数を区別する
    3. 用途が分かる名前を付ける
    4. 同じ値を使う変数を重複して作らない
    5. 不要な変数を定期的に見直す
    6. 変更内容を公開時に記録する
    7. 変数管理ルール早見表
  18. GTMの変数についてよくある質問
    1. 変数はいくつ作れますか?
    2. 組み込み変数はすべて有効にした方がよいですか?
    3. 変数を設定しなくてもGTMは使えますか?
    4. 1つの変数を複数のタグで使えますか?
    5. 1つの変数を複数のトリガーで使えますか?
    6. Page URLとPage Pathの違いは何ですか?
    7. 変数がundefinedになるのはなぜですか?
    8. データレイヤー変数は必ず必要ですか?
    9. WordPressでも変数を使えますか?
    10. Cocoonでも変数を設定できますか?
    11. 変数を削除すると過去のGA4データも消えますか?
    12. 変数FAQ早見表
  19. GTMの変数はタグとトリガーをつなぐ重要な仕組み
    1. 今日覚えておきたい重要ポイント3つ
    2. タグ・トリガー・変数の関係早見表
    3. 組み込み変数・ユーザー定義変数の違い
    4. 主な変数の種類一覧
    5. ユーザー定義変数の作成手順早見表
    6. 変数設定チェックリスト
    7. 次に読むおすすめGTM関連記事
    8. まとめ

Googleタグマネージャーを使っていると、「変数とは何?」「Page URLやClick Textは何に使うの?」「組み込み変数とユーザー定義変数の違いが分からない」と迷うことがあります。GTMの変数は、タグに値を渡したり、トリガーの条件判定に使ったりする重要な仕組みです。この記事では、変数の基本的な役割から、組み込み変数・ユーザー定義変数・データレイヤー変数の違い、作成方法、タグやトリガーでの使い方、プレビューでの確認方法まで、初心者向けに具体例を交えてわかりやすく解説します。

Googleタグマネージャーの変数とは?

Googleタグマネージャー(GTM)の変数とは、タグやトリガーで使う値を入れておく名前付きの入れ物のようなものです。

たとえば、

  • 現在のページURL
  • クリックしたリンク先URL
  • クリックした文字
  • 商品名
  • 商品価格

などの値を取得して、タグやトリガーの設定に利用できます。

Google公式では、変数を「コード実行時に値が入る名前付きのプレースホルダ」と説明しています。たとえばPage URL変数には、現在表示しているページのURLが入ります。 Google サポート

GTMの変数を初心者向けに簡単に説明

初心者の方は、変数を**「必要な情報を入れておく箱」**と考えると分かりやすいです。

たとえば、ユーザーがお問い合わせページを開いているとします。

そのとき、

Page URL

という変数には、

Example Domain

のような現在のページURLが入ります。

GTMはこの値を使って、

お問い合わせページならタグを発火する

といった判断ができます。

つまり、変数はGTMが条件判定やデータ送信を行うための材料です。

変数は何のために使うのか

変数の主な用途は、大きく2つあります。

  • トリガーの条件判定に使う
  • タグへ動的な値を渡す

Google公式でも、変数はトリガーではフィルタ条件を定義し、タグでは動的な値を取り込むために使うと説明されています。 Google サポート

たとえば、

Page URL に /contact/ を含む場合だけタグを発火

という設定では、Page URL変数をトリガー条件に使います。

一方、

クリックされたリンク先URLをGA4へ送る

場合は、Click URL変数をタグ側で使います。

タグ・トリガー・変数の違い

タグ・トリガー・変数は、それぞれ役割が違います。

項目役割初心者向けの覚え方
タグデータを送る・処理を実行する何をする?
トリガータグを動かす条件を決めるいつ動かす?
変数判定や送信に使う値を持つどんな値を使う?

たとえば、「お問い合わせボタンのクリックをGA4へ送る」場合は、

変数:Click Textでクリック文字を取得

↓

トリガー:「お問い合わせ」という文字なら成立

↓

タグ:GA4へイベント送信

という流れになります。

Google公式でも、タグ・トリガー・変数はそれぞれ別の役割を持ちながら連動すると説明されています。 Google サポート


GTM全体の仕組みやタグ・トリガー・変数の関係については、「Googleタグマネージャーとは?初心者でもわかる仕組みと導入するメリットを解説」で詳しく解説しています。

変数は値を一時的に保持する仕組み

変数には、ページや操作の状況に応じて値が入ります。

たとえば、

  • Page URL → 現在のページURL
  • Click URL → クリックしたリンク先
  • Click Text → クリックした文字
  • Form ID → 送信したフォームのID

などです。

ただし、厳密には変数そのものが常に値を保存し続けるというより、必要なタイミングで値を取得して利用する仕組みと考えるとよいでしょう。

また、データレイヤーを使う場合は、商品名や価格などの値を一時的に保持し、その値を変数経由でタグやトリガーから利用できます。 Google サポート

変数はタグとトリガーの両方で使う

変数は、タグとトリガーの両方で使われます。

トリガーでは、

Page URL contains /products/

のように条件判定に使います。

一方、タグでは、

商品価格

商品ID

クリックURL

などの値をGA4や広告タグへ渡すために使います。

Google公式でも、変数はトリガーのフィルタ条件と、タグへ渡す動的な値の両方で使うと説明されています。 Google サポート

GTMで変数を使う具体例

具体例を見てみましょう。

たとえば、外部リンククリックをGA4で計測したい場合です。

ユーザーが外部リンクをクリック

↓

Click URL変数にリンク先URLが入る

↓

トリガーがClick URLを確認

↓

条件に一致

↓

GA4イベントタグが発火

という流れになります。

また、商品購入イベントなら、

  • 商品名
  • 商品ID
  • 価格
  • 数量

などを変数として取得し、GA4へ送ることもできます。

変数は、GTMを柔軟に使うための基本的な仕組みだと覚えておきましょう。

GTMで変数が使われる仕組み

GTMでは、変数単独で動くのではなく、Webサイトの値を取得し、トリガーやタグへ渡すことで機能します。

基本的な流れは、

Webサイトでイベント発生

↓

変数が値を取得

↓

トリガーが条件判定

↓

条件一致

↓

タグへ値を渡して発火

です。

Google公式でも、変数はトリガーの条件に使ったり、タグへ情報を渡したりする仕組みと説明されています。 Google サポート

Webサイトから値を取得する

変数は、Webサイトやブラウザ上のさまざまな情報から値を取得します。

たとえば、

  • ページURL
  • 参照元URL
  • クリックした要素
  • フォーム情報
  • データレイヤー
  • Cookie

などです。

GTMには、Page URLなどの組み込み変数があらかじめ用意されています。必要に応じてユーザー定義変数を作ることもできます。 Google サポート

変数に値が入る仕組み

変数の値は、ページやイベントの状況によって変わります。

たとえばPage URLなら、

トップページでは、

Example Domain

お問い合わせページでは、

Example Domain

というように値が変わります。

つまり、変数は固定値だけではなく、その時点の状況に応じた値を返すことができます。

この仕組みによって、同じトリガーやタグでもページごとに違う処理ができます。

トリガー条件で変数を使う

トリガーでは、変数・演算子・値を組み合わせて条件を作ります。

Google公式では、トリガーフィルタは、

変数 + 演算子 + 値

で構成されると説明されています。 Google サポート

たとえば、

項目設定例
変数Page URL
演算子含む
値/products/

なら、URLに/products/を含むページだけでトリガーが成立します。

タグへ値を渡すために変数を使う

変数は、トリガーだけでなくタグにも使います。

たとえば、GA4イベントタグへ、

  • クリックURL
  • 商品名
  • 商品価格
  • フォーム種類

などを渡すことができます。

Google公式では、変数を使ってトランザクション値や商品IDなどの動的な値をタグへ渡す例が示されています。 Google サポート

たとえば、

Click URL → GA4イベントパラメータへ渡す

という設定をすれば、どのリンクがクリックされたかをGA4側で分析できます。

イベント発生時に変数の値が変わることがある

変数の値は、イベントによって変わる場合があります。

たとえば、

1回目のクリックでは、

Click Text=「お問い合わせ」

2回目のクリックでは、

Click Text=「商品を見る」

というように値が変わります。

そのため、トリガーが発火しない場合は、GTMのプレビューモードで実際に変数へどんな値が入っているか確認することが重要です。

変数・トリガー・タグが連動する流れ

最後に、3つの関係を整理しましょう。

順番役割具体例
1イベント発生リンクをクリック
2変数が値を取得Click URLを取得
3トリガーが判定特定URLか確認
4条件成立トリガー発火
5タグが実行GA4へイベント送信

初心者の方は、

変数=値を取得する

↓

トリガー=値を使って判断する

↓

タグ=必要な処理を実行する

という順番で覚えると理解しやすいでしょう。

GTMの変数は大きく2種類ある

Googleタグマネージャー(GTM)の変数は、大きく分けると次の2種類です。

  • 組み込み変数
  • ユーザー定義変数

Google公式では、GTMにはあらかじめ用意された組み込み変数があり、必要に応じてユーザー定義変数を自分で作成できると説明されています。多くの基本的なタグ・トリガー設定は組み込み変数で対応できます。 Google サポート

組み込み変数とは?

組み込み変数とは、GTMに最初から用意されている変数です。

たとえば、

  • Page URL
  • Page Path
  • Click URL
  • Click Text
  • Form ID
  • Event

などがあります。

初心者の方は、よく使う情報をすぐ取得できる標準装備の変数と考えると分かりやすいでしょう。

Google公式でも、組み込み変数はタグやトリガー設定の多くのニーズに対応できると案内されています。 Google サポート

ユーザー定義変数とは?

ユーザー定義変数は、組み込み変数だけでは足りない場合に、自分で作成する変数です。

たとえば、

  • データレイヤー変数
  • 定数
  • カスタムJavaScript
  • DOM要素
  • ファーストパーティCookie

などがあります。

具体例として、

商品名をデータレイヤーから取得したい

場合は、商品名用のデータレイヤー変数を作成します。

Google公式でも、ユーザー定義変数は組み込み変数では対応できない特定の要件に合わせて作成すると説明されています。 Google サポート

組み込み変数とユーザー定義変数の違い

2つの違いを表にすると分かりやすくなります。

項目組み込み変数ユーザー定義変数
用意する人GTM側ユーザー
作成作業基本不要必要
用途一般的な情報取得独自情報の取得
例Page URL、Click URLデータレイヤー変数、定数
初心者向け使いやすいやや設定が必要

初心者の方は、

標準で用意されている → 組み込み変数

自分で作る → ユーザー定義変数

と覚えるとよいでしょう。

初心者はまず組み込み変数から使う

GTMを始めたばかりなら、まず組み込み変数から使うのがおすすめです。

たとえば、

  • 特定ページだけタグを発火する → Page URL
  • 外部リンクを判定する → Click URL
  • ボタン文字を判定する → Click Text
  • フォームを判定する → Form ID

といった基本的な設定は、組み込み変数で対応できます。

Google公式でも、組み込み変数でタグやトリガー設定の多くをカバーできるとしています。 Google サポート

そのため、

組み込み変数で対応できるか確認

↓

足りない場合にユーザー定義変数

という順番で考えると、設定を必要以上に複雑にせずに済みます。

変数の種類早見表

種類代表例主な用途
組み込み変数Page URL現在ページのURL
組み込み変数Click URLリンク先URL
組み込み変数Click Textクリック文字
組み込み変数Form IDフォーム識別
ユーザー定義変数データレイヤー変数商品名・価格など
ユーザー定義変数定数固定値
ユーザー定義変数カスタムJavaScript独自処理で値を取得
ユーザー定義変数DOM要素ページ要素から値を取得

組み込み変数とは?

組み込み変数は、GTMがあらかじめ用意している標準的な変数です。

ページURLやクリック情報、フォーム情報、スクロール情報など、Webサイトの計測でよく使う値を取得できます。

Google公式では、Webコンテナ向けにページ、クリック、フォーム、スクロール、動画、エラー、ユーティリティなど、多くの組み込み変数が用意されています。 Google サポート

組み込み変数はGTMに最初から用意されている

組み込み変数は、ユーザーが一から仕組みを作らなくても利用できます。

ただし、すべての組み込み変数が最初から画面上で有効になっているとは限りません。

必要に応じて「変数」画面から有効にします。

たとえば、

  • Page URL
  • Page Path
  • Click URL
  • Click Text
  • Form ID

などを利用できます。

Page URLとは?

Page URLは、現在表示しているページの完全なURLを取得する変数です。

Google公式でも、Page URLは現在のページの完全なURLを返すと説明されています。 Google サポート

たとえば、

Example Domain

というページなら、Page URLでは基本的にこのURL全体を扱います。

主な用途は、

  • 特定URLだけタグを発火する
  • URLをGA4へ渡す
  • ページ条件を判定する

などです。

Page Hostnameとは?

Page Hostnameは、現在のURLのホスト名部分を取得します。

たとえば、

Example Domain

なら、

www.example.com

の部分です。

Google公式でも、Page Hostnameは現在のURLのホスト名を返すと定義されています。 Google サポート

複数ドメインやサブドメインを扱うサイトで、

  • 本番サイトか
  • サブドメインか
  • 別ドメインか

を判定したい場合に便利です。

Page Pathとは?

Page Pathは、URLのパス部分を取得する変数です。

たとえば、

Example Domain

なら、

/contact/

の部分です。

Google公式でも、Page Pathは現在のURLのパス部分を返すと説明されています。 Google サポート

Page URLより条件をシンプルにしたい場合に便利です。

たとえば、

Page Path equals /contact/

とすれば、お問い合わせページだけを条件にできます。

Referrerとは?

Referrerは、現在のページへ来る直前に閲覧していたページのURLを表す変数です。

Google公式では、Referrerは現在ページの完全な参照元URLを返すと説明されています。 Google サポート

たとえば、

トップページ → 商品ページ

へ移動した場合、商品ページ側ではトップページが参照元になることがあります。

ただし、直接アクセスやブラウザ・サイト側の設定によっては、参照元が取得できない場合もあります。

Eventとは?

Eventは、現在発生しているデータレイヤーイベント名を取得する組み込み変数です。

Google公式では、Event変数はdataLayer内のeventキーを参照し、現在のイベント名を返すと説明されています。例として、

  • gtm.js
  • gtm.dom
  • gtm.load
  • 独自のカスタムイベント名

などがあります。 Google サポート

たとえば、

form_success

というカスタムイベントが発生している場合、Event変数からそのイベント名を確認できます。

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

組み込み変数を利用するには、GTMの「変数」画面で必要な項目を有効にします。

基本的な流れは、

  1. GTMのコンテナを開く
  2. 左メニューの「変数」をクリック
  3. 組み込み変数の設定を開く
  4. 必要な変数にチェックを入れる

という手順です。

たとえばクリック計測をしたいなら、

  • Click URL
  • Click Text
  • Click ID
  • Click Classes

などを有効にしておくと便利です。

どの組み込み変数を有効にすればよい?

すべてをむやみに有効にする必要はありません。

まずは、目的に合わせて必要なものを選びましょう。

たとえばブログ運営なら、

  • Page URL
  • Page Path
  • Referrer
  • Event
  • Click URL
  • Click Text
  • Click ID
  • Click Classes
  • Form ID

あたりから始めると使いやすいです。

用途別に整理すると、次のようになります。

目的おすすめ変数
ページ判定Page URL、Page Path
ドメイン判定Page Hostname
参照元確認Referrer
イベント確認Event
クリック計測Click URL、Click Text、Click ID
フォーム計測Form ID、Form Classes

初心者の方は、今使う変数だけ有効にし、必要になったら追加するくらいで十分です。

クリックで使う主な組み込み変数

GTMでは、リンクやボタンがクリックされたときに、その要素の情報を取得できる組み込み変数があります。

代表的なものは、

  • Click Element
  • Click Classes
  • Click ID
  • Click Target
  • Click URL
  • Click Text

です。

これらを使うことで、「どのリンクが押されたのか」「どのボタンがクリックされたのか」を条件にしてトリガーを設定できます。

Click Elementとは?

Click Elementは、クリックされたHTML要素そのものを表す変数です。

たとえば、ユーザーがボタンやリンクをクリックした場合、そのクリック対象となった要素を取得します。

主な用途は、

  • クリックされた要素の種類を確認する
  • CSSセレクタなどを使って条件を絞る
  • より細かいクリック判定を行う

といった場面です。

初心者の方は、Click Elementはクリック対象そのものを取得する変数と覚えるとよいでしょう。

Click Classesとは?

Click Classesは、クリックされた要素に設定されているclass属性の値を取得する変数です。

たとえば、HTMLが、

<a class="cta-button contact-link">お問い合わせ</a>

なら、Click Classesには、

cta-button contact-link

のような値が入ります。

この変数は、

  • CTAボタン
  • メニュー
  • 特定デザインのリンク

などをclass名で判定したいときに便利です。

Click IDとは?

Click IDは、クリックされた要素に設定されたid属性の値を取得します。

たとえば、

<button id="contact-button">お問い合わせ</button>

なら、

Click ID = contact-button

となります。

IDは1ページ内で一意に設定されることが多いため、特定ボタンだけを判定したいときに使いやすい変数です。

Click Targetとは?

Click Targetは、クリックされたリンクなどのtarget属性を取得する変数です。

たとえば、

<a href="https://example.com/" target="_blank">

なら、

Click Target = _blank

となります。

この変数は、

  • 新しいタブで開くリンク
  • 特定のtarget属性を持つリンク

を判定したい場合に使えます。

ただし、一般的なブログ計測ではClick URLやClick Textほど使用頻度は高くありません。

Click URLとは?

Click URLは、クリックされたリンク先URLを取得する変数です。

たとえば、

<a href="https://example.com/product/">

をクリックすると、

Click URL = https://example.com/product/

となります。

主な用途は、

  • 外部リンク計測
  • アフィリエイトリンク計測
  • 特定ページへの誘導クリック
  • PDFやファイルリンクの判定

などです。

リンク先を条件にしたいときは、Click URLが最も分かりやすい変数の1つです。

Click Textとは?

Click Textは、クリックされた要素に表示されている文字列を取得する変数です。

たとえば、

「お問い合わせはこちら」

というリンクをクリックした場合、

Click Text = お問い合わせはこちら

となります。

主な用途は、

  • CTAボタン
  • 資料請求ボタン
  • 商品を見るボタン
  • 申し込みボタン

などです。

ただし、同じ文字が複数箇所にある場合は、Click IDやClick Classesと組み合わせた方が安全です。

外部リンククリックで使う例

外部リンククリックを計測する場合は、Click URLを使う方法が分かりやすいです。

たとえば、自サイト以外のURLをクリックしたときだけタグを発火させたい場合、

Click URL does not contain 自サイトドメイン

のような条件を設定します。

流れは、

ユーザーが外部リンクをクリック

↓

Click URLがリンク先を取得

↓

トリガーが外部URLか判定

↓

条件一致

↓

GA4イベントタグ発火

です。

このように、変数はクリック情報をトリガー条件へ渡す役割を持っています。


クリックトリガーの作成方法や、Click URL・Click Textを使った条件設定については、「Googleタグマネージャーのトリガーとは?作成方法と使い方をわかりやすく解説」で詳しく解説しています。

CTAボタンで使う例

CTAボタンを計測する場合は、Click TextやClick IDを使うと分かりやすいです。

たとえば、

「資料請求はこちら」

というボタンなら、

Click Text contains 資料請求

と設定できます。

また、

id=”request-button”

が付いているなら、

Click ID equals request-button

と設定できます。

使い分けの目安は、

  • 表示文字で判定 → Click Text
  • 固有IDで判定 → Click ID
  • classで判定 → Click Classes
  • リンク先で判定 → Click URL

です。

クリック変数早見表

変数取得する情報主な用途
Click Elementクリック要素そのもの細かい条件判定
Click Classesclass属性CTA・特定デザイン
Click IDid属性特定ボタン
Click Targettarget属性新規タブなど
Click URLリンク先URL外部リンク・アフィリエイト
Click Text表示文字CTA・ボタン文字

フォーム送信で使う主な組み込み変数

GTMでは、フォーム送信時にフォーム情報を取得するための組み込み変数も用意されています。

代表的なものは、

  • Form Element
  • Form Classes
  • Form ID
  • Form Target
  • Form URL
  • Form Text

です。

フォーム送信トリガーと組み合わせることで、「どのフォームが送信されたのか」を判定しやすくなります。

Form Elementとは?

Form Elementは、送信されたフォーム要素そのものを取得する変数です。

フォームそのものを条件判定や確認に使いたいときに利用します。

初心者の方は、Click Elementのフォーム版と考えると分かりやすいでしょう。

Form Classesとは?

Form Classesは、フォームに設定されているclass属性を取得します。

たとえば、

<form class="contact-form">

なら、

Form Classes = contact-form

となります。

複数フォームをclass名で区別したい場合に便利です。

Form IDとは?

Form IDは、フォームに設定されているid属性を取得します。

たとえば、

<form id="contact-form">

なら、

Form ID = contact-form

となります。

フォームを特定する方法として非常に分かりやすく、

  • 問い合わせフォーム
  • 資料請求フォーム
  • 会員登録フォーム

などを区別するために使えます。

Form Targetとは?

Form Targetは、フォームのtarget属性を取得します。

たとえば、送信結果を別ウィンドウや別フレームに表示するよう設定されている場合、そのtarget値を確認できます。

一般的なWordPressサイトでは使用頻度は高くありませんが、特殊なフォーム構成では役立つ場合があります。

Form URLとは?

Form URLは、フォームの送信先URLを取得する変数です。

たとえば、

<form action="/contact/complete/">

なら、送信先URLとしてその値を取得します。

主な用途は、

  • フォームごとの送信先判定
  • 特定フォームの識別
  • 送信処理の確認

などです。

Form Textとは?

Form Textは、フォーム内に含まれるテキスト情報を取得する変数です。

ただし、フォーム全体の文字列が対象になるため、Click Textのように単純に使えるとは限りません。

そのため、フォームを特定する場合は、

  • Form ID
  • Form Classes
  • Form URL

の方が分かりやすいことが多いです。

問い合わせフォームで使う例

問い合わせフォームだけを計測する場合は、Form IDを使うと分かりやすいです。

たとえば、

Form ID = contact-form

という条件を設定します。

流れは、

問い合わせフォーム送信

↓

Form IDを取得

↓

contact-formと一致するか判定

↓

条件一致

↓

GA4イベントタグ発火

です。

フォームが複数あるサイトでは、Form IDやForm Classesで条件を絞ると、不要なフォーム送信を計測しにくくなります。

フォーム変数を使うときの注意点

フォーム変数を使う際は、HTMLの構造や送信方式によって値が期待どおり取得できない場合があります。

特に、

  • Ajax送信
  • JavaScriptで独自に処理している
  • 標準のsubmitイベントを使っていない
  • Form IDやclassが付いていない

といったフォームでは注意が必要です。

その場合は、

  • Tag Assistantで変数の値を確認する
  • カスタムイベントを使う
  • dataLayer.pushで送信完了を通知する
  • 完了ページを計測する

などの方法を検討します。

また、送信ボタンを押した=問い合わせが成功したとは限りません。

本当に成果を計測したい場合は、

送信成功

完了ページ表示

成功イベント発生

などを基準にする方が正確です。

フォーム変数早見表

変数取得する情報主な用途
Form Elementフォーム要素そのもの詳細確認
Form Classesclass属性フォーム分類
Form IDid属性特定フォーム判定
Form Targettarget属性送信先表示方法
Form URL送信先URLフォーム識別
Form Textフォーム内テキスト補助的な判定

スクロール・動画・エラーで使う組み込み変数

GTMには、クリックやフォームだけでなく、スクロール、YouTube動画、JavaScriptエラーを計測するときに使える組み込み変数もあります。

これらの変数を使うことで、

  • どこまでスクロールしたか
  • 動画を何%まで再生したか
  • どの動画が再生されたか
  • どこでJavaScriptエラーが起きたか

といった情報をタグやトリガーで利用できます。

Scroll Depth Thresholdとは?

Scroll Depth Thresholdは、スクロール距離トリガーが成立したときのしきい値を取得する変数です。

たとえば、スクロール距離を、

  • 25%
  • 50%
  • 75%
  • 90%

と設定している場合、50%地点で発火したイベントなら、Scroll Depth Thresholdには「50」という値が入ります。

ピクセル指定の場合は、指定したピクセル数がそのまま値として使われます。Google公式でも、割合なら0~100、ピクセル指定ならそのピクセル数を取得すると説明されています。 Google サポート

Scroll Depth Unitsとは?

Scroll Depth Unitsは、スクロール距離をどの単位で測ったかを取得する変数です。

値は、

  • %
  • ピクセル

のどちらかになります。

たとえば、

50%までスクロール

なら、

  • Scroll Depth Threshold → 50
  • Scroll Depth Units → %

という組み合わせになります。

Google公式でも、スクロール距離トリガーを発火させたしきい値の単位を返すと説明されています。 Google サポート

Scroll Directionとは?

Scroll Directionは、スクロールが縦方向か横方向かを取得する変数です。

たとえば、

  • 縦方向
  • 横方向

のどちらかが値として入ります。

一般的なブログでは縦方向を使うケースが多いですが、横スクロール型の表やコンテンツを計測する場合は横方向も利用できます。Google公式でも、この変数はトリガー成立時のスクロール方向を返すと説明されています。 Google サポート

Video Statusとは?

Video Statusは、YouTube動画トリガーが成立したときの動画の状態を取得する変数です。

たとえば、

  • play
  • pause

などです。

つまり、

動画を再生したのか

一時停止したのか

を区別できます。

YouTube動画の操作をGA4へイベントとして送りたい場合に便利です。Google公式でも、Video Statusは動画イベント検知時の状態を取得する変数として案内されています。 Google サポート

Video Percentとは?

Video Percentは、動画を何%まで再生したかを取得する変数です。

たとえば、

  • 25
  • 50
  • 75
  • 100

のような整数値が入ります。

たとえば75%地点で動画トリガーが発火した場合、

Video Percent = 75

となります。

Google公式では、0~100の整数値で動画の再生割合を返すと説明されています。 Google サポート

Video Titleとは?

Video Titleは、YouTube動画トリガーが成立したときに、再生された動画のタイトルを取得する変数です。

複数のYouTube動画を記事内に埋め込んでいる場合、

  • どの動画が再生されたか
  • どの動画が最後まで見られたか

を区別するのに役立ちます。

Google公式でも、Video TitleはYouTube動画のタイトルを取得する組み込み変数として説明されています。 Google サポート

Error Messageとは?

Error Messageは、JavaScriptエラートリガーが成立したときに、発生したエラーメッセージを取得する変数です。

たとえば、

  • JavaScript処理の失敗
  • 未定義変数の参照
  • スクリプトエラー

などを調査するときに使えます。

Google公式では、Error Messageはgtm.errorMessageの値を取得し、エラーメッセージを文字列として返すと説明されています。 Google サポート

Error URL・Error Lineとは?

Error URLは、JavaScriptエラーが発生したURLを取得します。

Error Lineは、エラーが発生したファイルの行番号を取得します。

たとえば、

Error URL
https://example.com/contact/

Error Line
125

といった情報です。

この2つをError Messageと組み合わせると、

  • どのページで
  • どんなエラーが
  • どの行付近で起きたか

を確認しやすくなります。Google公式でも、Error URLとError Lineはそれぞれエラー発生URLと行番号を取得する変数として定義されています。 Google サポート

用途別の変数早見表

用途主な変数取得する情報
スクロールScroll Depth Threshold到達したしきい値
スクロールScroll Depth Units%・ピクセル
スクロールScroll Direction縦・横
動画Video Status再生状態
動画Video Percent再生割合
動画Video Title動画タイトル
エラーError Messageエラー内容
エラーError URLエラー発生ページ
エラーError Lineエラー発生行

初心者の方は、

スクロール → Scroll系

動画 → Video系

JavaScriptエラー → Error系

とグループで覚えると分かりやすいでしょう。

ユーザー定義変数とは?

ユーザー定義変数とは、GTMの組み込み変数だけでは取得できない値を使いたいときに、自分で作成する変数です。

Google公式でも、組み込み変数では対応できない要件に合わせてユーザー定義変数を作成できると説明されています。 Google サポート

組み込み変数で足りないときに作成する

まずはPage URLやClick URLなどの組み込み変数で対応できるか確認します。

それでも足りない場合に、ユーザー定義変数を作ります。

たとえば、

  • 商品名
  • 商品価格
  • 会員区分
  • 問い合わせ種類
  • 独自Cookieの値

などを取得したい場合です。

初心者の方は、

組み込み変数で対応できるか確認

↓

足りない場合だけユーザー定義変数を作る

という順番で考えるとよいでしょう。

ユーザー定義変数は自分で設定する

ユーザー定義変数は、GTMの「変数」画面から自分で作成します。

基本的には、

  • 変数の種類
  • 取得する値
  • 名前

を設定します。

Google公式でも、

変数 → ユーザー定義変数 → 新規 → 変数の設定 → 種類選択 → 名前 → 保存

という流れで案内されています。 Google サポート

データレイヤー変数とは?

データレイヤー変数は、dataLayer.push()などでデータレイヤーへ送られた値を取得する変数です。

たとえば、

dataLayer.push({
  'product_name': '商品A',
  'price': 3000
});

と送られている場合、

  • product_name
  • price

をデータレイヤー変数として取得できます。

Google公式でも、データレイヤー変数はdataLayer.push()で送られた値を取得する仕組みと説明されています。 Google サポート

定数とは?

定数は、いつ参照しても同じ値を返す変数です。

たとえば、

  • 固定ID
  • 固定の文字列
  • 共通設定値

などを複数タグで使いたい場合に便利です。

同じ値を何度も直接入力する代わりに、定数変数としてまとめておけば管理しやすくなります。

JavaScript変数とは?

JavaScript変数は、Webページ上のグローバルJavaScript変数の値を取得する変数です。

たとえば、ページ内に、

window.memberType = "premium";

のようなグローバル変数がある場合、その値を取得する用途に使えます。

Google公式でも、必要な値がデータレイヤーやDOMにない場合、グローバルJavaScript変数から取得できるケースがあると説明されています。 Google サポート

カスタムJavaScriptとは?

カスタムJavaScriptは、JavaScript関数を使って独自に加工・計算した値を返す変数です。

たとえば、

  • URLを小文字へ変換する
  • 複数の値を組み合わせる
  • 条件によって返す値を変える

などができます。

Google公式でも、カスタムJavaScriptは匿名関数の戻り値を変数として利用する仕組みと説明されています。 Google サポート

便利ですが、初心者のうちは無理に使わず、

組み込み変数 → データレイヤー変数 → その他

の順で検討する方が設定をシンプルに保ちやすいでしょう。

DOM要素変数とは?

DOM要素変数は、Webページ上のHTML要素から値を取得する変数です。

たとえば、

  • 見出し文字
  • 商品名
  • data属性
  • 特定要素のテキスト

などを取得できます。

Google公式では、DOM要素変数は指定したDOM要素のテキスト、または指定属性の値を取得すると説明されています。 Google サポート

ただし、取得したいデータをあらかじめデータレイヤーへ送れるなら、一般的にはデータレイヤーを使った方が管理しやすい場合があります。

ファーストパーティCookieとは?

ファーストパーティCookie変数は、現在のドメインに保存されている指定したCookieの値を取得する変数です。

たとえば、

  • サイト独自の設定値
  • ユーザー状態を示すCookie
  • 独自識別情報

などを取得する場合があります。

Google公式では、現在アクセスしているドメインと一致するファーストパーティCookieの値を取得すると説明されています。 Google サポート

ただし、Cookieを使った計測では、プライバシー・同意管理・関連法令への配慮も必要です。

ユーザー定義変数の主な種類早見表

変数取得する値主な用途
データレイヤー変数dataLayerの値商品名・価格など
定数固定値ID・共通設定値
JavaScript変数グローバルJS変数ページ内の独自値
カスタムJavaScript関数の戻り値値の加工・計算
DOM要素HTML要素の値テキスト・属性
ファーストパーティCookieCookieの値独自状態の取得

初心者の方は、

まず組み込み変数

↓

次にデータレイヤー変数

↓

必要な場合だけJavaScriptやDOM系

という順番で覚えると使いやすいでしょう。

データレイヤー変数とは?

データレイヤー変数とは、Googleタグマネージャー(GTM)のdataLayerに送られた値を取得するための変数です。

データレイヤーには、

  • 商品名
  • 商品価格
  • 商品ID
  • 問い合わせ種類
  • 会員区分
  • イベント名

など、Webサイト側で持っている情報を一時的に入れておくことができます。

GTMは、その値をデータレイヤー変数として取り出し、タグやトリガーで利用します。

Google公式でも、データレイヤーはWebサイトとGTMの間で情報を受け渡す仕組みとして説明されています。

データレイヤーとは?

データレイヤーとは、Webサイト上の情報をGTMへ渡すためのデータ置き場のようなものです。

初心者の方は、

Webサイト → データレイヤー → GTM

という流れで考えると分かりやすいでしょう。

たとえば、商品ページで、

  • 商品名
  • 価格
  • 商品カテゴリー

などをデータレイヤーへ入れておけば、GTM側でその値を取得してGA4へ送ることができます。

データレイヤーを使うことで、HTMLの見た目や文字列に依存せず、計測用の値を安定して取得しやすくなります。

dataLayer.pushとの関係

dataLayer.push()は、データレイヤーへ新しい値やイベントを追加するために使います。

たとえば、

<script>
dataLayer.push({
  'event': 'purchase',
  'product_name': '商品A',
  'price': 3000
});
</script>

とすると、

  • event → purchase
  • product_name → 商品A
  • price → 3000

という値がデータレイヤーへ追加されます。

その後、GTM側でデータレイヤー変数を作成すれば、product_nameやpriceを取得できます。

つまり、

dataLayer.push()=値を送る

データレイヤー変数=その値を取り出す

という関係です。

データレイヤー変数で値を取得する仕組み

データレイヤー変数を使う場合は、GTM側で「どのキーの値を取得するか」を指定します。

たとえば、

dataLayer.push({
  'product_name': '商品A'
});

というデータがある場合、

GTMで、

データレイヤー変数名:product_name

と設定します。

すると、その変数を参照したときに、

商品A

という値を取得できます。

流れは、

Webサイト側で値を送る

↓

dataLayerに保存

↓

GTMのデータレイヤー変数が取得

↓

タグやトリガーで利用

となります。

変数名とキー名の関係

ここは初心者の方が混同しやすい部分です。

GTMでは、

  • GTM画面上で付ける「変数名」
  • dataLayer内の「キー名」

は別物です。

たとえば、

dataLayer.push({
  'product_name': '商品A'
});

の場合、キー名は、

product_name

です。

一方、GTM上では、

DLV|商品名

のように、分かりやすい変数名を付けても問題ありません。

つまり、

項目例
GTM上の変数名DLV|商品名
データレイヤー変数名product_name
取得される値商品A

となります。

商品名や価格を取得する例

商品情報を取得する例を見てみましょう。

Webサイト側で、

<script>
dataLayer.push({
  'event': 'view_item',
  'product_name': 'スニーカーA',
  'price': 5980
});
</script>

と送ったとします。

GTMでは、

  • DLV|商品名 → product_name
  • DLV|価格 → price

というデータレイヤー変数を作成します。

すると、

商品名=スニーカーA

価格=5980

として取得できます。

この値をGA4イベントタグへ渡せば、商品情報を分析に利用できます。

問い合わせ種類を取得する例

問い合わせフォームでもデータレイヤー変数を使えます。

たとえば、

<script>
dataLayer.push({
  'event': 'contact_complete',
  'contact_type': '資料請求'
});
</script>

と送った場合、

GTMで、

DLV|問い合わせ種類

という変数を作り、

データレイヤー変数名:contact_type

と設定します。

すると、

資料請求

という値を取得できます。

これにより、

  • 一般問い合わせ
  • 資料請求
  • 見積もり依頼

などを分けてGA4へ送ることができます。

データレイヤーバージョン1と2の違い

GTMのデータレイヤー変数では、バージョン1とバージョン2を選択できます。

大きな違いは、オブジェクトや階層構造の扱い方です。

一般的には、現在のGTMではバージョン2を使うケースが多いです。

たとえば、次のようなネスト構造がある場合、

dataLayer.push({
  'ecommerce': {
    'value': 5000
  }
});

バージョン2では、

ecommerce.value

のように階層をたどって値を取得できます。

初心者の方は、特別な理由がなければバージョン2を基本として考えると分かりやすいでしょう。

データレイヤー変数を使うメリット

データレイヤー変数を使うメリットは、主に次のとおりです。

  • HTMLの見た目に依存しにくい
  • 商品名や価格などを正確に取得しやすい
  • JavaScriptやDOM変更の影響を受けにくい
  • GA4や広告タグへ同じ値を使いやすい
  • タグ管理を整理しやすい

たとえば、ページ内の文字列をDOMから無理に取得するより、データレイヤーへ正式な値を送っておいた方が安定するケースがあります。

特に、

  • ECサイト
  • 会員サイト
  • 問い合わせ計測
  • カスタムイベント計測

では、データレイヤー変数が重要になります。

データレイヤー変数早見表

項目内容
データ送信dataLayer.push()
値の取得データレイヤー変数
キー例product_name
GTM変数名例DLV|商品名
利用先タグ・トリガー
主な用途商品、価格、問い合わせ情報

定数変数とは?

定数変数とは、常に同じ値を返すユーザー定義変数です。

たとえば、

  • 固定ID
  • サイト名
  • 共通文字列
  • 共通設定値

などを保存しておき、複数のタグから同じ値を使いたい場合に便利です。

初心者の方は、定数変数を**「何度呼び出しても同じ値を返す箱」**と考えると分かりやすいでしょう。

定数は変わらない値を保存する変数

通常のPage URLやClick URLは、ページや操作によって値が変わります。

一方、定数変数は基本的に値が変わりません。

たとえば、

サイト区分=main

という値を定数として設定した場合、どのタグから参照しても、

main

が返されます。

そのため、固定値を何度も入力したくない場合に便利です。

同じ値を複数タグで使うときに便利

同じ固定値を複数のタグで使う場合、定数変数にまとめておくと管理しやすくなります。

たとえば、

  • タグA
  • タグB
  • タグC

で同じサイト識別値を使う場合です。

直接それぞれのタグへ値を入力すると、変更時に3か所修正しなければなりません。

定数変数を使えば、

定数変数を1か所変更

するだけで、参照しているタグ側の値も統一できます。

IDや固定文字列を保存する例

たとえば、

CONST|サイト区分

という定数変数を作り、

値:blog

と設定します。

その変数をGA4イベントタグのパラメータに使えば、

site_type = blog

という固定値を送れます。

ほかにも、

  • サービス名
  • 環境名
  • 固定カテゴリー
  • 共通コード

などに使えます。

定数を使うメリット

定数変数を使う主なメリットは、

  • 同じ値を繰り返し入力しなくてよい
  • 入力ミスを減らせる
  • 値の変更を一元管理できる
  • タグ設定を見やすくできる

ことです。

たとえば、5つのタグで共通文字列を使っている場合でも、定数変数なら1か所で管理できます。

定数に保存しない方がよい情報

定数変数は便利ですが、何でも保存すればよいわけではありません。

特に、

  • パスワード
  • APIシークレット
  • 秘密鍵
  • 個人情報
  • 機密情報

などをGTMの定数変数へ保存するのは避けましょう。

GTMのコンテナやWebページ上の情報は、ブラウザ側で確認できる場合があります。

また、ページやユーザーによって変わる値は定数には向きません。

たとえば、

  • 商品価格
  • ユーザーID
  • 注文金額
  • クリックURL

などは、データレイヤー変数や組み込み変数などを使う方が適切です。

定数変数の使い分け早見表

値定数向き?おすすめ方法
固定のサイト区分○定数
共通文字列○定数
商品価格×データレイヤー変数
クリックURL×Click URL
注文金額×データレイヤー変数
パスワード×GTMに保存しない
APIシークレット×GTMに保存しない

初心者の方は、

変わらない共通値 → 定数

ページや操作で変わる値 → 他の変数

と覚えると使い分けやすいでしょう。

JavaScript変数とカスタムJavaScriptの違い

GTMのユーザー定義変数には、「JavaScript変数」と「カスタムJavaScript」があります。

名前は似ていますが、役割は異なります。

初心者の方は、

JavaScript変数=すでにあるJavaScriptの値を取得する

カスタムJavaScript=自分で処理を書いて値を作る

と覚えると分かりやすいでしょう。

JavaScript変数とは?

JavaScript変数は、Webページ上に存在するグローバルJavaScript変数の値を取得するための変数です。

たとえば、Webページ上に、

window.memberType = "premium";

というグローバル変数がある場合、GTMのJavaScript変数で、

memberType

を指定すると、

premium

という値を取得できます。

主な用途は、

  • 会員区分
  • サイト独自の設定値
  • Webページ上に用意されたJavaScript変数

などをGTMへ取り込みたい場合です。

ただし、対象となるJavaScript変数がページ上に存在していなければ、値を取得できません。

カスタムJavaScriptとは?

カスタムJavaScriptは、JavaScriptの関数を書き、その戻り値をGTMの変数として利用する仕組みです。

たとえば、

function() {
  return "blog";
}

と設定すると、この変数を呼び出したときに、

blog

という値を返します。

さらに、

  • 文字列を加工する
  • 条件によって値を変える
  • 複数の情報を組み合わせる
  • 独自の計算を行う

といったこともできます。

そのため、JavaScript変数より自由度が高いのが特徴です。

2つの違いを初心者向けに説明

違いを表にすると分かりやすくなります。

項目JavaScript変数カスタムJavaScript
役割既存のJS変数を取得独自処理で値を作る
コード記述基本的に不要必要
値の取得元グローバル変数関数の戻り値
難易度比較的簡単やや高い
用途既存データの取得加工・条件分岐・計算

たとえば、

すでにwindow.memberTypeがある

ならJavaScript変数で十分です。

一方、

memberTypeの値を見て「会員」「非会員」に変換したい

といった場合は、カスタムJavaScriptが向いています。

JavaScript変数を使う例

たとえばWebページに、

window.siteCategory = "fishing";

という変数があるとします。

GTMでは、

変数タイプ:JavaScript変数

グローバル変数名:siteCategory

と設定します。

すると、

fishing

という値をGTM側で取得できます。

この値を、

  • トリガー条件
  • GA4イベントパラメータ
  • タグの設定値

などに利用できます。

カスタムJavaScriptを使う例

たとえばPage Pathの値を小文字に統一したい場合を考えてみましょう。

カスタムJavaScriptで、

function() {
  return {{Page Path}}.toLowerCase();
}

のように設定すれば、Page Pathを小文字に変換した値を返せます。

たとえば、

/Contact/

という値なら、

/contact/

に変換できます。

ほかにも、

  • 空白を削除する
  • 条件によって値を変える
  • 複数の変数を結合する

といった加工に使えます。

初心者がむやみに使わない方がよい理由

カスタムJavaScriptは便利ですが、初心者の方が最初から多用する必要はありません。

理由は、

  • コードミスが起きやすい
  • 他の人が見て分かりにくくなる
  • デバッグが難しくなる
  • ページ側のJavaScript変更の影響を受けることがある

ためです。

まずは、

組み込み変数

↓

データレイヤー変数

↓

JavaScript変数

↓

必要な場合だけカスタムJavaScript

という順番で検討するとよいでしょう。

特に、既存の組み込み変数やデータレイヤーで取得できる値を、わざわざカスタムJavaScriptで作り直さないことが大切です。

ユーザー定義変数を新しく作成する方法

ユーザー定義変数は、GTMの「変数」メニューから作成できます。

Google公式でも、

変数 → ユーザー定義変数 → 新規 → 変数の設定 → 種類を選択 → 名前を付ける → 保存

という流れで設定します。

初心者の方は、まずデータレイヤー変数や定数など、比較的分かりやすい変数から作ってみるとよいでしょう。

手順1|GTMのコンテナを開く

まず、Googleタグマネージャーへログインし、変数を作成したいWebサイトのコンテナを開きます。

複数サイトを管理している場合は、

  • アカウント名
  • コンテナ名
  • コンテナID
  • 対象サイト

を確認しておきましょう。

別サイトのコンテナで変数を作ってしまわないよう注意が必要です。

手順2|「変数」をクリックする

GTMのワークスペースを開いたら、左側のメニューから**「変数」**をクリックします。

ここでは、

  • 組み込み変数
  • ユーザー定義変数

を確認できます。

既存の変数も表示されるため、同じ用途の変数がすでにないか確認しておくと重複を防げます。

手順3|ユーザー定義変数の「新規」をクリックする

「ユーザー定義変数」の欄にある**「新規」**をクリックします。

新しい変数の設定画面が開きます。

ここから、

変数名を決める

↓

変数タイプを選ぶ

↓

必要な値を設定する

という流れで作成します。

手順4|変数名を入力する

最初に、変数の用途が分かる名前を付けましょう。

たとえば、

  • DLV|商品名
  • DLV|商品価格
  • CONST|サイト区分
  • JS|会員種類
  • CJS|URL整形

などです。

変数が増えてきたときに見分けやすくするため、

変数の種類|用途

という形式にすると管理しやすくなります。

手順5|変数のタイプを選択する

次に、「変数の設定」をクリックして、使用する変数タイプを選択します。

たとえば、

  • データレイヤー変数
  • 定数
  • JavaScript変数
  • カスタムJavaScript
  • DOM要素
  • ファーストパーティCookie

などです。

初心者の方は、まず「何の値を取得したいか」を考えてから選ぶと分かりやすいです。

手順6|必要な設定を入力する

選んだ変数タイプによって、入力する内容は異なります。

たとえばデータレイヤー変数なら、

データレイヤー変数名:product_name

などを入力します。

定数なら、

値:blog

のように固定値を入力します。

JavaScript変数なら、

グローバル変数名:memberType

のように指定します。

つまり、変数の種類によって設定内容が変わるため、それぞれの役割を理解してから入力しましょう。

手順7|保存する

設定内容を確認したら「保存」をクリックします。

これでユーザー定義変数が作成されます。

保存した変数は、

  • トリガー条件
  • タグの設定値
  • GA4イベントパラメータ

などで利用できます。

ただし、変数を作成しただけでは何かが自動的に計測されるわけではありません。

タグやトリガーから変数を参照して初めて活用される

と覚えておきましょう。

ユーザー定義変数の作成手順早見表

手順操作確認ポイント
1コンテナを開く対象サイトを確認
2「変数」をクリック既存変数も確認
3「新規」をクリックユーザー定義変数を作成
4変数名を付ける用途が分かる名前
5タイプを選ぶ目的に合った種類
6必要な値を設定キー名・固定値など
7保存するタグ・トリガーで利用

初心者の方は、

何の値が必要か

↓

どこから取得するか

↓

どの変数タイプを使うか

という順番で考えると、変数を選びやすくなります。

変数をトリガー条件に使う方法

GTMでは、変数の値を使ってトリガーを発火させるかどうかを判定できます。

基本形は、

変数 + 条件 + 値

です。

たとえば、

Page URL contains /contact/

なら、「現在のURLに/contact/が含まれているか」を確認して、条件に一致したときだけタグを発火させます。

Page URLを使ってページを限定する

Page URLは、現在表示しているページの完全なURLを取得する変数です。

たとえば、

Example Domain

というページだけを対象にしたい場合は、

Page URL contains /contact/

などの条件を使えます。

主な用途は、

  • お問い合わせページだけ
  • 商品ページだけ
  • 特定カテゴリーだけ

などです。

URL全体を使って判定したい場合はPage URLが便利です。

Page Pathを使ってURLパスを判定する

Page Pathは、URLのドメインを除いたパス部分を取得します。

たとえば、

Example Domain

なら、

/contact/

がPage Pathです。

そのため、

Page Path equals /contact/

と設定すれば、お問い合わせページだけに限定できます。

Page URLよりシンプルに条件を書きたいときに使いやすい変数です。

Click URLを使って外部リンクを判定する

Click URLは、クリックされたリンク先URLを取得する変数です。

たとえば、自サイトのドメインが、

example.com

なら、

Click URL does not contain example.com

のような条件を使って、外部リンクを判定できます。

流れは、

リンクをクリック

↓

Click URLを取得

↓

自サイト以外か判定

↓

条件一致

↓

タグ発火

です。

外部リンク、アフィリエイトリンク、PDFリンクなどの計測に使いやすいでしょう。

Click Textを使ってボタンを判定する

Click Textは、クリックされた要素に表示されている文字を取得します。

たとえば、

「資料請求はこちら」

というボタンなら、

Click Text contains 資料請求

と設定できます。

主な用途は、

  • お問い合わせ
  • 資料請求
  • 商品を見る
  • 申し込み

などのCTAボタンです。

ただし、同じ文字が複数箇所にある場合は、Click IDやClick Classesと組み合わせると判定しやすくなります。

Form IDを使ってフォームを判定する

Form IDは、送信されたフォームのid属性を取得する変数です。

たとえば、

<form id="contact-form">

なら、

Form ID = contact-form

という条件を使えます。

これにより、

  • 問い合わせフォーム
  • 資料請求フォーム
  • 会員登録フォーム

などを区別できます。

複数フォームがあるサイトでは特に便利です。

データレイヤー変数を条件に使う

データレイヤー変数も、トリガー条件に利用できます。

たとえば、

dataLayer.push({
  'event': 'contact_complete',
  'contact_type': '資料請求'
});

という情報が送られている場合、

contact_type = 資料請求

を条件にできます。

これにより、

資料請求だけタグを発火

一般問い合わせは発火しない

といった細かな制御ができます。

複数条件を設定するときの注意点

トリガーに複数条件を設定すると、基本的にはすべての条件を満たしたときに成立します。

たとえば、

  • Page Path equals /contact/
  • Click Text contains 送信

の2条件なら、

お問い合わせページで

かつ

「送信」と書かれた要素をクリックしたとき

だけ発火します。

条件を増やしすぎると、1つでも一致しないだけでタグが発火しなくなるため注意しましょう。

初心者の方は、

  • 本当に必要な条件か
  • Variablesで実際の値を確認したか
  • equalsとcontainsを使い分けているか

を確認するとよいです。

トリガー条件で使う変数早見表

目的おすすめ変数条件例
特定ページPage URLcontains /contact/
特定パスPage Pathequals /contact/
外部リンクClick URL自サイトドメインを含まない
CTAボタンClick Textcontains 資料請求
特定フォームForm IDequals contact-form
独自条件データレイヤー変数equals 資料請求

変数をタグで使う方法

変数は、トリガー条件だけでなく、タグへ動的な値を渡すためにも使います。

たとえば、

  • クリックされたURL
  • 商品名
  • 商品価格
  • 問い合わせ種類

などをGA4イベントタグへ送ることができます。

タグへ動的な値を渡すとは?

「動的な値」とは、ページやユーザー操作によって変わる値です。

たとえば、

  • Click URL
  • Click Text
  • 商品価格
  • 商品ID

などです。

同じタグでも、ユーザーの操作によって値が変わります。

たとえば、

商品Aをクリック → product_name = 商品A

商品Bをクリック → product_name = 商品B

というように、1つのタグで異なる情報を送れます。

GA4イベントパラメータに変数を使う

GA4イベントタグでは、イベントパラメータにGTMの変数を指定できます。

たとえば、

イベント名:link_click

パラメータ名:link_url

値:{{Click URL}}

と設定します。

すると、ユーザーがクリックしたリンク先URLをGA4へ送ることができます。

このように、変数をイベントパラメータへ使うことで、イベントの詳しい内容を分析しやすくなります。


GA4イベントタグやGoogleタグの設定方法については、「Googleタグマネージャーのタグとは?基本機能と設定方法を初心者向けに解説」で詳しく紹介しています。

クリックURLをイベント値として送る例

たとえば、外部リンククリックをGA4へ送る場合です。

GTMで、

イベント名:outbound_click

パラメータ:link_url

値:{{Click URL}}

と設定します。

すると、

外部リンクをクリック

↓

Click URLがリンク先を取得

↓

タグが発火

↓

GA4へリンク先URLを送信

という流れになります。

ただし、GA4の拡張計測で外部リンククリックを自動取得している場合は、同じ内容をGTMから重複送信しないよう注意しましょう。

商品名や価格をタグへ渡す例

ECサイトなどでは、データレイヤー変数を使って商品情報をタグへ渡せます。

たとえば、

  • DLV|商品名
  • DLV|商品価格

という変数を用意します。

GA4イベントタグで、

item_name → {{DLV|商品名}}

value → {{DLV|商品価格}}

のように設定すれば、商品名や価格を動的に送れます。

これにより、商品ごとの閲覧や購入状況を分析しやすくなります。

固定値と変数を使い分ける

タグには、固定値と変数の両方を使えます。

たとえば、

固定値

  • site_type = blog
  • category = contact

変数

  • link_url = {{Click URL}}
  • product_name = {{DLV|商品名}}

という使い分けです。

考え方は、

毎回同じ値 → 固定値

状況によって変わる → 変数

です。

同じ固定値を複数タグで使う場合は、定数変数にまとめる方法もあります。

タグで変数を使うときの注意点

タグへ変数を設定するときは、値が正しく取得できているか確認しましょう。

特に、

  • 変数がundefinedになっていないか
  • 空欄になっていないか
  • dataLayerの値が先に送られているか
  • 変数名を間違えていないか
  • GA4のイベントパラメータ名が適切か
  • 二重計測になっていないか

を確認することが大切です。

たとえば、タグ発火時点で商品価格がまだdataLayerへ送られていないと、価格が取得できない場合があります。

公開前にGTMのプレビューモードで、

イベント

↓

Variables

↓

タグ

の順に確認すると、設定ミスを見つけやすくなります。

変数を使う場所早見表

使う場所変数の役割例
トリガー発火条件を判定Page URL
トリガークリック対象を判定Click Text
タグURLを送るClick URL
タグ商品情報を送るデータレイヤー変数
タグ固定値を共通利用定数

初心者の方は、

トリガーでは「判定する値」

タグでは「送る値」

として変数を使う、と覚えると整理しやすいでしょう。

変数の値を確認する方法

GTMで変数を設定したら、公開する前に実際にどの値が入っているかを確認することが大切です。

変数名や条件が正しくても、実際のページやクリック時に想定した値が取得できていなければ、トリガーやタグは正しく動きません。

特に、

  • Page URL
  • Click URL
  • Click Text
  • データレイヤー変数

などは、プレビューモードで確認しておくと安心です。

プレビューモードを起動する

まず、Googleタグマネージャーの対象コンテナを開きます。

ワークスペース右上にある**「プレビュー」**をクリックすると、Google Tag Assistantが新しいタブで開きます。

基本的な流れは、

GTMを開く

↓

「プレビュー」をクリック

↓

確認したいWebサイトのURLを入力

↓

Connectで接続

です。

Google公式でも、プレビューモードを使うと、現在のドラフト設定を公開前にテストできると案内しています。Google サポート

Tag Assistantでイベントを選択する

サイトへ接続したら、実際に確認したい操作を行います。

たとえば、

  • ページを表示する
  • 外部リンクをクリックする
  • CTAボタンを押す
  • フォームを送信する

などです。

Tag Assistantには、その操作に応じてイベントが表示されます。

変数の値はイベントごとに変わることがあるため、確認したいイベントを選ぶことが重要です。

Variablesを開く

確認したいイベントを選択したら、Tag AssistantのVariablesを開きます。

ここでは、そのイベント発生時点での変数の値を確認できます。

たとえば、

  • Page URL
  • Page Path
  • Click URL
  • Click Text
  • Click ID
  • データレイヤー変数

などです。

「設定した変数が本当に期待した値を返しているか」を確認する場所だと考えると分かりやすいでしょう。

Page URLの値を確認する

Page URLは、現在表示しているページのURLを返す組み込み変数です。Google公式でも、Page URLは現在のWebページURLを返す変数と説明されています。Google サポート

たとえば、お問い合わせページなら、

Example Domain

のような値になっているか確認します。

もしトリガー条件を、

Page URL contains /contact/

としているなら、Variables上のPage URLに本当に/contact/が含まれているかを確認しましょう。

Click URL・Click Textを確認する

クリック計測では、Click URLとClick Textの確認が特に重要です。

たとえば、

「お問い合わせはこちら」

というリンクをクリックした場合、

  • Click URL → リンク先URL
  • Click Text → お問い合わせはこちら

のようになります。

ここで想定と違う値になっている場合は、トリガー条件も見直す必要があります。

たとえば、

Click Text equals お問い合わせ

と設定しているのに、実際の値が、

お問い合わせはこちら

なら、完全一致では条件が成立しません。

データレイヤー変数を確認する

データレイヤー変数を使っている場合は、対象イベントでその値が正しく入っているか確認します。

たとえば、

dataLayer.push({
  'event': 'purchase',
  'product_name': '商品A',
  'price': 3000
});

というデータを送っているなら、Variablesで、

  • product_name → 商品A
  • price → 3000

のように取得できているか確認します。

Google公式でも、データレイヤーは値を一時的に保持し、タグ・トリガー・変数へ受け渡す仕組みと説明されています。Google サポート

undefinedと表示された場合の確認ポイント

Variablesでundefinedと表示された場合は、その時点で値を取得できていない可能性があります。

主な原因は、

  • 変数名を間違えている
  • dataLayerのキー名が違う
  • 値がまだ送られていない
  • 対象イベントを間違えている
  • 組み込み変数を有効にしていない
  • ページ側に値そのものが存在しない

などです。

たとえば、product_nameがデータレイヤーへ送られる前にタグが発火すると、その時点ではundefinedになることがあります。

初心者の方は、

イベント発生

↓

dataLayerへ値が入る

↓

変数が値を取得

↓

タグが発火

の順番を確認すると原因を探しやすいでしょう。

公開前に必ず値を確認する

変数設定が終わったら、公開前に少なくとも次の点を確認しておきましょう。

  • □ Page URLやPage Pathが正しい
  • □ Click URLやClick Textが想定どおり
  • □ データレイヤー変数がundefinedになっていない
  • □ トリガー条件と変数値が一致している
  • □ タグへ正しい値が渡されている
  • □ 不要な場所で値を使っていない

Google公式でも、GTMではPreviewからTag Assistantを起動し、公開前にコンテナ設定を検証する手順が案内されています。Google サポート

変数確認手順早見表

順番確認内容見る場所
1プレビュー開始GTM
2サイトへ接続Tag Assistant
3対象操作を実行Webサイト
4イベントを選択Tag Assistant
5変数値を確認Variables
6タグ発火を確認Tags Fired
7問題なければ公開GTM

GTMの変数設定でよくある失敗

変数が正しく動かない原因は、複雑なものばかりではありません。

多くの場合、

  • 変数の選び間違い
  • キー名の記述ミス
  • 値を取得するタイミング
  • 未確認のまま公開

などが原因です。

必要な組み込み変数を有効にしていない

Click URLやClick Textなど、一部の組み込み変数は必要に応じて有効にして使います。

たとえばクリック計測をしたいのにClick URLを有効にしていなければ、条件設定や確認がしにくくなります。

使いたい変数が見つからない場合は、まず「変数」画面で組み込み変数の設定を確認しましょう。

Google公式でも、GTMにはあらかじめ組み込み変数が用意されており、必要に応じて利用できると説明されています。Google サポート

Page URLとPage Pathを混同している

Page URLとPage Pathは似ていますが、取得する値が違います。

たとえば、

Example Domain

の場合、

  • Page URL → https://example.com/contact/
  • Page Path → /contact/

です。

そのため、

Page Path equals https://example.com/contact/

と設定すると一致しません。

初心者の方は、

URL全体 → Page URL

ドメインを除いたパス → Page Path

と覚えましょう。

Click URLとClick Textを間違えている

Click URLはリンク先URL、Click Textはクリックされた文字です。

たとえば、

「商品を見る」

というリンクなら、

  • Click URL → 商品ページのURL
  • Click Text → 商品を見る

となります。

URLで判定したいのにClick Textを使ったり、文字で判定したいのにClick URLを使うと条件が成立しません。

変数名とデータレイヤーのキー名が違う

データレイヤー変数では、GTM上の表示名と実際のキー名を混同しやすいです。

たとえば、

dataLayer.push({
  'product_name': '商品A'
});

の場合、データレイヤー変数名は、

product_name

です。

一方、GTM上の名前は、

DLV|商品名

でも構いません。

つまり、

GTM上の名前 ≠ dataLayerのキー名

という点に注意しましょう。

データレイヤーへ値が送られる前に参照している

データレイヤー変数は、値が送られた後でないと正しく取得できません。

たとえば、

タグ発火

↓

その後でproduct_nameをdataLayer.push()

という順番では、タグ発火時点で商品名を取得できません。

正しくは、

dataLayer.push()

↓

イベント発生

↓

変数が値を取得

↓

タグ発火

という流れにする必要があります。

Google公式でも、変数は実行時点で値が入るプレースホルダとして説明されています。Google サポート

undefinedのままタグを発火している

変数がundefinedのままでも、タグの設定によってはそのまま処理が進んでしまう場合があります。

すると、

  • 商品名が空欄
  • 価格が取得できない
  • イベントパラメータが欠ける

といった問題につながります。

公開前には必ずVariablesで確認し、必要な値が入っていることを確認しましょう。

同じ意味の変数を複数作っている

GTMを長く使っていると、

  • DLV|商品名
  • DLV|商品名称
  • Product Name

のように、同じ値を取得する変数を複数作ってしまうことがあります。

重複すると、

  • どれを使えばよいか分からない
  • 修正漏れが起きる
  • タグ設定が複雑になる

原因になります。

新しく変数を作る前に、既存変数を確認しましょう。

カスタムJavaScriptを必要以上に使っている

カスタムJavaScriptは便利ですが、組み込み変数やデータレイヤー変数で対応できる場合まで使う必要はありません。

Google公式では、適切に構成されたデータレイヤーから値を取得する方法を推奨しており、データモデルが整理され、トラブルシューティングもしやすくなると説明しています。Google サポート

初心者の方は、

組み込み変数

↓

データレイヤー変数

↓

その他のユーザー定義変数

↓

必要なときだけカスタムJavaScript

という順番で考えるとよいでしょう。

プレビューせずに公開している

変数を設定しただけで「正しく動くだろう」と判断して公開するのは避けましょう。

公開前には、

  • 値が正しいか
  • undefinedになっていないか
  • トリガー条件と合っているか
  • タグへ正しく値が渡っているか

を確認します。

Google公式でも、PreviewからTag Assistantを起動し、コンテナ設定を公開前に検証する方法が案内されています。Google サポート

よくある失敗と対処方法早見表

失敗主な原因確認方法
変数が表示されない未有効化組み込み変数設定
条件が一致しないPage URL・Path混同Variables
クリック判定ミスClick URL・Text混同Tag Assistant
DLVがundefinedキー名・タイミングdataLayer確認
値が取得できない参照タイミングが早いイベント順序確認
変数が重複管理不足変数一覧
設定が複雑CJS多用構成見直し
本番で誤動作未テストPreview

初心者の方は、問題が起きたら、

イベント → Variables → dataLayer → トリガー → タグ

の順で確認すると、原因を見つけやすくなります。

変数を管理しやすくする方法

Googleタグマネージャーを使い続けると、組み込み変数だけでなく、データレイヤー変数や定数、カスタムJavaScriptなどのユーザー定義変数も増えていきます。

変数が増えると、

  • どの変数を使えばよいか分からない
  • 同じ目的の変数を重複して作る
  • 古い変数を残したままにする

といった問題が起きやすくなります。

そのため、早い段階から命名ルール・用途・変更履歴を整理することが大切です。Google公式でも、ユーザー定義変数には機能が分かる説明的な名前を付けることが勧められています。 Google サポート

変数名の命名ルールを決める

ユーザー定義変数には、何をする変数なのか分かる名前を付けましょう。

たとえば、

  • DLV|商品名
  • DLV|商品価格
  • CONST|サイトID
  • CJS|URL整形

などです。

先頭に変数の種類を付けておくと、一覧を見たときに役割を判断しやすくなります。

Google公式でも、「Data Layer Variable – Product Name」のように機能が分かる命名規則を使う例が示されています。 Google サポート

組み込み変数とユーザー定義変数を区別する

GTMには、

組み込み変数

と

ユーザー定義変数

があります。

組み込み変数にはPage URLやClick URLなどがあり、自分で一から作る必要はありません。

一方、データレイヤー変数や定数などはユーザー定義変数として作成します。Google公式でも、組み込み変数で多くの用途に対応でき、必要に応じてユーザー定義変数を追加すると説明されています。 Google サポート

初心者の方は、

まず組み込み変数

↓

不足する場合だけユーザー定義変数

と考えると管理しやすいでしょう。

用途が分かる名前を付ける

変数名には、「何の値を取得するのか」が分かる言葉を入れましょう。

たとえば、

DLV|商品名

なら商品名を取得するデータレイヤー変数だとすぐ分かります。

逆に、

  • 変数1
  • テスト
  • new
  • aaa

などでは、あとから役割が分からなくなります。

おすすめは、

種類|用途

という形式です。

同じ値を使う変数を重複して作らない

新しい変数を作る前に、同じ用途の変数がすでにないか確認しましょう。

たとえば、

  • DLV|商品名
  • DLV|商品名称
  • Product Name

がすべて同じproduct_nameを取得しているなら、重複している可能性があります。

同じ意味の変数を複数作ると、

  • どれを使えばよいか迷う
  • 修正漏れが起きる
  • タグ設定が複雑になる

原因になります。

不要な変数を定期的に見直す

サイトを長く運営していると、以前使っていた変数が不要になることがあります。

定期的に、

  • テスト用変数
  • 古いイベント用変数
  • 重複した変数
  • 使われていないカスタムJavaScript

などを確認しましょう。

ただし、削除前にはタグやトリガーから参照されていないか確認することが重要です。

変更内容を公開時に記録する

変数を追加・変更した場合は、GTMの公開時にバージョン名や説明を残しておくと便利です。

たとえば、

バージョン名:商品情報変数追加

説明:DLV|商品名、DLV|商品価格を追加

のように記録します。

Google公式でも、公開・バージョン作成時にバージョン名と説明を入力でき、公開履歴を確認できる仕組みが用意されています。 Google サポート

変数管理ルール早見表

管理項目おすすめ方法
命名種類|用途
データレイヤー変数DLV|商品名
定数CONST|サイトID
カスタムJavaScriptCJS|URL整形
重複作成前に既存変数を確認
不要変数定期的に見直す
変更履歴公開時に名前・説明を残す

GTMの変数についてよくある質問

変数はいくつ作れますか?

通常のGTMウェブコンテナについて、Google公式ヘルプでは**「ユーザー定義変数は○個まで」という単純な固定上限は明確に案内されていません**。

そのため、上限数を気にするより、

  • 必要な変数だけ作る
  • 重複を避ける
  • 分かりやすい名前を付ける

ことを優先するとよいでしょう。

組み込み変数はすべて有効にした方がよいですか?

すべてを有効にする必要はありません。

組み込み変数は多く用意されていますが、実際に使うものだけ有効にすれば十分です。Google公式でも、多くの用途は組み込み変数で対応できると説明されています。 Google サポート

たとえばブログなら、

  • Page URL
  • Page Path
  • Click URL
  • Click Text
  • Event

などから始めると分かりやすいでしょう。

変数を設定しなくてもGTMは使えますか?

はい、使える場合があります。

たとえば単純なAll Pagesトリガーでタグを動かすだけなら、自分でユーザー定義変数を作らなくても設定できます。

ただし、変数を使うことで、

  • 特定ページだけ発火
  • 特定リンクだけ計測
  • 商品名や価格を送信

といった細かな制御ができるようになります。

Google公式でも、変数はトリガーの条件やタグへ渡す動的な値として使われると説明されています。 Google サポート

1つの変数を複数のタグで使えますか?

はい、使えます。

たとえば、

DLV|商品価格

という変数を、

  • GA4イベントタグ
  • 広告関連タグ

など複数のタグから参照できます。

同じ値を共有できるため、重複した変数を作る必要がありません。

1つの変数を複数のトリガーで使えますか?

はい、使えます。

たとえばPage URL変数を、

  • 商品ページ用トリガー
  • お問い合わせページ用トリガー
  • サンクスページ用トリガー

などで共有できます。

変数はタグとトリガーの両方で利用できます。 Google サポート

Page URLとPage Pathの違いは何ですか?

Page URLはページの完全なURL、Page PathはURLのパス部分です。

たとえば、

Example Domain

なら、

変数値
Page URLhttps://example.com/contact/
Page Path/contact/

です。

ページ全体のURLで判定したい場合はPage URL、ドメインを除いたパスだけで判定したい場合はPage Pathが使いやすいでしょう。Google公式でもPage PathはURLのパス部分を返す変数として定義されています。 Google サポート

変数がundefinedになるのはなぜですか?

undefinedになる主な原因は、

  • 値がまだ存在していない
  • dataLayerへの送信前に参照している
  • キー名を間違えている
  • 変数名の指定が違う
  • 対象イベントを間違えている

などです。

Tag Assistantのプレビューモードでイベントを確認し、変数がどのタイミングで値を持っているか確認しましょう。Google公式でも、プレビューとデバッグ機能を使って公開前にタグや処理内容を確認できます。 Google サポート

データレイヤー変数は必ず必要ですか?

いいえ、必ず必要というわけではありません。

Page URLやClick URLなどで十分な場合は、組み込み変数だけで対応できます。

一方、

  • 商品名
  • 商品価格
  • 問い合わせ種類
  • 独自イベント情報

など、サイト独自の値を扱う場合はデータレイヤー変数が便利です。

Google公式でも、まず組み込み変数を利用し、必要に応じてユーザー定義変数を使う考え方が示されています。 Google サポート

WordPressでも変数を使えますか?

はい、使えます。

WordPressサイトにGTMコンテナが正しく設置されていれば、

  • Page URL
  • Click URL
  • Click Text
  • データレイヤー変数

などを利用できます。

WordPressだから特別な変数が必要になるわけではありません。

Cocoonでも変数を設定できますか?

はい、Cocoonを利用しているWordPressサイトでもGTMの変数は使えます。

重要なのは、

  • GTMコンテナが正しく設置されている
  • 二重設置になっていない
  • Tag Assistantで正しく接続できる

ことです。

変数自体はGTM側で管理するため、Cocoon専用の変数を作る必要はありません。

変数を削除すると過去のGA4データも消えますか?

通常、GTM側の変数を削除しただけで、すでにGA4へ送信・保存された過去データが消えることはありません。

たとえば、

9月まで商品名をGA4へ送信

↓

10月にGTMの変数を削除

した場合、9月までにGA4へ保存されたデータがGTMの変数削除だけで消えるわけではありません。

ただし、削除後はその変数を利用したタグやトリガーが期待どおり動かなくなる可能性があります。

そのため、削除前には、

  • どのタグで使われているか
  • どのトリガーで使われているか

を確認しましょう。

変数FAQ早見表

質問答え
何個作れる?単純な固定上限は公式に明示されていない
全部有効にする?必要なものだけでよい
変数なしでも使える?可能な設定もある
1変数を複数タグで使える?可能
1変数を複数トリガーで使える?可能
Page URLとPathの違い完全URLとパス部分
undefinedになる理由値・キー・タイミングなどを確認
DLVは必須?必要な場合のみ
WordPressで使える?利用可能
Cocoonで使える?利用可能
削除で過去GA4データも消える?通常は消えない

GTMの変数はタグとトリガーをつなぐ重要な仕組み

Googleタグマネージャーの変数は、タグやトリガーで使う値を取得・受け渡しするための重要な仕組みです。

Page URLやClick URLなどの組み込み変数を使えば、ページやクリックの情報を簡単に利用できます。さらに、データレイヤー変数や定数、カスタムJavaScriptなどのユーザー定義変数を使えば、商品名や価格、独自の値まで柔軟に扱えます。

初心者の方は、まず組み込み変数を使い、必要な場合だけユーザー定義変数を追加すると理解しやすいでしょう。

今日覚えておきたい重要ポイント3つ

この記事で特に覚えておきたいポイントは、次の3つです。

  • 変数はタグやトリガーで使う値を取得する
  • 組み込み変数とユーザー定義変数を目的に合わせて使い分ける
  • 公開前にプレビューモードで変数の値を確認する

初心者の方は、

変数=値を取得する

トリガー=条件を判定する

タグ=処理を実行する

と覚えると、GTM全体の仕組みを整理しやすくなります。

タグ・トリガー・変数の関係早見表

項目役割具体例
タグデータ送信や処理を実行GA4イベントタグ
トリガータグを発火させる条件クリック、ページビュー
変数条件判定や送信に使う値Page URL、Click URL
データレイヤー値やイベントを受け渡す商品名、価格など

たとえば、外部リンクをクリックした場合は、

Click URLでリンク先を取得

↓

トリガーが外部リンクか判定

↓

条件一致

↓

GA4イベントタグが発火

という流れになります。

組み込み変数・ユーザー定義変数の違い

GTMの変数は、大きく2種類に分けられます。

項目組み込み変数ユーザー定義変数
用意されている場所GTMに標準搭載自分で作成
設定の手間少ない必要
主な用途URL・クリック・フォームなど独自データ・固定値など
代表例Page URL、Click Textデータレイヤー変数、定数
初心者向け使いやすい必要に応じて利用

初心者の方は、

まず組み込み変数

↓

足りない場合にユーザー定義変数

という順番で使うと設定を複雑にしすぎずに済みます。

主な変数の種類一覧

代表的な変数を整理すると、次のようになります。

変数主な用途
Page URL現在ページの完全URL
Page PathURLのパス部分
Click URLクリック先URL
Click Textクリック文字
Form IDフォーム識別
Scroll Depth Thresholdスクロール到達値
Video Percent動画再生割合
データレイヤー変数商品名・価格など
定数固定値
JavaScript変数既存JS変数の取得
カスタムJavaScript独自処理で値を作成
DOM要素HTML要素から値を取得

すべてを一度に覚える必要はありません。

まずは、

  • Page URL
  • Page Path
  • Click URL
  • Click Text

あたりから使い始めると分かりやすいでしょう。

ユーザー定義変数の作成手順早見表

ユーザー定義変数は、次の流れで作成します。

手順操作
1GTMの対象コンテナを開く
2「変数」をクリック
3ユーザー定義変数の「新規」を選択
4変数名を入力
5変数のタイプを選択
6必要な値やキー名を入力
7保存
8タグ・トリガーで利用
9プレビューで値を確認
10問題がなければ公開

たとえば商品名を取得するなら、

DLV|商品名

という変数を作成し、

データレイヤー変数名:product_name

と設定する方法があります。

変数設定チェックリスト

変数を設定したら、公開前に次の項目を確認しておきましょう。

  • □ 目的に合った変数を選んでいる
  • □ 組み込み変数で対応できないか確認した
  • □ ユーザー定義変数の名前が分かりやすい
  • □ Page URLとPage Pathを混同していない
  • □ Click URLとClick Textを正しく使い分けている
  • □ データレイヤーのキー名が正しい
  • □ 値を取得するタイミングが正しい
  • □ Variablesで期待した値が表示される
  • □ undefinedになっていない
  • □ 不要な変数を重複して作っていない
  • □ カスタムJavaScriptを必要以上に使っていない
  • □ プレビューで確認してから公開する

特にデータレイヤー変数は、キー名・イベント発生順・値を取得するタイミングを確認することが大切です。

次に読むおすすめGTM関連記事

変数について理解できたら、次はGTM全体の仕組みやトリガーとの関係も確認しておくと理解が深まります。


「Googleタグマネージャー完全ガイド|導入からタグ設定まで初心者向けに徹底解説」

→ GTMの導入、タグ・トリガー・変数、プレビュー、公開まで全体をまとめて確認したい方におすすめです。


「Googleタグマネージャーのトリガーとは?作成方法と使い方をわかりやすく解説」

→ 変数の値をトリガー条件に使う方法や、クリック・フォーム送信・スクロールなどの発火条件を詳しく確認できます。

参考元:

  • Googleタグマネージャー ヘルプ
  • Google Analytics ヘルプ
  • Googleタグ関連の公式ドキュメント

※Google公式情報を中心に、組み込み変数・ユーザー定義変数・データレイヤー・プレビュー確認などの仕様を確認しているため、信頼性は高い内容です。

まとめ

Googleタグマネージャーの変数は、タグやトリガーで使う値を取得・保持する重要な仕組みです。Page URLやClick Textなどの組み込み変数に加え、データレイヤー変数や定数、カスタムJavaScriptなどのユーザー定義変数も利用できます。初心者の方は、まず組み込み変数から覚え、必要に応じてユーザー定義変数を追加すると理解しやすいでしょう。設定後はプレビューで値を確認し、正しく取得できていることを確認してから公開することが大切です。

タイトルとURLをコピーしました