GTMのデータレイヤー変数の作り方｜dataLayerの値をタグで使う方法｜未経験から100日後にGTMのプロになる話【Day 12】

前回、dataLayer.pushでイベントをGTMに通知する方法を扱いました。ただイベントを検知できるだけでは半分で、pushされたデータの中身（注文IDや金額など）をタグに渡せて初めて意味のある計測になります。それを担うのが「データレイヤー変数」です。

例えば、購入完了時にサイト側でこうpushされているとします。

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

1. 「変数」→「新規」→種類は「データレイヤーの変数」
2. 「データレイヤーの変数名」に、pushされたキー名をそのまま入力（例：transaction_id）
3. 変数名を「DLV - Transaction ID」のように分かる名前で保存
4. 同様にtotal_priceも「DLV - Total Price」として作成

ここでのポイントは、「データレイヤーの変数名」欄にはpushされたオブジェクトのキー名と一字一句同じ文字列を入れる必要がある点です。大文字小文字やスペルが1つでも違うと値が取得できません。開発者から仕様をもらったら、コピー&ペーストで転記するくらい慎重に扱ってください。

GA4の購入イベントタグに渡す

作成したデータレイヤー変数は、GA4イベントタグのイベントパラメータとして使えます。「Google アナリティクス: GA4 イベント」タグでイベント名をpurchaseにし、パラメータにtransaction_id={{DLV - Transaction ID}}、value={{DLV - Total Price}}、currency=JPYを設定します。

ここで実務上さらに一歩踏み込んでおきたいのが「items」です。GA4のeコマースレポート（商品別の売上など）を正しく機能させるには、transaction_idやvalueだけでなく、購入した商品ごとの情報（商品ID・商品名・価格・数量）を配列で持つitemsというキーが必要です。開発者に実装を依頼する際は、単一の合計金額だけでなくecommerce.itemsのような商品配列も一緒にpushしてもらうよう、最初の設計段階で伝えておくと後戻りが少なくなります。この配列を丸ごとGA4タグに渡す場合は、データレイヤー変数名にecommerce.itemsのようにドット区切りでネストしたキーを指定できます。

プレビューモードでの確認

プレビューモードの「データレイヤー」タブで、pushされたオブジェクトの中身をそのまま確認できます。変数がうまく値を拾えていない場合、ほとんどのケースはキー名の表記ゆれか、pushのタイミング（Day11で触れた「イベントとデータは同じpushにまとめる」ルール）が原因です。

今日のまとめ

データレイヤー変数は、dataLayerに流れてきた値をGTM内の「部品」として名前を付けて取り出す仕組みです。キー名の一致とpushのタイミングさえ守れば、購入金額のような単純な値も、商品配列のような複雑な構造も扱えます。次回は、DOM要素やJavaScript変数を使って、ページ上の情報を直接GTMで取得する方法を見ていきます。