【図解】データレイヤーとは?GTMでの役割・使い方・実装例を初心者向けに徹底解説【2026年最新】

「GTMで設定しているけど、データレイヤーって結局なに?」 「記事を読んでも “箱” や “配列” と言われてピンとこない」 そんな疑問を持つ方は多いのではないでしょうか。

データレイヤー(dataLayer)とは、ひと言でいえば「Webサイトの情報をGoogleタグマネージャー(GTM)に渡すための”伝言板”」です。 会員ランクや商品ID、購入金額など、ページには表示されないけれど計測したい情報を、この伝言板に書き込んでおくことでGTMが読み取り、GA4や広告タグに正確な値を届けます。

この仕組みを理解しておかないと、「GA4で会員種別ごとの売上を分けて見たい」「購入完了画面で金額を自動で送信したい」といった一歩進んだ計測ができません。逆に、データレイヤーを使いこなせれば、標準のGA4・GTM設定では取得できないビジネスデータまで扱えるようになります。

この記事では、データレイヤーの役割・仕組み・使い方を図解で解説したうえで、GTM/GA4との連携設定、ECサイト向け実装コード、よくあるエラーの対処法までを1本にまとめました。読み終わる頃には、自社サイトに何をどう設定すれば良いかが明確になっているはずです。

この記事は「GTM完全ガイド｜導入から実践的なタグ管理まで徹底解説」の個別テーマ解説です。GTMの全体像を把握したい方は先に完全ガイドからご覧ください。

この記事でわかること

• データレイヤーとは何か(初心者向けの図解解説)
• データレイヤーが必要になる3つの具体シーン
• window.dataLayer の初期化方法と dataLayer.push() の正しい使い方
• GTM管理画面での変数・トリガー設定手順
• GA4のイベントパラメータへの連携方法
• ECサイト向け実装コード(コピペOK)
• 初心者が陥りやすい5つのエラーと解決方法

---

データレイヤー（dataLayer）とは？初心者向けにわかりやすく解説

ひと言でいえば「WebサイトからGTMへの伝言板」

データレイヤーは、Webサイト側がGTMに対して「こんなデータがありますよ」と伝えるための仕組みです。例えば、以下のようなイメージです。

[Webサイト(HTML/JS)] → [データレイヤー(伝言板)] → [GTM] → [GA4・広告タグ]

ユーザーがWebページを開くと、サイト側は「このページは商品詳細ページ」「商品ID=SKU123」「価格=2,980円」といった情報を伝言板(データレイヤー)に書き込みます。GTMはその伝言板を読んで、必要な情報をGA4や広告タグに届けます。

ポイントは、データレイヤーを使わなくても基本的な計測はできる、ということです。 ただし、標準のGTM/GA4が自動で拾ってくれるのは「ページのURL」「クリックされたボタンのテキスト」といった”表に見えている情報”だけ。会員ランクや在庫数、利益率のような”裏のデータ”を渡すには、必ずデータレイヤーが必要になります。

技術的な正体は「JavaScriptの配列」

実装面では、データレイヤーは window.dataLayer というJavaScriptの配列(Array)オブジェクトです。GTMコンテナタグが読み込まれると、この配列が自動的に初期化され、ページの基本情報がpushされていきます。

// データレイヤーの初期化
window.dataLayer = window.dataLayer || [];

// データを追加(push)する
dataLayer.push({
  'event': 'page_view',
  'pageCategory': 'blog',
  'userType': 'premium'
});

この dataLayer.push() が、データレイヤーを使う上で唯一覚えておくべきJavaScriptの書き方です。

参考: データレイヤー | Google Tag Platform 公式ドキュメント

GTMが自動で取得するデータと、手動で追加が必要なデータの違い

データレイヤーの理解で最も重要なのは、「GTMが自動で拾ってくれるもの」と「自分で書かないと拾えないもの」の区別です。

項目	GTMが自動取得	手動でdataLayer.push()が必要
ページURL	○	–
ページタイトル	○	–
クリックされたボタンのテキスト	○	–
滞在時間・スクロール率(GA4拡張計測)	○	–
会員ランク(premium/free等)	×	必要
ログインユーザーID	×	必要
商品ID・商品名・価格	×	必要
在庫状況・利益率	×	必要
カスタムイベント(独自の発火タイミング)	×	必要

つまり、「ビジネス的に価値のあるデータ」ほど、データレイヤーで明示的に渡す必要があるということです。

「データレイヤーとは」をもう一度整理

• Webサイトの情報をGTMに渡す伝言板
• 実体は window.dataLayer というJavaScript配列
• dataLayer.push() で情報を書き込む
• 会員情報・商品情報など表示されないデータを扱う時に必須
• GTMはこの配列を読み取って、GA4や広告タグに情報を送る

データレイヤー変数とは?GTMで値を使うための仕組み

「データレイヤー」と似た用語で「データレイヤー変数」という言葉もよく出てきます。この2つの違いを理解しておくと、以降の設定がスムーズです。

• データレイヤー: サイト側がpushする”伝言板”そのもの(配列)
• データレイヤー変数: GTM管理画面で作る、”伝言板の中の特定の値”を取り出すための変数

例えば、サイト側で以下のようにpushしたとします。

dataLayer.push({
  'event': 'login',
  'userType': 'premium',
  'userId': 'U12345'
});

このうち「userType」の値をGTMで使いたい場合、GTM管理画面で userType という名前のデータレイヤー変数を作ります。すると、GA4タグや広告タグの中で {{userType}} と書くだけで、その時点の値(premium)を呼び出せるようになります。

データレイヤー = データの供給側、データレイヤー変数 = GTMでの受け取り口、と覚えておくと混乱しません。

データレイヤーを使うべき3つの具体シーン

ここまで読んで「便利そうだけど、自分のサイトで本当に必要?」と感じる方もいるかもしれません。実務でデータレイヤーが効果を発揮する代表的な3シーンを紹介します。

シーン1: 会員種別やユーザー属性ごとに分析したいとき

「プレミアム会員と無料会員で、どのページの閲覧傾向が違うのか」「会員歴3年以上のユーザーはどの商品を買っているか」といった分析は、GA4標準では実現できません。データレイヤーで会員属性をpushしておけば、GA4のカスタムディメンションとして使えるようになります。

dataLayer.push({
  'event': 'user_info_set',
  'userType': 'premium',
  'membershipYears': 3,
  'lastPurchaseDate': '2026-03-15'
});

シーン2: ECサイトで商品単位の売上・購入データを計測したいとき

GA4のEコマース計測を正しく設定するには、データレイヤーで view_item / add_to_cart / purchase といった推奨イベントを送る必要があります。これは手動で用意しない限り、GA4側で自動生成されないデータです。

シーン3: サイトの見た目が変わっても計測を壊したくないとき

「特定のボタンをクリックした時だけ計測する」ような設定を、CSSクラス名やDOM構造に依存して作ると、サイトリニューアルのたびに設定が壊れます。**データレイヤーを経由する設計にしておけば、見た目が変わっても計測は維持されます。**これが長期運用するサイトでデータレイヤーが標準化されている最大の理由です。

---

window.dataLayer の基本構造と正しい書き方

実装に入る前に、window.dataLayer の基本ルールを押さえましょう。

1. 初期化は window.dataLayer = window.dataLayer || []; が正解

データレイヤーを使う前に、まず以下のコードで初期化します。

window.dataLayer = window.dataLayer || [];

この1行の意味は「dataLayerがすでにあればそれを使い、無ければ新しい空の配列を作る」というものです。

⚠️ やってはいけない書き方

// ❌ 絶対にNG
dataLayer = [{'item': 'value'}];

window. を付けずに = で代入すると、GTMが自動生成した既存のデータレイヤーを丸ごと上書きしてしまい、GTM全体が動かなくなります。これは実務で最も多い致命的ミスです。必ず window.dataLayer = window.dataLayer || []; + dataLayer.push() の形式で書きましょう。

2. データの追加は dataLayer.push() のみ

データを追加する際は、必ず push() メソッドを使います。

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'event': 'purchase',
  'transactionId': 'T12345',
  'value': 2980
});

push() は配列の末尾に要素を追加する標準的なメソッドなので、既存のデータを一切壊しません。

3. 渡せるデータ型

値として使えるのは以下のデータ型です。

型	例
文字列	'premium'
数値	2980
真偽値	true / false
配列	['shoe', 'apparel']
オブジェクト	{ id: 'U01', name: 'テスト' }

4. event キーを使うと「カスタムイベント」になる

event という特別なキーを含めると、GTMでその名前を使ってトリガーを発火させられます。

// event キー無し → データレイヤー変数として値を渡すだけ
dataLayer.push({
  'pageCategory': 'technology'
});

// event キー有り → カスタムイベントとしてトリガー発火可能
dataLayer.push({
  'event': 'login',
  'userType': 'premium'
});

1回のpushに event キーを2つ以上入れることはできません。

5. コードはGTMタグより上に書く

データレイヤーの初期化コードは、必ずGTMコンテナタグよりも上(HTMLソースで先に読み込まれる位置)に配置してください。

<head>
  <!-- 1. データレイヤーの初期化(GTMより上) -->
  <script>
    window.dataLayer = window.dataLayer || [];
    dataLayer.push({
      'pageCategory': 'blog',
      'contentType': 'article'
    });
  </script>

  <!-- 2. GTMコンテナタグ -->
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXXXX');</script>
</head>

GTMタグより下に初期データを置くと、GTMコンテナ読み込み時にその値が存在せず、初期イベント(page_view等)で欠損が発生します。

---

データレイヤーの確認方法3選

実装したデータレイヤーが正しく動作しているかを確認する方法を3つ紹介します。まずは最も手軽な「方法1」から試してください。

方法1: Chrome開発者ツールのConsoleで確認する(最も手軽)

特別なツール不要で、Google Chromeだけで確認できます。

手順:

1. 確認したいページをChromeで開く
2. F12 キー(Mac: Cmd + Option + I)で開発者ツールを起動
3. 「Console」タブを選択
4. dataLayer と入力して Enter
5. 配列の中身が展開表示される

見るべきポイント:

• gtm.start / gtm.js / gtm.dom / gtm.load が時系列で存在すれば、GTMは正常に読み込まれています
• 自分でpushした event 名やカスタム変数が入っているかを確認
• undefined と表示される場合は、そもそもGTMタグが設置されていないか、綴りミスの可能性

方法2: GTMプレビューモード(Tag Assistant)で確認する

GTM管理画面の「プレビュー」から起動するTag Assistantでは、各イベント発火時のデータレイヤーの中身をGUIで確認できます。

手順:

1. GTM管理画面で右上「プレビュー」をクリック
2. 確認したいURLを入力し「Connect」
3. 別タブでサイトが開き、画面下部にTag Assistantパネルが表示される
4. 左側のイベント一覧から確認したいイベントをクリック
5. 「Data Layer」タブで、そのイベント時点のdataLayerの中身を確認

推奨シーン: 本番環境でユーザー行動(購入完了、フォーム送信など)のイベントを最終確認したいとき

方法3: Chrome拡張機能「dataslayer」でリアルタイム監視

より詳細に、push履歴をリアルタイムで確認したい場合に便利な拡張機能です。

手順:

1. Chrome ウェブストアから「dataslayer」をインストール
2. F12 で開発者ツールを開く
3. 「dataslayer」タブをクリック
4. ページ上でクリック等の操作をすると、push の中身が時系列で表示される

推奨シーン: ボタンクリックやスクロール等、連続するイベントのデバッグに最適

関連記事: GTMデバッグに役立つChrome拡張機能10選

---

GTMでデータレイヤー変数を設定する手順

サイト側でpushした値をGTMで使うには、GTM管理画面で「データレイヤー変数」を作成します。

手順1: GTMで変数を作成

1. GTM管理画面で「変数」→「ユーザー定義変数」→「新規」をクリック
2. 変数タイプで「データレイヤーの変数」を選択
3. 「データレイヤーの変数名」に、取得したいキー名を入力(例: userType)
4. 変数名を任意で設定(推奨: DL - userType のように DL - プレフィックスで統一)
5. 保存

手順2: カスタムイベントトリガーを作成

event キーで送信したイベントでタグを発火させたい場合は、カスタムイベントトリガーも作成します。

1. 「トリガー」→「新規」
2. トリガータイプで「カスタムイベント」を選択
3. イベント名にサイト側でpushしたevent名を入力(例: login)
4. 保存

手順3: GA4タグに変数を紐付ける

最後に、作成した変数を GA4 イベントタグに紐付けます。

1. GA4イベントタグを開く(または新規作成)
2. 「イベントパラメータ」セクションで、パラメータ名に送信したい名前(例: user_type)、値に {{DL - userType}} を指定
3. トリガーに手順2で作ったカスタムイベントトリガーを紐付け
4. 保存→プレビューで動作確認→公開

関連記事: GTM変数の設定方法を詳しく解説

---

データレイヤーの命名規則とベストプラクティス

複数ページ・チームで運用する場合、命名規則の統一は必須です。以下のルールを社内で共有しておきましょう。

ルール1: dataLayer はキャメルケース厳守

JavaScriptは大文字小文字を区別します。datalayer や DataLayer ではGTMは値を認識しません。

// ❌ 動作しない
datalayer.push({'pageTitle': 'Home'});

// ✅ 正しい
dataLayer.push({'pageTitle': 'Home'});

ルール2: キー名の表記を統一する

キャメルケース(productName)とスネークケース(product_name)を混在させないようにします。GA4推奨パラメータはスネークケースなので、GA4連携を重視するならスネークケースで統一するのも選択肢です。

ルール3: ハイフンを含むキーはクォーテーションで囲む

JavaScriptの変数名にハイフンは使えないため、ハイフンを含む場合はクォーテーション(引用符)が必須です。

// ❌ エラー
dataLayer.push({new-variable: 'value'});

// ✅ 正しい
dataLayer.push({'new-variable': 'value'});

ルール4: サイト全体でキー名を統一

「トップページでは visitorType、購入ページでは visitor_type」のように揺れがあると、GTMで別変数として認識されてしまいます。同じ意味のデータは、すべてのページで同じキー名を使うことを徹底してください。

---

GA4との連携: カスタムディメンションで活用する

データレイヤー経由でGA4に送ったパラメータは、カスタムディメンションとしてレポートで使えるようになります。

連携の流れ

1. サイト側で dataLayer.push() により値を送信
2. GTMでデータレイヤー変数を作成
3. GA4イベントタグのイベントパラメータに変数を紐付け
4. GA4管理画面の「カスタム定義」→「カスタムディメンション」で登録
5. GA4レポートの「探索」や「標準レポート」で、ディメンションとして使用可能に

カスタムディメンション登録の注意点

• GA4のプロパティあたりカスタムディメンションは最大50個
• 登録から反映まで24時間ほどかかる場合がある
• スコープ(イベント/ユーザー)を正しく選ぶ(会員種別はユーザースコープ、商品IDはイベントスコープ)

関連記事: GA4キーイベント(旧コンバージョン)設定ガイド

---

コピペOK: シーン別データレイヤー実装コード集

実務でよく使うパターンを用途別にまとめました。自社サイトに合わせてキー名や値を置き換えて使ってください。

① ボタンクリック計測(汎用版)

<!-- HTML側: data属性でボタンを識別 -->
<button data-gtm-button="cta_contact" class="contact-btn">お問い合わせ</button>

// JavaScript: 共通のクリックリスナー
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('[data-gtm-button]').forEach(function(button) {
    button.addEventListener('click', function() {
      window.dataLayer = window.dataLayer || [];
      dataLayer.push({
        'event': 'button_click',
        'buttonId': this.getAttribute('data-gtm-button'),
        'buttonText': this.textContent.trim(),
        'pageUrl': window.location.href
      });
    });
  });
});

② フォーム入力開始・送信完了の計測

document.addEventListener('DOMContentLoaded', function() {
  const forms = document.querySelectorAll('form[data-gtm-form]');

  forms.forEach(function(form) {
    let hasStarted = false;
    const formName = form.getAttribute('data-gtm-form');

    // 入力開始
    form.addEventListener('input', function() {
      if (!hasStarted) {
        window.dataLayer = window.dataLayer || [];
        dataLayer.push({
          'event': 'form_start',
          'formName': formName
        });
        hasStarted = true;
      }
    });

    // 送信完了
    form.addEventListener('submit', function() {
      window.dataLayer = window.dataLayer || [];
      dataLayer.push({
        'event': 'form_submit',
        'formName': formName
      });
    });
  });
});

③ ECサイト: 購入完了イベント(GA4推奨イベント準拠)

// 購入完了(サンクスページ)で実行
window.dataLayer = window.dataLayer || [];
dataLayer.push({ ecommerce: null }); // 既存のecommerceオブジェクトをリセット
dataLayer.push({
  'event': 'purchase',
  'ecommerce': {
    'transaction_id': 'T12345',
    'value': 15250,
    'currency': 'JPY',
    'tax': 1386,
    'shipping': 500,
    'items': [
      {
        'item_id': 'SKU12345',
        'item_name': 'ランニングシューズA',
        'item_brand': 'SportsPlus',
        'item_category': 'シューズ',
        'item_variant': 'レッド',
        'price': 12800,
        'quantity': 1
      }
    ]
  }
});

重要: ecommerceイベントを連続で送る場合、前回データの残留を防ぐため、新しいpushの直前に必ず dataLayer.push({ ecommerce: null }) でリセットしてください。

④ スクロール深度計測(25/50/75/90%)

const scrollDepthMarks = [25, 50, 75, 90];
const scrollDepthTriggered = [];

window.addEventListener('scroll', function() {
  const scrollPercent = Math.round(
    (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100
  );

  scrollDepthMarks.forEach(function(mark) {
    if (scrollPercent >= mark && !scrollDepthTriggered.includes(mark)) {
      scrollDepthTriggered.push(mark);
      window.dataLayer = window.dataLayer || [];
      dataLayer.push({
        'event': 'scroll_depth',
        'scrollDepth': mark
      });
    }
  });
});

⑤ ファイルダウンロード計測(PDF/ZIP/DOC)

document.addEventListener('DOMContentLoaded', function() {
  const links = document.querySelectorAll('a[href$=".pdf"], a[href$=".zip"], a[href$=".docx"]');

  links.forEach(function(link) {
    link.addEventListener('click', function() {
      const fileName = this.href.split('/').pop();
      const fileExtension = fileName.split('.').pop();

      window.dataLayer = window.dataLayer || [];
      dataLayer.push({
        'event': 'file_download',
        'fileName': fileName,
        'fileType': fileExtension,
        'downloadUrl': this.href
      });
    });
  });
});

⑥ 外部リンククリック計測

document.addEventListener('DOMContentLoaded', function() {
  const currentDomain = window.location.hostname;

  document.querySelectorAll('a[href^="http"]').forEach(function(link) {
    const linkDomain = new URL(link.href).hostname;
    if (linkDomain !== currentDomain) {
      link.addEventListener('click', function() {
        window.dataLayer = window.dataLayer || [];
        dataLayer.push({
          'event': 'external_link_click',
          'externalUrl': this.href,
          'externalDomain': linkDomain
        });
      });
    }
  });
});

⑦ ログインユーザー情報の送信

// ログイン成功後に実行する想定
function pushUserInfo(user) {
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    'event': 'user_info_set',
    'userId': user.id,              // ハッシュ化済みID推奨
    'userType': user.type,          // premium / free
    'membershipYears': user.years,
    'lastLoginDate': user.lastLogin
  });
}

// 使用例
// pushUserInfo({
//   id: 'hashed_user_id',
//   type: 'premium',
//   years: 3,
//   lastLogin: '2026-04-01'
// });

⑧ ABテスト分岐の計測

// テストバリエーションを決定した時点で実行
window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'event': 'ab_test_assigned',
  'abTestName': 'hero_cta_color',
  'abTestVariant': 'red_button'
});

⑨ コンバージョンファネルのステップ計測

function pushFunnelStep(stepName, stepNumber) {
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    'event': 'funnel_step',
    'funnelName': 'purchase_funnel',
    'funnelStepName': stepName,
    'funnelStepNumber': stepNumber
  });
}

// 使用例
// pushFunnelStep('product_view', 1);
// pushFunnelStep('add_to_cart', 2);
// pushFunnelStep('checkout_start', 3);
// pushFunnelStep('purchase', 4);

⑩ 404エラー・JavaScriptエラーの計測

// 404エラーページの検出
if (document.title.includes('404') || document.querySelector('[data-page-type="404"]')) {
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    'event': 'error_page',
    'errorType': '404',
    'errorPath': window.location.pathname,
    'referrer': document.referrer || 'direct'
  });
}

// JavaScriptランタイムエラーの捕捉
window.addEventListener('error', function(e) {
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    'event': 'javascript_error',
    'errorMessage': e.message,
    'errorFile': e.filename,
    'errorLine': e.lineno
  });
});

---

データレイヤー実装でよくある5つのエラーと解決法

実装時に高確率で遭遇するエラーと対処法を一覧化しました。

エラー現象	原因	解決方法
dataLayer is not defined	GTMタグより前に初期化コードがない	HTMLの <head> 上部に window.dataLayer = window.dataLayer || []; を記述
pushしたデータがGTMで取得できない	データレイヤー変数名のタイポ(大文字小文字含む)	ConsoleでdataLayerを展開し、変数名を完全一致で確認
同じイベントが2回発火する	dataLayer.push が複数箇所に重複記述されている	ページソースで event: 'event名' を検索し、重複を削除
ecommerceデータが空になる	前回のecommerceオブジェクトが残っている	各ecommerce pushの直前に dataLayer.push({ ecommerce: null }) を追加
GTMプレビューでData Layerタブが空	コンテナID不一致またはプレビューリンク切れ	GTM管理画面のコンテナIDとサイト埋め込みのIDが一致しているか確認

さらに詳しい解説: GTMでタグが発火しない原因と対処法

---

まとめ: データレイヤーを使いこなすための3ステップ

データレイヤーは「なんとなく難しそう」に見えるだけで、仕組みを理解すれば誰でも使える強力なツールです。最後に、実装を進めるための3ステップを整理します。

Step 1: 基本文法だけ覚える window.dataLayer = window.dataLayer || []; での初期化と、dataLayer.push() での追加。この2つだけです。

Step 2: 小さく始める いきなりECサイト全体に実装せず、まずは「お問い合わせボタンのクリック計測」など1箇所から試してください。プレビューモードで動作確認できたら次の箇所に進みます。

Step 3: 命名規則を決めて横展開 キー名の表記(キャメル/スネーク)、変数の接頭辞(DL - など)を決めたら、ドキュメント化してチームで共有。新規データを追加する際はドキュメントに追記するルールにしておくと、長期運用で破綻しません。

データレイヤーを正しく設計・実装できれば、GA4と広告タグを横断して一貫した計測が可能になり、マーケティング施策の精度が一段階上がります。

---

よくある質問（FAQ）

データレイヤーの実装や運用に関して、よく寄せられる質問とその回答をまとめました。

GTMの導入から運用まで体系的に学びたい方は「GTM完全ガイド」をご覧ください。

関連記事

【コピペOK】GTMイベント設定完全マニュアル｜クリック・スクロール・フォーム送信を5分で実装

【無料版】GA4とサーチコンソールレポート全52Pの無料テンプレート

GTMデータレイヤー（Googleタグマネージャー）設定完全ガイド【2026年最新版】初心者向け実例コード付き解説

GTMでクリック計測を設定する方法【初心者向け完全ガイド】

GA4クロスドメイントラッキング設定ガイド｜GTM利用時の手順と動作確認方法を徹底解説

GTMユーザー必見!タグマネージャーのデバッグが捗る便利な拡張機能ベスト10