【GTM】データレイヤーの使い方　徹底解説

こんにちは。スプマロです（@649Ga4）

データレイヤーは、Google Tag Manager(以下、GTM)を理解するうえで最も重要な概念です。

データレイヤーを理解して活用すれば、多くのデータを自由に扱うことができるようになります。

仕組みを理解するのは大変ですが、この記事ではできる限りわかりやすくデータレイヤーについて説明をしていきます。

活用方法についても説明しますので、この記事を見ていただいて実装の幅が広がれば幸いです！

では早速見ていきましょう！

データレイヤーとは何なのか？
データレイヤーを使うメリット
データレイヤーの実装方法
データレイヤーの使い方
- データレイヤー変数の使い方
- データレイヤーを使ったトリガーの使い方
データレイヤーの活用事例
まとめ

データレイヤーとは何なのか？

データレイヤーとはそもそも何なのか。その概念についてまず説明します。

データレイヤーとは、サイトとGTMの間にあるデータを一時的に貯める箱みたいなものです。

データレイヤーの中には、様々なデータが追加されていきます。例えばページのURLやクリックした要素に関する情報などですね。

GTMはこの箱の中にあるデータを取り出してタグ・トリガー・変数に使っています。

もっと言うと、GTMはこのデータレイヤーに貯まったデータしか使いません。

GTMで取り扱いたいデータは、このデータレイヤーに追加する必要があります。

実はGTMコンテナタグがページに読み込まれた際に、自動でデータレイヤーを作成します。

そして、サイト内にあるデータのほとんどは自動的に追加されていきます。

自動で対応してくれているので、私たちはデータレイヤーを意識することなく、様々なデータを扱うことができるんですね。

自動で対応してくれるなら、特に覚える必要もないのでは？

そう思ったかもしれません。

しかし、データレイヤーが自動で取れないデータがあります。

自動で取れないデータとは何なのか？
そしてそのデータを取るためにはどうすればいいのか？

こちらについても後ほど説明しますね。

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

先ほど、データレイヤーにはサイト内のデータが追加されていくと説明しました。さらに、ほとんどのデータは自動的に追加されていきます。

ではデータレイヤーにカスタムで追加する必要があるのはどんなデータでしょうか。

これは、「サイト内に含まれていないデータ」が該当します。

当たり前に聞こえるかもしれませんが、サイト内に無いデータはさすがのデータレイヤーも追加することはできません。

それではサイトに無いデータってどんなものでしょうか？

もちろんサイトによって様々ですが、例えば以下のようなものがあります。

・ユーザーID
・ページのカテゴリ
・拡張eコマース用のデータ

※拡張eコマースとは、設定をするとECサイトのショッピング行動の一連の流れが計測できる機能です。本記事では割愛しますが、GTMで実装する場合はデータレイヤーを使うとスムーズに行えます。

拡張eコマースを詳しく知りたい場合はこちらの公式ヘルプをご参照ください。

個人情報などGoogleの規約に違反するものは計測しないように注意をしてください。

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

それでは実際にデータレイヤーの実装方法について説明をしていきます。

データレイヤーの実装の流れは大きく2つになります。

ここからは、「dataLayer」と英字記載もありますが、こちらもデータレイヤーを指しています。コードの説明については、英字を使います。

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

まず最初にデータレイヤーを作成します。コードは次のようになります。

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

ここで重要なのは、データレイヤーのコードを追加する位置になります。必ず、GTMコンテナタグよりも上の位置に追加しましょう！

■適切な例

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

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

理由としては、データレイヤーの箱は1つしか作ることができません。

前述したとおり、GTMコンテナタグが読み込まれると、自動でデータレイヤーを作成します。

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

■不適切な例

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

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

そしたら上にコードを追加してもデータレイヤーは2つになるからエラーになるのでは？

こう思ったかもしれません。

実はGTMコンテナタグは、すでにデータレイヤーがある場合はその箱を引き継いでデータを追加します。

そのため、GTMコンテナタグよりも上でデータレイヤーを作成する場合はエラーが発生しません。

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

作成したデータレイヤーの中に、データを追加する方法は2つあります。

・「=」を使ってデータを代入する
・「push」メソッドを使ってデータを追加する

コードはそれぞれ次のようになります。

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

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

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

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

データレイヤーの中には、変数という箱をさらに作ります。その箱の中にデータを追加していくイメージです。

データレイヤーの中の変数のことを「データレイヤー変数」と呼びます。

変数名は日本語ではなく英数字が推奨です。(先頭に数字は使えないので注意)

実装方法が2つもあってどちらを使えばよいかよくわかりませんよね。

それぞれの違いについてもちゃんと説明をしますので安心してください！

「=」を使う実装方法

まずこちらは非常に危険なので使うのをやめましょう！

なので省略してもよいのですが、なぜ危険なのかを理解することも大切なので説明します。

実装方法としては、前述したとおり以下のコードになります。

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

ここで重要なのは必ず、GTMコンテナのタグよりも上にコードを追加する必要があります。

その理由は、「=」を使うデータの代入はデータレイヤーの中身を完全に上書きをする方法だからです。

GTMコンテナよりも下にコードを追加した場合、それまでに貯めたデータを上書きしてしまうため、GTMは動かなくなってしまいます。

■NGの例(GTMコンテナタグよりも下の設置)

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

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

この危険性があまりにも高いため、「=」を使う実装は非推奨となります。

dataLayer.pushメソッドを使う実装方法

もう一つは、pushメソッドを使ってデータレイヤーにデータを追加する方法です。

コードとしては以下のコードになります。

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

こちらは先ほどの「=」を使う実装とはことなり、データをシンプルに追加する実装になります。
なので上書きがされる心配がありません。

注意点としては、事前にデータレイヤーの箱が作成されている必要があります。

pushメソッドは、データレイヤーにデータを追加する方法なので、データレイヤー自体がないとエラーになってしまいます。

なので、GTMコンテナタグよりも下にコードを追加する場合は問題ありません。

GTMコンテナタグよりも上に追加する場合は、必ずデータレイヤーを作成するコードの後に追加しましょう。

■適切な例

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

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

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

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

これまでに2つのデータレイヤーへのデータ追加方法を説明してきました。

しかし、「=」使う場合はデータを上書きしてしまうリスクがありますし、「push」もコードを追加する位置を気にしなければいけません。

この問題を解決する実装方法があります。

コードとしては次のようになります。

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

このコードの最重要ポイントは、この部分です。

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

処理している内容はとてもシンプルです。

①データレイヤーの箱があればその内容を引き継ぐ
②箱が無ければ、新規に箱を作成する

このコードをdataLayer.pushメソッドの前に追加することで、弱点だった箱があるかどうかのチェックが必要なくなります！

これから説明する活用方法もこの実装方法を使って説明をしていきます。

データレイヤーの使い方

ここからはデータレイヤーの使い方について説明をしていきます。

GTMはデータレイヤーに貯まったデータを次の2つの方法に使います。

①特定のデータを変数として格納する
②タグのトリガー条件として使用する

データレイヤー変数の使い方

前述のとおり、データレイヤーの中には変数名と値をセットでデータを追加します。

例えば、ページのカテゴリ情報を変数としてデータを追加する場合、以下のようなコードになります。

変数名：pageCategory

値：GoogleTagManger

<script>
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    pageCategory: "GoogleTagmanager",
  });
</script>

実際に、GTMのプレビューモードで見てみましょう

このように、データレイヤーにデータが追加されているのがわかりますね！

ただし、カスタムで追加したデータは、データレイヤーに追加するだけではGTMは受け取ってくれません。

GTMの変数の1つである「データレイヤー変数」を作成して、追加したデータを格納する必要があります。

先ほどの変数名「pageCategory」の値を格納する場合は次のとおりです。

■設定方法

[変数]>ユーザー定義変数の[新規]>[データレイヤーの変数]を選択

変数名は大文字と小文字が区別されるので注意しましょう！

データレイヤー変数を作って、もう一度プレビューモードを見てみましょう。

先ほどは、データレイヤーに追加されているだけでしたが、今度はデータレイヤー変数として値が格納されているのがわかりますね。

これでデータレイヤーに追加したデータを変数として使うことができます。

データレイヤーを使ったトリガーの使い方

データレイヤーのもう一つの使い方として、トリガーを作成することができます。

例えば、ユーザーがログインをした際に次のコードが有効化されるとします。

<script>
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    event: "login",
  });
</script>

ここで重要なのは、先ほど変数名を入れたところに「event」キーが入ることです。

データレイヤーは、「event」キーが追加されると変数ではなくカスタムイベントとして認識をします。

また、変数の値を入れていたところには、カスタムイベントの名前が入ります。

プレビュー画面で見てみましょう。

イベント一覧に先ほど追加したカスタムイベント「login」がありますね。

あとは、このカスタムイベントをトリガー条件として設定します。

■設定方法

[トリガー]>[新規]>[カスタムイベント]を選択

これで、データレイヤーを読み込んだ時にタグを動かすことができるトリガーを作成することができます。

また、データーレイヤーには、「カスタムイベント」と「データレイヤー変数」を同時に追加することもできます。

<script>
  dataLayer.push({
  変数名: "値",
  event: "カスタムイベント名"
  });
</script>

データレイヤーの活用事例

データレイヤーの概要と使い方の基本について説明をさせていただきました。

それでは下のテーマで実際の実装例を見てきましょう。

サービス登録完了時に、ユーザーID情報と登録サービスのプラン内容を計測

例えば、あなたはサブスクリプションサービスを提供しているとします。そこでサービスを登録してくれたユーザーのID情報とプラン内容をGAで計測したいとします。

上記を満たすにはどのような実装をすればよいでしょうか？

実装から計測完了までの流れとしては以下になります。

サービス登録時にデータレイヤーにデータを追加する実装をする
GoogleAnalytics(GA)のカスタムディメンションを作成する
GTMでタグ・トリガー・変数を設定する
GTMの動作検証をする

それぞれの設定を見ていきましょう。

サービス登録時にデータレイヤーにデータを追加する実装をする

ユーザーがサービスを登録してくれたときに、例えば以下のデータレイヤーが有効になるように実装します。

<script>
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    event: "registrationComplete",　//カスタムイベント
    userid: "no12345",　//変数：ユーザー固有の値
    plan: "Monthly",　　//変数：サービスの契約内容
  });
</script>

このコードは、1つカスタムイベントと、2つの変数をデータレイヤーに追加しています。プレビューモードで見てみましょう。