データレイヤーの情報を取得したり確認する方法

2025年5月22日

この記事では、Google Chromeでデータレイヤー（Data Layer）の情報を取得したり確認する方法をご紹介します。

データレイヤーの情報を確認する方法

データレイヤーの情報をブラウザで簡単に確認する方法を2つご紹介します。
「Google Chromeの拡張機能で確認する方法」と、「Googleタグマネージャーのプレビューモードで確認する方法」がございます。

拡張機能「Datalayer Checker」をインストールすることで、簡単にデータレイヤー変数の内容を確認できます。

まず、以下のURLより拡張機能のインストールを行います。

データレイヤーがPushされているページで「Datalayer Checker」をクリックすると、データレイヤーの内容を確認することができます。

例えば、event_name 「basic_dl_info」をクリックすると、以下のような情報を確認できます。
keyとvalueの情報が一覧で確認できます。

メリットは「各イベントがどのような内容で、どの順番でPushされたかを簡単に確認できること」です。

しかし、デメリットは「現在のデータレイヤーの状況を確認しづらいこと」です。
このデメリットを解決するには、Googleタグマネージャーのプレビューモードを使うことをオススメします。

GTMのプレビューモードでもデータレイヤー変数を確認することができます。
ただし、GTMのコンテナスニペット（GTM-XXXXXX）が設置されている必要があります。

Googleタグマネージャーのプレビューモードを起動します。
サイドバーに表示れたイベント一覧から、確認したいイベントを選択します。
また、「Data Layer」タブをクリックします。

以下のように当該イベント名でPushされたデータレイヤーの値を確認できます。

また、意図しない内容になっていないかチェックするために、現在のデータレイヤーの値をまとめて確認するには以下のように確認します。
そのページ内を通してデータレイヤーがどのような内容になったかを確認できます。

データレイヤーの値をGTMで取得し、各サービスの計測タグに設定するには、「データレイヤーの変数」を作成する必要があります。

上記の例では、以下のようなデータレイヤーから「items」の値を読み取っています。

dataLayer.push({
  event: "purchase",
  ecommerce: {
    items: [{
      item_name: "T-Shirt"
    }]}});