Web広告に携わっていると、一度くらい「データレイヤー」という言葉を聞いたことがあるかもしれません。
「広告のタグで使うのでデータレイヤーを入れてください」「データレイヤーに値を追加してください」って言われたけど、そもそもデータレイヤーってどういうものなんだっけ?
この記事ではそんな方に向けてGoogleタグマネージャー(以降、GTM)におけるデータレイヤーについて解説します。
目次
データレイヤーとは?
データレイヤー(dataLayer)とは、Webサイトの情報を収集して貯めておき、Googleタグマネージャー(以下GTM)やGA4などの解析ツールへ受け渡すための箱のようなものです
具体的には、ユーザーがWebページを閲覧した際に、そのページ上のさまざまなイベントやデータ(例:商品ID、購入金額、ユーザーの行動など)を記録し、これをGoogleタグマネージャー(GTM)などのタグ管理ツールが取得できるようにします。
Webサイトがブラウザで表示される際に、目に見えるページの内容と共に、データレイヤーも生成されます。 通常のWebサイト閲覧では見えませんが、裏側では情報として保持されています。
データレイヤーの内容はWebサイトの情報を使用しているため、データレイヤーの内容を変更するには、Webサイトを管理している人に対応してもらう必要があります。 Webサイトのコードに変更を加える必要があるため、場合によっては時間や費用がかかることもあります。 まずは、Webサイトの制作・管理を行っている担当者の方に相談してみてください。
データレイヤーを利用するメリット
なんとなく便利そうだけど、データレイヤーを利用するとどんなメリットがあるのか詳しく見ていきましょう。
Webページの表面に表示されていない情報を広告配信や計測に利用できる
Web広告の計測で、ページ内には表示されていない項目を利用したい場合がありますよね。
例えば、商品詳細ページでタグを発火させるときに商品の情報をタグで取得したい場合、商品IDや商品カテゴリがページ内の人間が見る箇所には記載されていないことがあります。
そうした場合にデータレイヤーを利用すれば、人間が見る部分とは別にデータレイヤーに必要な情報を持つことができ、タグの発火時に使用できます。
変数の作成が楽になる
GTMでのタグ設定で、商品情報などをタグに追加する時に、データレイヤーを利用して変数を簡単に作ることができます。
(データレイヤー変数について詳しくは後述します)
データレイヤーの活用方法
データレイヤーがどんなものかがわかったところで、実際にどのように活用できるのか、具体的な活用方法をみていきましょう。
データレイヤーを活用した広告タグのデータ連携の仕組み
情報の流れとしては、Webサイト⇒GTM⇒広告媒体の順にデータを渡していきます。
データレイヤーを作成する
ウェブサイトが表示される際に、ページの内容と一緒にデータレイヤーを作成します。Webページの読み込みは上から下に順番に行われます。データレイヤーを作成するコードは、データレイヤーを利用するGTMコンテナタグより上に記述しておく必要があります。
データレイヤーの作成が完了していない状態でGTMで変数にデータレイヤーの内容を使用しようとすると、変数の内容が空でエラーが発生します。
データレイヤーにデータを設定する
データレイヤーを作成するとき、あらかじめ決めておいた項目に対応する値が設定されます。 これらの項目を「キー」と呼びます。 データレイヤーは、キーと値が組になった形で作られます。キーは複数設定することも可能です。
例えば、通販サイトの購入完了ページでは、購入した商品の商品ID、価格、購入したユーザーのユーザーIDといった情報を都度記録することになります。 Webサイトが表示されるときには、毎回ページの内容に従って、データレイヤーの内容が更新される設定にすることで、指定した項目の値を、ページ内容に応じて取得することが可能になります。
GTMで読み取る
GTMでデータレイヤーのデータを利用するためには、「データレイヤー変数」を使用します。 データレイヤー変数は、GTMにあらかじめ用意されている変数のタイプの一つです。データレイヤーのキーを指定するだけで、対応する値をそのまま変数として使用することができます。
キャプチャの例では、データレイヤーの「value」というキーの値を取得する設定になっています。例のページでは、「value」に商品の価格を設定しているので、毎回異なる商品の価格が取得できる、という変数です。
タグの情報として広告媒体へ送信する
データレイヤー変数をタグに設定することで、タグ発火時にイベント情報と各種データを一緒に送信することができます。
キャプチャはGoogle広告のコンバージョンタグに前述のデータレイヤー変数をセットした例です。
この例では、コンバージョンタグが発火する際にコンバージョン値(売り上げ価格)として変数「value」が送信されます。
データレイヤーを確認する方法
Webサイト上にある仕組みですが、表面的には把握できないデータレイヤーは、Webブラウザ上の機能や、取り込まれた先のGTMのプレビュー機能で確認できます。実際の方法をみていきましょう。
ブラウザの開発者ツールで確認する方法
ブラウザには開発者ツールという、WebサイトのHTMLやCSS、JavaScriptなどをチェックできる機能があります。主にWebサイトの制作やメンテナンスに使うものですが、広告計測タグの発火チェックにも使用します。この開発者ツールを使って、目的のWebページのデータレイヤーを確認することができます。
今回はChromeブラウザでの使い方をご紹介します。他のブラウザでの使い方は公式ヘルプなどをご参照ください。
【Chromeブラウザでデータレイヤーを確認する手順】
- Chromeブラウザで目的のWebページを開きます
- 「F12」キーを押します。開発者ツールが開きます
- 「Console」タブを選択します
- 「dataLayer」と入力し、Enterキーを押します
以上の手順で、データレイヤーの中身を見ることができます。
データレイヤーの読み方(開発者ツールの場合)
上述の手順で「dataLayer」と入力してEnterキーを押すと、入力した箇所の下にデータレイヤーの内容が表示されます。
表示された行の先頭に▶マークがついていますね。これをクリックすると、折りたたまれている詳細が表示されます。
さらに、目的のキーが記載されている行の先頭の▶マークをクリックします。
(何行目に記載されているかは、その時のデータレイヤーの内容によって変わります)
データレイヤーの中身は、「キー:値」の形で記述されています。このキャプチャだと、「ID」と「value」がキー、「”aaa”」と「5000」がそれぞれ対応する値です。このページの場合は、商品IDがaaa、商品の価格が5,000円です。
GTMプレビューでデータレイヤーの中身を確認する方法
目的のWebページのGTMの権限をお持ちの場合は、GTMプレビューでデータレイヤーの中身を見ることができます。
【GTMプレビューでデータレイヤーを確認する手順】
- 目的のWebページに設定しているGTMコンテナを開きます
- 管理画面右上の「プレビュー」ボタンをクリックします
- プレビュー画面が開いたら、「DataLayer」タブをクリックします
以上の手順で、データレイヤーの中身を見ることができます。
画面左の「Summary」で確認したいタイミングを選んでログを見ることができます。データレイヤーを広告計測タグに利用する場合は、広告計測タグの発火タイミングでデータレイヤーがどうなっているかを確認しましょう。
(例えば、データレイヤーを利用する予定の広告計測タグが「DOM Ready」で発火する設定になっている場合は、「DOM Ready」のログを確認しましょう)
データレイヤーの読み方(GTMプレビューの場合)
読み方は開発者ツールの場合と同じですが、GTMプレビューの場合ははじめから詳細が展開した状態で表示されています。キャプチャでは、確認したいページのDOM Readyのタイミングでデータレイヤーの中身がどうなっているかを表示しています。利用したいキーを探して、値を確認してください。
データレイヤーを実装・変更する時に確認すること
データレイヤーの実装には多くの場合に開発を伴います。スムーズかつ正確にデータレイヤーを実装するためにも、用途などを事前にすり合わせておくことが大切です。以下に確認しておきたいポイントをまとめました。
何に使うデータなのか
「広告計測タグにデータレイヤーを使いたい」と言われた場合、詳しく用途を確認しておきましょう。少なくとも使用する広告媒体、配信メニューは確認しておきたいところです。
Webサイトのどのページ、どのタイミングで必要なのか
広告計測タグに必要なデータは、イベントごとに変わります。各イベントがどのページで発火する予定なのか、どのイベントでどのデータが必要なのかなど、あらかじめ整理しておきましょう。 タグの設計書に、データレイヤーで取得する項目を記載しておくと理解しやすいです。
必要なデータの形式
「広告配信に利用するためにデータレイヤーを作ってほしい」と言われた場合、取得する項目についても要件を確認しておきましょう。
代表的な確認ポイントは次の通りです。
- 取得するIDはフィードの項目などと一致していないといけないか?
- SKUなどある場合は、どのIDを取得するか?
- 商品価格は税込みか税抜きか?
- メールアドレスなど、ハッシュ化が必要な項目はハッシュ化の方式(SHA256など)を確認する
リクエストされた項目が意図通りに活用できるように、あらかじめすり合わせを行うようにしましょう。
後から必要になりそうなデータはまとめて実装しておくと便利
配信が軌道にのり、広告予算が上がったタイミングで、広告媒体を追加することはよくありますよね。
このとき、これまでの媒体では必要なかったデータが必要になると改めてデータレイヤーの設定を修正することになります。すべての媒体をカバーすることは難しいですが、よく使う項目はあらかじめセットでデータレイヤーに入れておくと、後で修正が少なくて済むのでおすすめです。
まとめ
データレイヤーは、データフィード広告の他にも、近年重要度が増してきた拡張コンバージョンでも使用することが多くあります。はじめはとっつきにくく思えるかもしれませんが、慣れてしまえば広告配信や計測に利用するのはさほど難しくありません。
いまWebサイトにあるデータレイヤーの確認の仕方、追加をお願いする時のポイントを押さえて、上手に活用していきましょう。