GA4 のトリセツ

目次 › 第 9 部 Google タグ マネージャーで計測を拡張する

9.4 データレイヤー

サイトと GTM の間で情報を受け渡す仕組みを学びます。
実践書籍換算 約 12 ページ

この章で学ぶこと

  • データレイヤー（dataLayer）の役割
  • dataLayer.push の書き方
  • データレイヤーの値を GTM で使う方法
  • カスタム イベント トリガーの使い方
  • 開発者に計測を依頼するときの伝え方

dataLayer とは

データレイヤー（dataLayer）は、ウェブサイトと GTM の間で、情報を受け渡すための 共通の入れ物 です。JavaScript の配列（window.dataLayer）として実装されています。

なぜデータレイヤーが必要なのか

前の章のクリックやフォームの計測は、ページの HTML（ID や class、テキスト）から情報を読み取っていました。しかし、HTML からは取れない情報や、HTML から取ると壊れやすい情報もあります。

情報HTML から取れるかデータレイヤーで渡す価値
購入した商品、金額、注文番号画面に表示されていても、取り出すのが難しく壊れやすい高い
ログインしているユーザーの ID、会員ランク画面に表示されないことが多い高い
フォームの送信が 成功した こと判断が難しい（エラーでも送信のイベントが起きる）高い
記事のカテゴリ、著者、公開日画面にはあるが、デザインの変更で場所が変わる中程度
ボタンのクリック取れる低い（前の章の方法で十分なことが多い）

データレイヤーを使うと、サイト側（開発者）が 確実な情報 を、決まった形で GTM に渡せます。GTM 側（マーケティング担当者）は、その値を使って、タグを設定できます。

［サイト（開発者が実装）］
    dataLayer.push({ event: 'generate_lead', form_id: 'contact' })
        ↓
［データレイヤー］
        ↓
［GTM］カスタム イベント トリガー「generate_lead」で発火
       データレイヤー変数「form_id」で値を取り出す
        ↓
［GA4］generate_lead イベント（form_id = contact）

ポイント データレイヤーは、サイトと計測の 約束ごと（インターフェース） です。サイトのデザインを変えても、データレイヤーの形が変わらなければ、計測は壊れません。

dataLayer.push の書き方

サイトからデータレイヤーに情報を入れるには、dataLayer.push() を使います。

基本の形

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
    event: 'generate_lead',
    form_id: 'contact',
    inquiry_type: 'consultation'
});
部分意味
window.dataLayer = window.dataLayer || [];データレイヤーがまだなければ、空の配列を作る（GTM より先に実行されても大丈夫にする）
eventGTM のカスタム イベント トリガーで使う、出来事の名前
そのほかのキー出来事に関する情報。GTM のデータレイヤー変数で取り出す

ページの情報を渡す

ページが表示されたときの情報（ページの種類、ログインの状態など）は、GTM のコードより前 に push しておくと、すべてのタグで使えます。

<script>
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
        page_type: 'article',
        article_category: 'seo',
        login_status: 'logged_in',
        member_rank: 'gold'
    });
</script>
<!-- この下に GTM のコード -->

EC の情報を渡す

EC の計測では、GA4 の推奨イベントと同じ形で、ecommerce のオブジェクトを push するのが一般的です（第 7 部）。

window.dataLayer.push({ ecommerce: null });  // 前の ecommerce の値を消す
window.dataLayer.push({
    event: 'purchase',
    ecommerce: {
        transaction_id: 'T-20261028-0001',
        value: 12800,
        currency: 'JPY',
        items: [
            { item_id: 'SKU-001', item_name: 'オーガニック コットン タオル', price: 3200, quantity: 4 }
        ]
    }
});

注意 データレイヤーの値は、新しく push したものが、同じキーの古い値を 上書き します。ただし、オブジェクトの中身は統合（マージ）されるため、前の商品の情報が残ってしまうことがあります。ecommerce を push する前に { ecommerce: null } を push して、古い値を消しておくのが定番の書き方です。

データレイヤー変数

データレイヤーに入った値を GTM で使うには、データレイヤー変数 を作ります。

作り方

  1. 「変数」→「ユーザー定義変数」→「新規」
  2. 「変数の設定」で「データレイヤーの変数」を選ぶ
  3. 「データレイヤーの変数名」に、キーの名前を入れる（例：form_id）
  4. 名前（例：「DLV - form_id」）を付けて保存する

階層のある値を取り出す

オブジェクトの中の値は、ドット（.）でつないで 指定します。

データレイヤーの値変数名の書き方取り出される値
{ form_id: 'contact' }form_idcontact
{ ecommerce: { value: 12800 } }ecommerce.value12800
{ ecommerce: { items: [ ... ] } }ecommerce.items商品の配列
{ user: { rank: 'gold' } }user.rankgold

GA4 の EC イベントの場合

GA4 イベント タグには、「e コマースデータを送信」 の設定があります。オンにして、データソースに「Data Layer」を選ぶと、データレイヤーの ecommerce の中身（items など）が、そのまま GA4 に送られます。商品ごとにデータレイヤー変数を作る必要はありません。

カスタム イベント トリガー

データレイヤーに event 付きの情報が push されたときにタグを発火させるには、カスタム イベント のトリガーを使います。

名前：CE - generate_lead
トリガーの種類：カスタム イベント
イベント名：generate_lead
このトリガーの発生場所：すべてのカスタム イベント
設定内容
イベント名dataLayer.push の event の値と 完全に一致 させる（大文字・小文字も区別される）
正規表現一致を使用オンにすると、複数のイベント名をまとめて指定できる（例：^(add_to_cart|purchase)$）
一部のカスタム イベントデータレイヤー変数などの条件を追加できる（例：form_id が contact のときだけ）

タグの設定の例

名前：GA4 - Event - generate_lead
タグの種類：Google アナリティクス：GA4 イベント
測定 ID：{{GA4 測定 ID}}
イベント名：generate_lead
イベント パラメータ：
    form_id      = {{DLV - form_id}}
    inquiry_type = {{DLV - inquiry_type}}
トリガー：CE - generate_lead

ポイント イベント名に {{Event}}（組み込み変数）を使うと、データレイヤーの event の値を、そのまま GA4 のイベント名にできます。正規表現のカスタム イベント トリガーと組み合わせると、1 つのタグで複数の EC イベントをまとめて送れます。

開発者への依頼の仕方

データレイヤーは、サイトのコードに実装する必要があるため、多くの場合 開発者に依頼 します。依頼が曖昧だと、実装の手戻りや、期待と違う値になる原因になります。

依頼書に書くこと

項目内容
目的何を知るための計測か（例：問い合わせの種類ごとの件数を知りたい）
タイミングいつ push するか（例：フォームの送信が 成功して、完了メッセージを表示する直前）
push する内容キー、値の型、値の例、値の一覧
対象のページどのページ・どの機能か
確認方法ブラウザの開発者ツールで dataLayer を確認する方法、GTM のプレビュー モード

依頼書の例

【目的】問い合わせフォームの送信完了を、種類ごとに計測したい

【タイミング】サーバーから送信成功のレスポンスを受け取った直後
（入力エラー・送信エラーのときは push しない）

【実装するコード】
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
    event: 'generate_lead',
    form_id: 'contact',              // 文字列。フォームごとに固定の値
    inquiry_type: 'consultation'     // 文字列。consultation / estimate / other のいずれか
});

【対象】/contact/ のお問い合わせフォーム

実装後の確認

開発者が実装したら、次の点を確認しましょう。

  1. GTM のプレビュー モードで、フォームを送信し、左側の一覧に generate_lead が表示されるか
  2. 「Data Layer」のタブで、キーと値が依頼どおりか（型、表記、大文字・小文字）
  3. 入力エラーのときに push されないか
  4. GA4 の DebugView に、イベントとパラメータが届くか

注意 データレイヤーに、氏名・メールアドレス・電話番号などの個人情報 を入れないよう、依頼書にも明記しましょう。データレイヤーの値は、GTM のタグを通じて外部に送られる可能性があり、GA4 の規約でも個人情報の送信は禁止されています（第 11 部）。

よくある質問

Q. データレイヤー変数の値が「undefined」になります。

A. 次の点を確認しましょう。

確認すること内容
変数名の表記データレイヤーのキーの名前と、変数の設定の名前が、大文字・小文字まで一致しているか
push のタイミングタグが発火した時点で、まだ値が push されていない（push より前にタグが動いている）
階層の指定オブジェクトの中の値を、ドット（.）でつないで指定しているか
データレイヤーのバージョン変数の設定の「データレイヤーのバージョン」が、バージョン 2 になっているか

GTM のプレビュー モードで、イベントごとの「Data Layer」と「Variables」のタブを見比べると、どの時点で値が入ったかがわかります。

Q. dataLayer = [...] と書いたら、計測が壊れました。

A. dataLayer = [...] のように、配列を 代入 すると、すでにある GTM のデータレイヤーが上書きされ、GTM が正しく動かなくなることがあります。必ず window.dataLayer = window.dataLayer || []; で初期化してから、dataLayer.push() で値を追加しましょう。

Q. SPA（シングルページ アプリケーション）では、データレイヤーをどう使いますか。

A. SPA では、ページの移動のたびにページが読み込まれないため、ページの切り替えのときに、dataLayer.push({ event: 'virtual_page_view', page_path: '/new-page/' }) のようにカスタム イベントを送り、GTM でページの表示を送る、などの実装をします。Google タグの拡張計測機能の「ブラウザの履歴イベントに基づくページの変更」で、自動的に計測できる場合もあります（第 2 部）。

Q. 開発者に依頼したのに、なかなか実装されません。

A. 開発者にとっての 優先度 が低い可能性があります。依頼の目的（その計測で、何がわかり、どんな判断に使うか）を伝え、開発の予定に組み込んでもらいましょう。サイトの改修のタイミングに合わせて依頼すると、まとめて実装してもらいやすくなります。

実践ワーク

自社のサイトで、データレイヤーで計測したほうがよい出来事を 3 つ選び、開発者への依頼書を書いてみましょう。

出来事目的タイミングpush する内容
例：会員登録の完了登録の方法ごとの件数を知るサーバーで登録が成功した直後event: 'sign_up'、method: 'email'（email / google / line）

依頼書を書いたら、この章の「依頼書に書くこと」の 5 つの項目が揃っているか、個人情報が含まれていないかを確認しましょう。

まとめ

  • データレイヤーは、サイトと GTM の間で情報を受け渡す共通の入れ物で、HTML から取れない確実な情報を渡せる
  • サイト側は dataLayer.push() で、event と関連する情報を入れる。EC では { ecommerce: null } で古い値を消してから push する
  • GTM 側は、データレイヤー変数で値を取り出し、カスタム イベント トリガーでタグを発火させる
  • 開発者への依頼は、目的・タイミング・内容・対象・確認方法を具体的に書く
  • データレイヤーに個人情報を入れない

次の章では、スクロールや要素の表示、動画の再生など、より細かい行動を GTM で計測する方法を学びます。

Ko-fi で制作者を支援する