データレイヤーの情報を取得したり確認する方法
Share
この記事では、Google Chromeでデータレイヤー(Data Layer)の情報を取得したり確認する方法をご紹介します。
データレイヤーの情報を確認する方法
データレイヤーの情報をブラウザで簡単に確認する方法を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"
}]}});
注意点
- データレイヤーはコードの実装方法によって、随時変化します。そのため、想定通りの内容がデータレイヤー変数として残っているか確認しましょう。