データレイヤーとは

サイトとGTMの間にあるデータを一時的に貯める箱のようなもの。
GTMはこの箱の中にあるデータを取り出してタグ・トリガー・変数に使っている。

データレイヤーは、GTMコンテナタグがページに読み込まれた際に自動でされるため、サイト内にあるデータのほとんどは自動的にデータが追加される。

データレイヤーを使うメリット・デメリット

メリット

ほとんどのデータは特別な設定をしなくても自動でデータが追加される。

デメリット

サイト内に含まれていないデータは別途データレイヤーの設定をする必要がある。

※サイト内にないデータの一例

• ユーザーID

• ページのカテゴリ

• 拡張eコマース用のデータ

データレイヤーの実装方法

STEP1：データレイヤーを作成する

データレイヤーの箱は1つしか作ることができないため、GTMコンテナタグよりも下でデータレイヤーを作成しようとすると、すでにデータレイヤーの箱があるためエラーになる。

なお、GTMコンテナタグはすでにデータレイヤーがある場合はその箱を引き継いでデータを追加するため、GTMコンテナタグよりも前にデータレイヤーがあってもエラーにはならない、

★適切なデータレイヤー設置例

<script>
  dataLayer = [];
</script>

<!-- Google Tag Manager -->
...
<!-- End Google Tag Manager -->

★不適切なデータレイヤー設置例

<!-- Google Tag Manager -->
...
<!-- End Google Tag Manager -->

<script>
  dataLayer = [];
</script>

STEP2：データレイヤーにデータを追加する

①「=」を使ってデータを代入する

<script>
  dataLayer = [{
    変数名1: "値1",
    変数名2: "値2"
  }];
</script>

②「push」メソッドを使ってデータを追加する

<script>
  dataLayer.push({
  変数名1: "値1",
  変数名2: "値2"
  });
</script>

「=」を使う実装とはことなり、データをシンプルに追加する実装になるため、データが上書きされる心配がない。
一方でpushメソッドは、データレイヤーにデータを追加する方法のため、GTMコンテナタグよりも上にコードを追加する場合は、必ずデータレイヤーを作成するコードの後にコードを追加する必要がある。

★適切なデータレイヤー設置例

<script>
  dataLayer = [];　//データレイヤーの箱を作成

  dataLayer.push({　//箱の中にデータを追加
  変数名1: "値1",
  変数名2: "値2"
  });
</script>

<!-- Google Tag Manager -->
...
<!-- End Google Tag Manager -->

最適なデータレイヤーの実装方法

以下コードをdateLayer.pushメソッドの前に追加することで、箱があるかどうかのチェックが必要なくなる。

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

★最適なデータレイヤー設置例

<script>
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    変数名: "値",
  });
</script>