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

この記事では、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"
    }]}});

注意点

  • データレイヤーはコードの実装方法によって、随時変化します。そのため、想定通りの内容がデータレイヤー変数として残っているか確認しましょう。
ブログ一覧ページに戻る