dataLayerとは？GTMでデータを受け渡す仕組みと使い方を解説
Webサイトの計測について調べていると、「dataLayer」という言葉を目にすることがあります。
「GTMの設定で出てきたけれど、何をするものなの？」
「GA4やGoogleタグマネージャーとは、どのような関係があるの？」
と迷う方もいるのではないでしょうか。
dataLayerは、Webサイト上で発生した情報をGoogleタグマネージャーへ渡すために使われる仕組みです。
たとえば、ユーザーがボタンをクリックしたことや、購入した商品の名前、金額、会員の種類などをdataLayerへ追加すると、その情報をGTMのタグやトリガー、変数で利用できます。
ただし、すべての計測でdataLayerを用意しなければならないわけではありません。
通常のページ表示やリンククリックなど、GTMがWebページから取得できる情報であれば、dataLayerを追加せずに計測できる場合もあります。
この記事では、dataLayerとは何か、GTMとどのようにつながっているのか、基本的な使い方や確認方法について解説します。
INDEX
dataLayerとは？
dataLayerは、WebサイトやアプリからGoogleタグマネージャーなどのタグへ情報を受け渡すために使われる仕組みです。
Webサイトで発生した情報をいったんdataLayerへ追加し、その情報をGTMが読み取って、タグの動作条件や送信するデータに利用します。
dataLayerは、WebサイトやアプリからGoogleタグマネージャーなどのタグへ情報を受け渡すために使われる仕組みです。
Googleの公式ドキュメントでも、dataLayerはWebサイトからGTMやGoogleタグへ情報を渡すための仕組みとして紹介されています。
たとえば、次のような情報をdataLayerへ追加できます。
ボタンがクリックされた
フォームが送信された
ユーザーがログインした
商品がカートへ追加された
購入が完了した
商品名や商品価格
会員・非会員などのユーザー区分
ページの種類
dataLayerは、これらの情報を直接分析するための画面ではありません。
WebサイトとGTMの間で情報を受け渡す、情報の置き場所のようなものと考えると分かりやすいでしょう。
dataLayerとGTMの関係
dataLayerとGTMは、次のような流れでつながっています。
Webサイトで操作が発生する
↓
情報をdataLayerへ追加する
↓
GTMがdataLayerの情報を読み取る
↓
設定した条件に応じてタグが動く
↓
GA4などへデータを送信する
たとえば、ユーザーが「資料をダウンロードする」ボタンをクリックしたときに、次のような情報をdataLayerへ送信するとします。
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
event: 'download_document',
document_name: 'サービス資料'
});
</script>この例では、dataLayerへ次の2つの情報を追加しています。
event：発生した操作の名前document_name：ダウンロードされた資料名
GTMでは、download_documentというイベントをきっかけにタグを動かし、document_nameの値をGA4へ送信できます。
dataLayerはどのようなときに使う？
dataLayerは、GTMだけでは取得しにくい情報を計測したいときに役立ちます。
商品や購入に関する情報を送るとき
ECサイトでは、次のような情報をGA4へ送ることがあります。
商品名
商品ID
商品価格
購入金額
購入した個数
クーポン名
これらの情報は、画面に表示されている文字だけから正確に取得するのが難しい場合があります。
そこで、システム側からdataLayerへ商品情報を追加し、GTMを通してGA4へ送信します。
ログイン状態や会員区分を使うとき
Webサイト内では、ログインしているかどうかや、会員の種類によって表示内容が変わることがあります。
たとえば、
ログイン済み
未ログイン
無料会員
有料会員
といった情報をdataLayerへ追加すれば、ユーザー区分ごとの利用状況を確認しやすくなります。
ただし、メールアドレスや氏名など、個人を特定できる情報をそのままGA4へ送信しないよう注意が必要です。
Webサイト独自の操作を計測するとき
GTMには、クリックやフォーム送信などを検知する機能があります。
一方で、JavaScriptで動く画面や、独自に作られたフォームなどでは、通常のトリガーだけでは操作を正しく捉えられないことがあります。
その場合、操作が完了したタイミングでdataLayerへイベントを送信すると、GTMで検知しやすくなります。
dataLayer.push()とは？
dataLayer.push()は、dataLayerへ新しい情報を追加するときに使います。
イベント名だけを送る場合は、次のように記述します。
dataLayer.push({
event: 'form_complete'
});この例では、form_completeというイベントをdataLayerへ追加しています。
Googleタグマネージャーでは、eventという項目に指定した名前をカスタムイベントとして検知できます。
イベントと一緒に、ほかの情報を追加することもできます。
dataLayer.push({
event: 'form_complete',
form_name: 'お問い合わせフォーム',
form_location: 'サービスページ'
});この場合は、次の情報が送られます。
イベント名：
form_completeフォーム名：
お問い合わせフォーム設置場所：
サービスページ
複数の情報をまとめて送信することで、どのフォームがどのページから送信されたのかなどを分析できます。
dataLayerを使った計測の流れ
dataLayerを使ってイベントを計測する場合は、主に次の流れで設定します。
WebサイトからdataLayerへ情報を送る
GTMでカスタムイベントトリガーを作成する
必要に応じてデータレイヤー変数を作成する
GA4イベントタグへトリガーと変数を設定する
プレビューモードで動作を確認する
問題がなければGTMを公開する
ここでは、次のdataLayerが送信される場合を例にします。
dataLayer.push({
event: 'download_document',
document_name: 'サービス資料'
});GTMでカスタムイベントトリガーを作成する
まず、dataLayerへ送信されたイベント名をGTMで受け取るために、カスタムイベントトリガーを作成します。
1．GTMの「トリガー」を開く
Googleタグマネージャーへログインし、対象のコンテナを開きます。
左側のメニューから「トリガー」をクリックし、「新規」を選択します。
2．「カスタムイベント」を選択する
「トリガーの設定」をクリックし、トリガータイプから「カスタムイベント」を選択します。
3．イベント名を入力する
「イベント名」に、dataLayerのeventへ指定した名前を入力します。
今回の例では、次のように設定します。
download_documentdataLayerへ送るイベント名とGTMに入力するイベント名が異なると、トリガーは動作しません。
大文字と小文字も区別されるため、同じ表記を使用しましょう。
4．トリガーを保存する
分かりやすい名前を付けて保存します。
たとえば、次のような名前です。
カスタムイベント - download_documentGTMでデータレイヤー変数を作成する
イベント名と一緒に送信した値をGA4で利用する場合は、GTMでデータレイヤー変数を作成します。
今回の例では、document_nameの値を取得します。
1．「変数」を開く
GTMの左側メニューから「変数」をクリックします。
「ユーザー定義変数」にある「新規」を選択してください。
2．「データレイヤーの変数」を選択する
「変数の設定」をクリックし、「データレイヤーの変数」を選択します。
3．データレイヤーの変数名を入力する
「データレイヤーの変数名」に、dataLayerへ送信した項目名を入力します。
document_nameGTMでは、dataLayer.push()で追加された値をデータレイヤー変数として取得できます。
4．変数を保存する
変数の内容が分かる名前を付けます。
たとえば、
DLV - document_nameのようにすると、データレイヤー変数であることを見分けやすくなります。
DLVは「Data Layer Variable」の略です。
GA4イベントタグへ設定する
カスタムイベントトリガーとデータレイヤー変数を作成したら、GA4イベントタグへ設定します。
1．GA4イベントタグを作成する
GTMの「タグ」を開き、「新規」をクリックします。
タグの種類から、GA4へイベントを送信するためのタグを選択します。
2．イベント名を設定する
GA4へ送信するイベント名を入力します。
今回の例では、次のように設定します。
download_document3．イベントパラメータを設定する
資料名もGA4へ送りたい場合は、イベントパラメータへ次の内容を設定します。
パラメータ名 | 値 |
|---|---|
document_name | {{DLV - document_name}} |
これにより、dataLayerへ送られた資料名をGA4のイベントパラメータとして送信できます。
4．トリガーを設定する
先ほど作成したカスタムイベントトリガーを選択します。
タグを保存したら、プレビューモードで動作を確認します。
dataLayerが正しく動いているか確認する方法
dataLayerの内容は、GTMのプレビューモードで確認できます。
1．GTMの「プレビュー」をクリックする
GTMの画面右上にある「プレビュー」をクリックします。
確認するWebサイトのURLを入力し、「接続」をクリックしてください。
2．確認する操作を行う
Webサイトが開いたら、dataLayerを送信する操作を行います。
今回の例では、資料ダウンロードボタンをクリックします。
3．イベントを確認する
Tag Assistantへ戻り、左側のイベント一覧にdownload_documentが表示されているか確認します。
表示されていれば、dataLayerへイベントが送信されています。
4．Data Layerの内容を確認する
対象のイベントを選択し、「Data Layer」を開きます。
次のような情報が表示されているか確認します。
{
event: "download_document",
document_name: "サービス資料"
}イベント名と値が正しく表示されていれば、dataLayerへの送信はできています。
5．タグの動作を確認する
対象のイベントを選択し、設定したGA4イベントタグが「Tags Fired」に表示されているか確認します。
「Tags Fired」に表示されていれば、そのイベントをきっかけにタグが動いています。
イベントは表示されているのにタグが動かない場合は、次の項目を確認しましょう。
dataLayerのイベント名
カスタムイベントトリガーのイベント名
タグに設定したトリガー
トリガーの発火条件
大文字と小文字の違い
dataLayerを使うときの注意点
dataLayerを上書きしない
dataLayerへ情報を追加するときは、dataLayer.push()を使用します。
次のように書くと、すでにdataLayerに入っている情報を上書きしてしまう可能性があります。
dataLayer = [{
event: 'form_complete'
}];dataLayerを初期化するときは、次のように記述します。
window.dataLayer = window.dataLayer || [];情報を追加するときは、次のように記述します。
dataLayer.push({
event: 'form_complete'
});Googleも、既存のdataLayerを上書きせず、push()で追加するよう案内しています。
名前の表記を統一する
dataLayerでは、大文字と小文字が区別されます。
たとえば、次の2つは別の名前として扱われます。
document_name
documentName同じ情報をページによって異なる名前で送ると、GTMで正しく取得できません。
イベント名や変数名の付け方をあらかじめ決めておくと、管理しやすくなります。
個人情報を送らない
メールアドレス、氏名、電話番号など、個人を特定できる情報をGA4へ送信しないようにしましょう。
dataLayerへ情報を追加するときは、そのデータをGTMやGA4で使用して問題がないか確認することが大切です。
設計を決めてから実装する
dataLayerのイベント名や変数名を後から変更すると、GTM側の設定も修正する必要があります。
実装前に、次の内容を整理しておきましょう。
何を計測するか
いつdataLayerを送信するか
イベント名を何にするか
一緒に送る値は何か
GA4でどのように確認するか
開発担当者とGTMの設定担当者が別の場合は、一覧表にして共有すると認識のずれを防ぎやすくなります。
dataLayerに関するよくある質問
dataLayerを使わないとGTMは利用できませんか？
すべての設定で、dataLayerを個別に追加する必要はありません。
ページURLやクリックされたリンク、フォームの送信など、GTMの標準機能で取得できる情報もあります。
商品情報や会員区分、独自の操作など、GTMだけでは正確に取得しにくい情報を扱うときにdataLayerが役立ちます。
dataLayerはGA4の機能ですか？
dataLayerはGA4だけの機能ではありません。
WebサイトからGTMやGoogleタグへ情報を渡すための仕組みです。
dataLayerに追加した情報は、設定に応じてGA4やGoogle広告などのタグで利用できます。
dataLayerの設定はGTMだけでできますか？
GTM側の変数やトリガーはGTMで設定できます。
ただし、WebサイトからdataLayerへ独自の情報を送信する処理は、Webサイト側への実装が必要になる場合があります。
商品情報やログイン状態など、システム内部の情報を送る場合は、開発担当者への依頼が必要です。
dataLayerへ送信された内容はどこで確認できますか？
GTMのプレビューモードで確認できます。
Tag Assistantで対象のイベントを選び、「Data Layer」を開くと、イベント名や変数の値を確認できます。GoogleもTag AssistantでdataLayerの状態を確認できると案内しています。
まとめ
dataLayerは、Webサイト上で発生した情報をGoogleタグマネージャーへ渡すために使われる仕組みです。
dataLayerへイベント名や値を追加すると、GTMのトリガーや変数で利用できます。
基本的な流れは次のとおりです。
Webサイトで操作が発生する
↓dataLayer.push()で情報を追加する
↓
GTMがイベントや値を読み取る
↓
設定したタグが動く
↓
GA4などへデータを送信する
dataLayerは、商品情報や購入金額、会員区分、Webサイト独自の操作など、GTMだけでは取得しにくい情報を計測するときに役立ちます。
一方で、すべての計測にdataLayerが必要なわけではありません。
まずは計測したい内容を整理し、GTMの標準機能で取得できるか、dataLayerへの実装が必要かを確認しましょう。
このブログでは、GA4の設定方法だけでなく、
「どこを見ればいいのか」
「数字をどう読み取ればいいのか」
といった、次の一歩に気づくための視点もお届けしていきます。