未経験から100日後にGTMのプロになる話【Day 13】 〜DOM要素変数とJavaScript変数の活用 〜ページの情報をGTMで取得する〜〜

■ なぜDOM要素変数やJavaScript変数が必要なのか？

例えば、こんなケースで困ったことはありませんか？

✅ 「ページ内のH1タイトルを取得して、イベントに追加したい！」
✅ 「ボタンの属性（classやid）を変数として取得したい！」
✅ 「ユーザーのログイン状態を判定して、タグの発火を制御したい！」

こういった情報は dataLayer.push() がなくても、GTMの 「DOM要素変数」 や 「JavaScript変数」 を使えば取得できます。

では、それぞれの違いを理解しながら、実際に設定してみましょう！

① DOM要素変数とは？

DOM要素変数は、ページ内の特定のHTML要素の値を取得 するための変数です。

例えば、ページ内に次のHTMLがあるとします。 ```html

GTMの使い方

`` このh1` 要素のテキスト「GTMの使い方」を取得したい場合、DOM要素変数を使えば簡単に取得できます。

1. DOM要素変数を作成する

1. GTMの「変数」メニューを開く。
2. 「新規」をクリックし、変数の種類を「DOM要素」に設定。
3. 「選択方法」で ID を選択し、入力欄に page-title と記入。
4. 変数名を「DOM - ページタイトル」として保存。

✅ これで、「ページタイトル」のテキストを取得できるようになりました！

② JavaScript変数とは？

JavaScript変数は、ページ内のJavaScriptコードを実行し、その結果をGTMで取得できる変数です。

例えば、サイトに次のスクリプトがあったとします。 ```javascript

`` このuserInfo.userId` をGTMで取得するには、JavaScript変数を使います。

1. JavaScript変数を作成する

1. GTMの「変数」メニューを開く。
2. 「新規」をクリックし、変数の種類を「JavaScript変数」に設定。
3. 「変数名」に userInfo.userId を入力。
4. 変数名を「JS - ユーザーID」として保存。

✅ これで、「ログインユーザーのID」を取得できるようになりました！

③ 変数をGA4のイベントタグで活用する

作成した変数をGA4のタグに追加し、計測データとして送信してみましょう。

1. GA4のイベントタグを作成する

1. GTMの「タグ」メニューを開く。
2. 「新規」をクリックし、タグの種類を「Google アナリティクス: GA4 イベント」に設定。
3. 「設定タグを選択」で、すでに作成したGA4設定タグを選択。
4. 「イベント名」を page_interaction にする。

2. イベントパラメータを設定する

1. 「イベントパラメータを追加」ボタンをクリック。
2. 以下のパラメータを追加。
3. パラメータ名: page_title（値: {{DOM - ページタイトル}}）
4. パラメータ名: user_id（値: {{JS - ユーザーID}}）
5. 保存。

✅ これで、ページタイトルとユーザーIDをGA4に送信できるようになりました！

④ プレビューモードで動作確認

1. GTMの「プレビュー」を開く。
2. 計測対象のサイトを開く。
3. デバッグツールの「Variables」タブを確認し、 DOM - ページタイトル と JS - ユーザーID の値が取得できているかチェック。
4. 「Tags Fired（発火したタグ）」にGA4のイベントタグがあるか確認。
5. GA4のリアルタイムレポートで page_interaction が記録されているか確認。

✅ 問題なくデータが送信されていることを確認したら、GTMの「送信」ボタンを押して公開！

■ まとめ 〜DOM要素変数とJavaScript変数を使いこなそう！〜

今回の学びを整理すると...

✅ DOM要素変数を使えば、ページ内の特定のテキストや属性を取得できる！
✅ JavaScript変数を使えば、サイトのJavaScriptオブジェクトの値を取得できる！
✅ 変数をGA4のタグに設定すれば、詳細なイベントデータを送信できる！
✅ 「プレビューモード」でテストし、問題なければ公開する！

この設定を活用すれば、より細かいユーザー行動の計測が可能になります。

例えば... - ページタイトルをGA4のイベントに含める - ログインしているユーザーのIDをトラッキングする - クリックされたボタンのテキストを取得してイベント名に反映する

など、自由な計測ができるようになります！

■ 明日の予告 〜GA4のイベント計測（基本編）〜

次回は、GA4のイベント計測をより詳しく解説します！

「イベントパラメータの活用」「カスタム定義の登録」など、GA4のデータをもっと有効活用する方法を学びます。

明日も引き続き、GTMの実践スキルを磨いていきましょう！