この記事ではGoogleタグマネージャー(GTM)などでよく利用されるデータレイヤー(data layer)や、データレイヤー変数について例を用いながら、分かりやすくご紹介します。
また、データレイヤーはGoogleアナリティクスの拡張Eコーマスの計測時にも活用されることが多いです。
データレイヤーとは?

データレイヤーとはウェブサイトからGoogleタグマネージャーなどにサイトやページ情報を共有するためのJavascriptオブジェクトです。分かりやすく言うと、GTMに情報を渡すためのデータの一時保存場所のようなものです。
例えば、商品IDやトランザクションIDなどをGoogleタグマネージャーなどのサービスに明確に渡したい時に利用されます。
データレイヤー変数とは?
データレイヤー変数とはGoogleタグマネージャーなどに情報を渡すための変数です。
データレイヤー変数の例
以下のようなコードがHTMLに記載されているとします。
その場合、「items」や「item_name」がデータレイヤー変数となります。
また、「T-Shirt」は「item_name」に紐づく文字列の値となります
dataLayer.push({ ecommerce: null });
dataLayer.push({
event: "view_item",
ecommerce: {
items: [{
item_name: "T-Shirt"
}]}});
今回の例では、Googleタグマネージャーで「items」を読み込みたい場合は、「ecommerce.items」と設定する必要があります。

データレイヤーを利用するメリット
- GA4やGoogle広告、Facebook広告の計測にあわせたフロントエンドの開発を減らせます
エンジニアサイドはData layerに商品IDや金額をPushするだけで、残りの作業はマーケティングサイドでGTMを設定するだけになります。 - すべての計測タグをGTMで管理可能なため、計測サービスの増減に対応しやすくなります
「GTM上で設定された計測タグでData layerの商品情報を読み込み → タグが発火」のような運用にになり、計測タグ自体はGTM上で管理することになります。
開発に関する補足
GA4などであれば、gtag.jsの実装を行うことで、商品情報を記録することは可能です。
しかし、「Facebook広告にも商品情報を送りたい」・「XXX広告にも商品情報を送りたい」などの要望がビジネスサイドから出てきた時にエンジニアが毎回対応する必要があります。
そこで、データレイヤーにあらかじめ商品情報をPushしておくことで、Googleタグマネージャーで計測タグを設定するだけでよくなります。
また、gtag.jsなど計測タグの設定が変わった際にエンジニアが再度実装するのは面倒です。
データレイヤーに商品情報がPushされていえれば、Googleタグマネージャーで計測タグの設定を変更するだけで済みます。
そのため、データレイヤーを使いこなすことで、マーケティングサイドのみで計測タグの設定や変更に対応できるため、作業効率が上がりやすくなります。