未経験から100日後にGTMのプロになる話【Day 12】 〜データレイヤー変数の活用 〜dataLayerから情報を引き出せ！〜〜

■ データレイヤー変数とは？

GTMでは dataLayer にデータを送信できますが、そのデータをタグ内で活用するには「データレイヤー変数」を設定する必要があります。

例えば、次のような dataLayer.push() がサイト内で実行されたとしましょう。 ```javascript

```

この情報をGTMで取得し、GA4のタグに渡したい場合、「データレイヤー変数」 を使って transaction_id や total_price を取得します。

① データレイヤー変数を作成しよう

1. GTMでデータレイヤー変数を作成する

1. GTMの「変数」メニューを開く。
2. 「新規」をクリックし、変数の種類を「データレイヤー変数」に設定。
3. 「データレイヤー変数名」に transaction_id を入力。
4. 変数名を「DLV - Transaction ID」として保存。
5. 同じ手順で total_price も作成し、「DLV - Total Price」として保存。

✅ これで、GTM内で transaction_id や total_price を取得できるようになりました！

② GA4のタグでデータレイヤー変数を活用する

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

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

2. データレイヤー変数をイベントパラメータとして追加

1. 「イベントパラメータを追加」ボタンをクリック。
2. 以下のパラメータを追加。
3. パラメータ名: transaction_id（値: {{DLV - Transaction ID}}）
4. パラメータ名: value（値: {{DLV - Total Price}}）
5. パラメータ名: currency（値: JPY）
6. 保存。

✅ これで、購入完了時に「注文ID」「購入金額」「通貨」をGA4に送ることができます！

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

1. GTMの「プレビュー」を開く。
2. 計測対象のサイトで購入手続きを行う。
3. デバッグツールの「Data Layer」タブを確認し、 purchase イベントが送られているかチェック。
4. 「Tags Fired（発火したタグ）」にGA4のイベントタグがあるか確認。
5. GA4のリアルタイムレポートで purchase イベントが記録されているか確認。

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

■ まとめ 〜データレイヤー変数を使いこなそう！〜

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

✅ dataLayer.push() でデータをGTMに送る
✅ データレイヤー変数を作成し、特定の値を取得できるようにする
✅ GA4のイベントタグでデータレイヤー変数を使い、詳細なイベントデータを送信する
✅ 「プレビューモード」でテストし、問題なければ公開する

この設定を活用すれば、GA4のイベントデータをより詳細に記録できるようになります。

例えば... - ECサイトの売上データをGA4で計測する - フォーム送信時に「選択されたプラン」をGA4に送る - 会員登録時に「ユーザー属性」をトラッキングする

など、マーケティングの施策をより細かく分析することが可能になります！

■ 明日の予告 〜DOM要素変数とJavaScript変数の活用〜

次回は、DOM要素変数とJavaScript変数を活用して、「ページの特定の要素をGTMで取得する方法」を学びます！

これをマスターすれば、GTMのカスタマイズ性がさらに向上します。

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