GTMの変数とは？種類や役割、使い方をわかりやすく解説
Googleタグマネージャーを使っていると、「変数」という項目を目にすることがあります。
タグやトリガーと並んで表示されているものの、
「変数は何のために使うの？」
「組み込み変数とユーザー定義変数は何が違うの？」
と迷う方もいるのではないでしょうか。
GTMの変数は、ページのURLやクリックされた文字、GA4へ送信する値など、タグの設定に必要な情報を取得・保存するためのものです。
変数を理解すると、同じ情報を何度も入力する手間を減らしたり、Webサイト上で発生した操作に応じて、必要な値を使い分けたりできるようになります。
この記事では、GTMの変数とは何か、組み込み変数とユーザー定義変数の違い、よく使われる変数の種類や設定方法、プレビューモードでの確認方法について解説します。
INDEX
GTMの変数とは？
GTMの変数とは、タグなどで使用する値を取得し、一時的に保持するための仕組みです。
Googleの公式ヘルプでは、変数はタグやトリガーで利用できる値を保存する「プレースホルダ」と説明されています。
たとえば、次のような情報を変数として扱えます。
現在表示しているページのURL
ページのタイトル
クリックされたリンクのURL
クリックされたボタンの文字
GA4へ送信する値
dataLayerへ追加された商品名や資料名
変数は、必要な情報を入れておく「箱」のようなものと考えるとイメージしやすいでしょう。
たとえば、「Page URL」という変数には、現在表示しているページのURLが入ります。
トップページを表示しているときはトップページのURL、サービスページを表示しているときはサービスページのURLというように、閲覧しているページに応じて値が変わります。
このように、GTMの変数には、あらかじめ決めた固定の値を保存するものと、Webサイトの状況に応じて値が変わるものがあります。
GTMの変数は何に使う？
GTMの変数は、Webサイト上の情報を取得したり、タグから送信する値を指定したりするときに使います。
ページやクリックの情報を取得する
GTMでは、変数を使って現在表示しているページや、クリックされた要素の情報を取得できます。
たとえば、次のような変数があります。
Page URL：現在表示しているページのURL
Page Path：URLのドメインより後ろの部分
Page Title：現在表示しているページのタイトル
Click URL：クリックされたリンクのURL
Click Text：クリックされた文字
Click Classes：クリックされた要素のclass属性
これらの変数を使うことで、どのページが表示されたのか、どのリンクやボタンがクリックされたのかを判別しやすくなります。
タグから送信する値として使う
変数は、GA4などへ送信する値としても使用できます。
たとえば、資料ダウンロードを計測するときに、クリックされた資料名を変数で取得してGA4へ送信すれば、どの資料がダウンロードされたのかを確認できます。
ページや操作によって変わる情報を変数として設定することで、1つのタグから異なる値を送信することも可能です。
繰り返し使う値をまとめて管理する
複数の設定で同じ値を使う場合、その値を変数として登録しておくと管理しやすくなります。
たとえば、複数のタグで共通して使用する文字列やIDを「定数」変数として登録しておけば、タグごとに同じ値を入力する必要がありません。
値を変更するときも、変数の設定を修正することで、その変数を使用している箇所へまとめて反映できます。
GTMの変数には2つの種類がある
GTMの変数は、大きく次の2つに分けられます。
組み込み変数
ユーザー定義変数
組み込み変数は、GTMにあらかじめ用意されている変数です。
一方、ユーザー定義変数は、計測したい内容やWebサイトの仕様に合わせて自分で作成する変数です。
種類 | 特徴 | 例 |
|---|---|---|
組み込み変数 | GTMにあらかじめ用意されている | Page URL、Click Text、Form ID |
ユーザー定義変数 | 用途に合わせて自分で作成する | 定数、データレイヤー変数、DOM要素変数 |
組み込み変数ですべての情報を取得できるわけではありません。
GTMに用意されていない値を扱いたい場合は、ユーザー定義変数を作成します。
組み込み変数とは？
組み込み変数とは、GTMにあらかじめ用意されている変数です。
ページのURLやクリックされた要素、フォームなど、Webサイト上で発生する基本的な情報を取得できます。
組み込み変数は、必要なものをGTMの管理画面で有効にして使用します。
主な組み込み変数は、次のような種類に分けられています。
種類 | 取得できる情報 |
|---|---|
ページ | URL、ホスト名、パス、参照元など |
ユーティリティ | イベント名、コンテナID、デバッグ状態など |
エラー | エラーメッセージ、エラーが発生したURLなど |
クリック | クリックされた要素、URL、文字など |
フォーム | フォームのID、送信先、文字など |
履歴 | URLや履歴の変更に関する情報 |
動画 | YouTube動画のタイトル、再生時間、再生率など |
スクロール | スクロールした方向や到達率など |
表示 | 要素が表示された割合や時間など |
すべての組み込み変数を最初から使用する必要はありません。
どのような操作を計測するのかに合わせて、必要な変数を有効にします。
よく使われる組み込み変数
ここでは、Webサイトの計測で使われることが多い組み込み変数を紹介します。
Page URL
「Page URL」は、現在表示しているページのURLを取得する変数です。
たとえば、次のページを表示している場合、
https://example.com/service?plan=pro
Page URLには、URL全体が入ります。
ページごとに設定を分けたいときや、現在表示しているURLをGA4へ送信したいときなどに使われます。
Page Path
「Page Path」は、URLのうちドメイン名より後ろの部分を取得します。
先ほどのURLの場合、Page Pathの値は次のようになります。
/service
URLにパラメータが付いている場合でも、ページの場所だけを使って判別したいときに便利です。
Page Title
「Page Title」は、現在表示しているページのタイトルを取得する変数です。
ブラウザのタブなどに表示される、HTMLのtitle要素の内容が値として入ります。
ページタイトルをGA4へ送信したり、プレビューモードで表示中のページを確認したりするときに利用できます。
Click URL
「Click URL」は、クリックされたリンクの移動先URLを取得する変数です。
外部サイトへのリンクや、PDFファイルへのリンクがクリックされたことを計測するときなどに使われます。
ただし、リンクではないボタンをクリックした場合は、Click URLに値が入らないことがあります。
Click Text
「Click Text」は、クリックされた要素に表示されている文字を取得する変数です。
たとえば、「資料をダウンロードする」というボタンがクリックされた場合、その文字を値として取得できることがあります。
ただし、ボタン内のHTML構造やクリックされた位置によっては、想定した文字を取得できない場合があります。
使用する前に、プレビューモードで実際の値を確認することが大切です。
Click ID・Click Classes
「Click ID」はクリックされた要素のid属性、「Click Classes」はclass属性を取得します。
Webサイト側でボタンやリンクに分かりやすいidやclassが設定されている場合、要素を判別するために利用できます。
一方で、Webサイトの修正によってidやclassが変更されると、GTMの設定にも影響する可能性があります。
GTMで組み込み変数を有効にする方法
使用したい組み込み変数が表示されていない場合は、GTMの管理画面から有効にします。
1．GTMの「変数」を開く
Googleタグマネージャーへログインし、対象のコンテナを開きます。
左側のメニューから「変数」をクリックしてください。
画面上部に「組み込み変数」、下部に「ユーザー定義変数」が表示されます。
2．「設定」をクリックする
「組み込み変数」の右側にある「設定」をクリックします。
利用できる組み込み変数の一覧が表示されます。
3．使用する変数にチェックを入れる
使用したい変数の左側にあるチェックボックスを選択します。
たとえば、リンクのクリックを確認するときは、次のような変数を有効にします。
Click Element
Click Classes
Click ID
Click Target
Click URL
Click Text
チェックを入れると、その変数が組み込み変数の一覧へ追加されます。
組み込み変数には保存ボタンはありません。
チェックを入れると、自動的に有効になります。
ユーザー定義変数とは？
ユーザー定義変数とは、用途に合わせて自分で作成する変数です。
組み込み変数では取得できない情報を扱いたいときや、複数のタグで共通して使う値を管理したいときに利用します。
GTMでは、さまざまな種類のユーザー定義変数を作成できます。
代表的なものは次のとおりです。
変数の種類 | 主な用途 |
|---|---|
定数 | 固定の文字列や値を保存する |
データレイヤーの変数 | dataLayerへ追加された値を取得する |
URL | URLの一部分を取得する |
自動イベント変数 | クリックなどで発生した情報を取得する |
DOM要素 | Webページ内の要素から値を取得する |
ファーストパーティCookie | WebサイトのCookieから値を取得する |
カスタムJavaScript | JavaScriptを使って値を返す |
ユーザー定義変数は便利ですが、種類によってはWebサイトの構造やJavaScriptの知識が必要になります。
まずは定数やデータレイヤー変数など、用途を理解しやすいものから使うとよいでしょう。
よく使われるユーザー定義変数
定数
「定数」は、あらかじめ設定した固定の値を返す変数です。
たとえば、複数のタグで共通して使用する文字列やIDを登録しておくと、設定をまとめて管理できます。
定数へ次の値を設定したとします。
service_document
タグの設定画面でこの変数を選択すると、常にservice_documentという値が使用されます。
ただし、タグへ直接入力できる値まで、すべて変数にする必要はありません。
複数の設定で繰り返し使う値や、後から変更する可能性がある値をまとめるときに向いています。
データレイヤー変数
「データレイヤー変数」は、dataLayerへ追加された値をGTMで取得するための変数です。
たとえば、Webサイトから次の情報がdataLayerへ送信されたとします。
dataLayer.push({ event: 'download_document', document_name: 'サービス資料' });
document_nameをデータレイヤー変数として作成すると、「サービス資料」という値をGTMで取得できます。
取得した値は、GA4イベントのパラメータなどに設定できます。
dataLayerとデータレイヤー変数の詳しい仕組みについては、以下の記事で解説しています。
「dataLayerとは？GTMでデータを受け渡す仕組みと使い方を解説」
URL変数
「URL」変数は、URLから必要な部分だけを取り出すときに使います。
たとえば、URLに付いている次のようなクエリパラメータを取得できます。
https://example.com/?utm_source=newsletter
URL変数でクエリキーにutm_sourceを指定すると、newsletterという値を取得できます。
DOM要素変数
「DOM要素」変数は、Webページ上に表示されている要素から文字や属性値を取得する変数です。
たとえば、ページ内の商品名や会員ランクなど、特定の場所に表示されている情報を取得するときに使われます。
ただし、WebサイトのHTML構造が変更されると、値を取得できなくなる可能性があります。
画面に表示されている情報だからといって、必ず安定して取得できるとは限りません。
Webサイト側から情報を受け渡せる場合は、dataLayerの利用も検討しましょう。
カスタムJavaScript変数
「カスタムJavaScript」は、JavaScriptを使って値を加工したり、条件に応じた値を返したりする変数です。
ほかの変数では対応できない処理を行える一方で、コードの内容に誤りがあると、正しい値を取得できません。
また、Webサイトの仕様変更によって動かなくなることもあります。
カスタムJavaScript変数を使用するときは、どのような処理をしているのかを記録し、プレビューモードで十分に確認しましょう。
GTMでユーザー定義変数を作成する方法
ここでは、固定の値を保存する「定数」を例に、ユーザー定義変数の作成方法を紹介します。
1．GTMの「変数」を開く
GTMの左側メニューから「変数」をクリックします。
画面下部にある「ユーザー定義変数」の「新規」を選択してください。
2．「変数の設定」をクリックする
新しい変数の作成画面が表示されたら、中央にある「変数の設定」をクリックします。
画面右側に、選択できる変数タイプの一覧が表示されます。
3．「定数」を選択する
変数タイプの一覧から「定数」を選択します。
「値」の入力欄が表示されるため、変数として保存したい値を入力してください。
今回は例として、次の値を入力します。
service_document
4．変数に名前を付ける
画面上部に、変数の内容が分かる名前を入力します。
たとえば、次のような名前です。
定数 - 資料名
変数が増えても種類を見分けられるように、「定数」「DLV」「URL」など、変数タイプが分かる名前を付けておくと管理しやすくなります。
5．変数を保存する
設定内容を確認し、画面右上の「保存」をクリックします。
作成した変数が、ユーザー定義変数の一覧に追加されます。
作成した変数はどのように使う？
作成した変数は、タグなどの値を入力する画面から選択できます。
GTMで変数を参照するときは、次のように二重の波括弧で表示されます。
{{定数 - 資料名}}
入力欄の右側に表示される変数アイコンをクリックすると、使用できる変数の一覧が開きます。
そこから目的の変数を選択すると、入力欄へ設定されます。
変数名を二重の波括弧で囲んで直接入力することもできますが、表記が異なると正しく参照されません。
変数アイコンから選択すると、入力間違いを防ぎやすくなります。
変数の値をプレビューモードで確認する方法
変数を有効化・作成したら、想定した値を取得できているかプレビューモードで確認します。
1．GTMの「プレビュー」をクリックする
GTMの画面右上にある「プレビュー」をクリックします。
確認するWebサイトのURLを入力し、「リンク」を選択してください。
接続が完了すると、確認対象のWebサイトとTag Assistantが開きます。
2．確認したい操作を行う
Webサイト上で、変数の値を確認したい操作を行います。
クリックに関する変数を確認する場合は、対象のボタンやリンクをクリックします。
ページに関する変数を確認する場合は、対象のページを表示してください。
3．Tag Assistantでイベントを選択する
Tag Assistantへ戻り、左側に表示されているイベント一覧から、確認したいタイミングのイベントを選択します。
たとえば、リンククリックの情報を確認するときは、「Link Click」などのクリックに関するイベントを選択します。
4．「Variables」を確認する
イベントを選択した状態で、画面上部の「Variables」を開きます。
そのイベントが発生した時点での変数名、変数の種類、取得した値などが表示されます。
たとえば、次のような値を確認します。
Page URLに現在のURLが入っているか
Click URLにリンク先URLが入っているか
Click Textに想定した文字が入っているか
作成したユーザー定義変数に値が入っているか
変数の値がundefinedになっている場合は、その時点で値を取得できていません。
変数の設定やWebサイト側の情報、確認しているイベントが正しいかを見直しましょう。
GTMの変数を設定するときの注意点
変数名だけで内容が分かるようにする
GTMでは、設定が増えるにつれて変数の数も増えていきます。
「変数1」「テスト」などの名前では、後から見たときに用途を判断できません。
次のように、変数の種類と取得する内容が分かる名前を付けると管理しやすくなります。
DLV - document_name
定数 - 資料カテゴリー
URL - utm_source
DOM - 商品名
複数人でGTMを管理する場合は、命名ルールを決めて共有しておきましょう。
値が取得できるタイミングを確認する
変数は、常に同じ値を返すとは限りません。
ページを表示した時点では値が入っておらず、クリックやdataLayerへの情報追加が行われた後に値が入ることもあります。
プレビューモードでは、左側のイベントを切り替えると、その時点での変数の値を確認できます。
どのイベントで値が入るのかを確認してから設定へ使用しましょう。
undefinedのまま使用しない
プレビューモードで変数の値がundefinedと表示されている場合は、値を取得できていません。
主に次のような原因が考えられます。
変数名の入力が間違っている
dataLayerへ値が送信されていない
確認しているイベントが異なる
対象のHTML要素が存在しない
変数を有効にしていない
Webサイトの構造が変わった
値が取得できていない状態でタグへ設定すると、GA4へ必要な情報を送信できない可能性があります。
公開前に、必ずプレビューモードで確認しましょう。
不要な変数を増やしすぎない
変数を使うと設定をまとめやすくなりますが、すべての値を変数として作成すると、かえって管理が複雑になることがあります。
一度しか使わない固定値や、タグへ直接入力した方が分かりやすい値まで、無理に変数へ置き換える必要はありません。
次のような値を変数にすると管理しやすくなります。
複数の設定で繰り返し使用する
ページや操作によって値が変わる
Webサイトから取得する必要がある
後から変更する可能性がある
変数を作成する前に、どこで何のために使うのかを整理しておきましょう。
個人を特定できる情報をGA4へ送らない
変数では、Webサイト上のさまざまな情報を取得できます。
ただし、取得できる情報であっても、すべてGA4へ送信してよいわけではありません。
メールアドレス、氏名、電話番号など、個人を特定できる情報をGA4へ送信しないようにしましょう。
フォームや会員ページの情報を変数で扱う場合は、取得する値と送信先を事前に確認することが大切です。
GTMの変数に関するよくある質問
組み込み変数はすべて有効にした方がよいですか？
すべての組み込み変数を有効にする必要はありません。
計測したい内容に合わせて、必要な変数を有効にしましょう。
たとえば、リンククリックを計測する場合はクリックに関する変数、フォーム送信を確認する場合はフォームに関する変数を有効にします。
どの変数が必要か分からない場合は、対象となる種類の変数を有効にし、プレビューモードで取得できる値を確認すると判断しやすくなります。
組み込み変数とユーザー定義変数の違いは何ですか？
組み込み変数は、GTMにあらかじめ用意されている変数です。
Page URLやClick Textなど、Webサイト上の基本的な情報を取得できます。
ユーザー定義変数は、用途に合わせて自分で作成する変数です。
固定値を保存する定数や、dataLayerの値を取得するデータレイヤー変数などがあります。
変数を作成しただけでGA4へデータが送信されますか？
変数を作成しただけでは、GA4へデータは送信されません。
変数は、値を取得・保存するための仕組みです。
取得した値をGA4へ送るには、GA4へデータを送信するタグなどの設定で、その変数を使用する必要があります。
変数の値はどこで確認できますか？
GTMのプレビューモードで確認できます。
Tag Assistantで対象のイベントを選択し、「Variables」を開くと、その時点での変数の値が表示されます。
同じ変数でも、選択するイベントによって値が異なることがあります。
確認したい操作が発生したタイミングのイベントを選びましょう。
変数にundefinedと表示されるのはなぜですか？
undefinedは、その時点で変数の値を取得できていない状態です。
変数名の間違いや、dataLayerへの値の追加漏れ、確認するイベントの違いなどが考えられます。
変数の設定だけでなく、Webサイト側に取得対象の情報が存在するかも確認しましょう。
まとめ
GTMの変数は、タグなどで使用する値を取得し、一時的に保持するための仕組みです。
変数を使うと、次のような情報を扱えます。
現在表示しているページのURL
ページのタイトル
クリックされたリンクや文字
dataLayerへ追加された値
複数の設定で共通して使う固定値
GTMの変数には、あらかじめ用意されている「組み込み変数」と、用途に合わせて作成する「ユーザー定義変数」があります。
まずはPage URLやClick URLなどの組み込み変数を有効にし、プレビューモードの「Variables」で、どのような値が取得されるのか確認してみましょう。
ユーザー定義変数を作成するときは、変数の種類と用途が分かる名前を付け、公開前に想定した値が取得できているか確認することが大切です。
このブログでは、GA4の設定方法だけでなく、
「どこを見ればいいのか」
「数字をどう読み取ればいいのか」
といった、次の一歩に気づくための視点もお届けしていきます。