GTMのDOM要素変数とJavaScript変数の使い方｜ページ情報の取得とuser_idの注意点｜未経験から100日後にGTMのプロになる話【Day 13】

「開発者にdataLayer.pushを頼むほどではないけど、ページ内のこの情報だけ拾いたい」ということがよくあります。ページのタイトルテキスト、ボタンの属性、すでにページに埋め込まれているJavaScriptの値――これらはdataLayer.push()なしで、GTM単体でも取得できます。

DOM要素変数：ページ上の要素の中身を取る

ページ内に<h1 id="page-title">GTMの使い方</h1>のような要素があるとき、DOM要素変数を使えばそのテキストを取得できます。

1. 「変数」→「新規」→種類は「DOM要素」
2. 「選択方法」で「ID」を選び、page-titleと入力
3. 変数名を「DOM - ページタイトル」として保存

選択方法には「ID」のほかに「CSSセレクタ」もあります。CSSセレクタを使う場合、同じセレクタに一致する要素が複数あると最初の1つしか取れないので、なるべく一意に絞れるセレクタを選んでください。また、既定では要素のテキストを取得しますが、「属性」を指定すればdata-priceのようなカスタム属性の値を取ることもできます。

JavaScript変数：すでにある値を読みに行く

サイト側にwindow.userInfo = { userId: '12345', isLoggedIn: true };のようなグローバル変数が定義されているなら、JavaScript変数タイプでuserInfo.userIdと指定するだけで値を取得できます。

ここで注意したいのは評価のタイミングです。JavaScript変数は、タグやトリガーがその変数を必要とした「その瞬間」にwindowオブジェクトを見に行きます。もしwindow.userInfoを定義するスクリプトが非同期で後から読み込まれる場合、GTMのタグがそれより先に発火すると値はundefinedになります。「変数の値が取れたり取れなかったりする」という相談は、大体このロード順の問題です。プレビューモードの「Variables」タブで、狙ったタイミングで値が入っているか確認してください。

GA4に送るときの注意：user_idは要注意ワード

ここで1つ、実務で誤解が多いポイントを共有します。JavaScript変数で取得したユーザーIDを、GA4イベントタグの「イベントパラメータ」としてuser_idという名前で送っても、それはGA4の「ユーザーID機能」（クロスデバイスでの同一ユーザー判定に使われる、GA4が特別扱いする仕組み）には反映されません。ただの独自パラメータとして送られるだけです。GA4のUser-ID機能を本当に使いたい場合は、GA4設定タグの「フィールドを設定」または「ユーザープロパティ」側でuser_idを明示的に指定する必要があります。名前が同じだからといって同じ機能だと思い込まないよう注意してください。

今日のまとめ

DOM要素変数は「見えているテキスト」を、JavaScript変数は「すでにある値」を取りに行く変数です。どちらも便利ですが、取得タイミングの罠と、GA4側の予約語との混同には気をつけてください。次回は、GA4のイベント計測そのものをもう少し体系的に整理します。