本文にスキップ
weballin

weballin DIGIWIKI

データレイヤー

データレイヤーは、Webページのイベント・製品・ユーザーデータをGTMとGA4に構造化して配信するJavaScriptオブジェクト(配列)である。開発者はdataLayer.push()でイベントを発生させ、GTMはこのデータをタグに連結してGA4・広告ピクセルに配信する。

weballin

データレイヤーがなければ、「購入完了ページで決済金額をGA4に渡す」ことは容易ではない。開発者は毎回GA4コードを直接修正する必要があります。データレイヤーを用意すると、開発者はページイベント発生時に決まった形式で dataLayer.push() だけ呼び出し、GTM はそのデータを受け取り、GA4・Google Ads に渡す。

構造は、window.dataLayer配列にオブジェクトをプッシュする方法です。例: dataLayer.push({'event':'purchase','value':150000,'item_name':'施術名'})。 GTMのデータレイヤー変数はこの値を読み取り、タグパラメータとして使用します。

weballinは、病院サイトで電話クリック(tel:アンカー)、予約フォーム送信、カカオトークチャンネルクリックでデータレイヤを標準設計します。特に、SPA(React / Next.js)環境では、ページ移動時にデータレイヤーが初期化されないように、履歴API連携設計が必要です。

要点

  • ページイベントデータをGTMとGA4が読み取ることができる標準形式に構造化する。
  • 開発者とマーケティング担当者の役割を分離する:開発者はデータレイヤープッシュ、マーケティング担当者はGTMタグを設定します。
  • Eコマースイベント(view_item・add_to_cart・purchase)を標準GA4スキーマに配信する。
  • SPA(React/Next.js/Vue)でページ移動イベントをデータレイヤーに手動でトリガーします。
  • GTMデータレイヤー変数でプッシュされた値をタグパラメータに自動的に関連付けます。

参考資料

よくある質問

データレイヤーを必ず使うべきですか?

必須ではありませんが、Eコマースイベントまたはフォーム送信値をGA4に渡すには実質的に必要です。データレイヤーがないと、GTM DOM要素変数で値を読み取る必要があり、UIが変更されるたびにタグが壊れる危険があります。

Next.jsのようなSPAでデータレイヤがうまくいかないのはなぜですか?

SPAはページ移動時にHTML全体を新しくロードしないため、GTMページビュートリガーは自動的に発火しません。ルータの変更時にdataLayer.push({event:'pageview'、page:location.pathname})を手動で呼び出すコードを追加する必要があります。

データレイヤーの設計は誰が担当しますか?

データレイヤ仕様は、マーケティング担当者と分析者が「どのデータが必要か」を定義し、開発者が実装する。weballinは、サイト分析後にデータレイヤー設計文書を提供し、開発チームとレビューする形で進めます。