この記事では、Google Chromeでデータレイヤー(Data Layer)の情報を取得したり確認する方法をご紹介します。
Contents
データレイヤーの情報を確認する方法
データレイヤーの情報をブラウザで簡単に確認する方法を2つご紹介します。
「Google Chromeの拡張機能で確認する方法」と、「Googleタグマネージャーのプレビューモードで確認する方法」がございます。
Google Chromeの拡張機能で取得・確認する方法
拡張機能「Datalayer Checker」をインストールすることで、簡単にデータレイヤー変数の内容を確認できます。
まず、以下のURLより拡張機能のインストールを行います。
データレイヤーがPushされているページで「Datalayer Checker」をクリックすると、データレイヤーの内容を確認することができます。

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

Datalayer Checkerのメリットとデメリット
メリットは「各イベントがどのような内容で、どの順番でPushされたかを簡単に確認できること」です。
しかし、デメリットは「現在のデータレイヤーの状況を確認しづらいこと」です。
このデメリットを解決するには、Googleタグマネージャーのプレビューモードを使うことをオススメします。
GTMのプレビューモードで取得・確認する方法
GTMのプレビューモードでもデータレイヤー変数を確認することができます。
ただし、GTMのコンテナスニペット(GTM-XXXXXX)が設置されている必要があります。
当該イベントのチェック
Googleタグマネージャーのプレビューモードを起動します。
サイドバーに表示れたイベント一覧から、確認したいイベントを選択します。
また、「Data Layer」タブをクリックします。
以下のように当該イベント名でPushされたデータレイヤーの値を確認できます。

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

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

上記の例では、以下のようなデータレイヤーから「items」の値を読み取っています。
dataLayer.push({
event: "purchase",
ecommerce: {
items: [{
item_name: "T-Shirt"
}]}});
注意点
- データレイヤーはコードの実装方法によって、随時変化します。そのため、想定通りの内容がデータレイヤー変数として残っているか確認しましょう。
Pafit Analycy(データ収集機能)のご紹介
Pafit株式会社ではウェブサイトのデータ収集を簡単にするためのサービスを開発しています。
現在、事前登録受付中となります。
以下のような特徴を持っています。
1. Data Layer用の情報のPushをサポート
商品IDや商品名、料金などをData LayerにPushすることをサポートします。
2. ウェブサイトのGoogleタグマネージャーの設定を簡略化
本サービスで一括設定できるタグマネージャーのタグ・トリガー・変数の合計数は100を超え、設定時間を大幅に短縮できます。
3. Googleアナリティクスや各広告サービスにおけるデータ収集をサポート
各サービスで商品の閲覧・カート追加・購入データなどを記録できるようになり、売上向上のためのデータ分析や広告配信の最適化に役立ちます。
以下のページで事前登録を受け付けております。

アプリやデータ分析に関するご質問がある場合はお気軽にお問い合わせください。
また、弊社ではGA4導入・設定支援サービスなどデータ分析サポートも行っております。