Google Tag Managerのデータレイヤー完全ガイド

Google Tag Manager（GTM）は、ウェブサイトの分析とトラッキングを向上させるための優れたツールです。そして、データレイヤーは、トラッキングを次のレベルへと引き上げる機能の一つです。

GTMのデータレイヤーは、ウェブサイト上でのユーザーの操作に関する詳細を収集するJavaScriptオブジェクトです。これを利用すれば、商品の閲覧からユーザーのオペレーティングシステムに至るまで、ほぼあらゆるデータを収集することができます。GTMでデータレイヤーを活用することで、より的を絞ったトラッキングタグやトリガーを設定でき、ユーザー行動へのより深い洞察が得られ、堅牢な顧客データ分析のための確かな基盤を築くことができます。

そこで私たちは、Google Tag Managerにおけるデータレイヤーの実装と利用について、多くの側面をカバーする包括的なガイドを作成しました。データレイヤーとは何か、その利用シーン、ウェブサイトでのデータレイヤーの実装方法、Tag Managerでのデータレイヤーの作成方法、設定のテスト方法、そして設定時によくある間違いについて説明します。

それでは始めましょう！

GTMのデータレイヤーは、タグにデータを渡すために使用されるJavaScriptオブジェクトです。これにより、イベントや変数を転送したり、特定の変数の値に基づいてトリガーを設定したりできます。データレイヤーは、Google Tag Managerとgtag.jsの両方で使用されます。

データレイヤーは、ウェブサイトとGoogle Tag Managerの間の仲介役であり、コンテナのために構造化されたデータを保存するハブとして機能します。

次のようなことを行いたい場合、データレイヤーを作成する必要があります。

• 信頼性の高いトラッキングを設定する。 データレイヤーがない場合、HTML DOM （ウェブサイト上のHTML要素を追加、取得、変更、削除するために使用される標準） から直接データを取得し、そのデータを直接GTMコンテナに送信します。問題は、HTML DOMが変化する可能性があり、その結果タグの発火やデータ収集が止まってしまうことです。

データレイヤーを使えば、こうした問題は起こりません。なぜなら、GTMコンテナはページのデータレイヤーからデータを取得するため、HTML DOMよりもはるかに安定しているからです。データの記録が止まるのは、誰かがページのデータレイヤーを壊した場合のみです。

• 特定の条件下でタグデータを充実させる。 例えば、ユーザーが50ドル以上支払った場合のみ、購入イベントの値に関するデータを送信したいとします。ページ全体に散らばった変数、取引の詳細、ページカテゴリ、その他のシグナルを探し回る代わりに、関連する変数とその値 （この場合、購入額＞50ドル） を入力したデータレイヤーを使用することで、タグが必要とするときに必要なデータへすぐにアクセスできるようになります。

このレイヤーに正確にどのようなデータを保存したいかを指定できます。データレイヤーを作成し、トラッキングに必要なパラメータを入力する方法は2つあり、次のセクションで確認します。

GTMはデータレイヤーから必要な値を読み取って取得し、それをGoogle Analytics、Google Ads、Facebook Pixelなどの分析ツールに送信します。

Google Tag Managerでは、dataLayerは「[]」で示されるように配列であり、以下のスクリプトに示されているように「{}」で表されるオブジェクトを含みます。

データレイヤー内の要素は変数と呼ばれ、**「キー」：「値」**のペア（「{}」内に配置）としてフォーマットされます。

GTMは「event」と呼ばれるデータレイヤー変数を使用します。これは、ユーザーがウェブサイト上の要素と対話したときにタグをトリガーするためにJavaScriptのイベントリスナーでも使用されます。つまり、以下の例に基づくと、「event」が「キー」で、「register」が「値」です。

変数についても、構文はイベントと同じです。以下の例では、トラッキング対象の国を取得します。「country」（「variable_name」）が「キー」で、「united states」が「値」（「variable_value」）です。

データレイヤーの実装には、宣言とpushという2つの方法があります。両方の方法の使い方を説明しますが、ご自身に最適な方法に直接進んでいただいても構いません。

簡単に言うと、dataLayer.pushの使用をお勧めします。より一般的で、ほとんどのニーズをカバーしているためです。さらに、この方法はGoogle Tag Manager内のイベントを妨げることがないため、より安全に使用できます。一方、データレイヤー宣言の設定が不適切だと、問題を引き起こしやすくなります。

この方法を使用するには、データレイヤーのスニペットをGoogle Tag Managerコンテナのスニペットの上に配置する必要があります。この場合、データレイヤーはTag Managerが初期化される前に初期化されます。

全体として、これはデータレイヤーを作成する一般的な方法や推奨される方法ではありませんが、GTMコンテナが読み込まれる前にデータポイントを作成し、それをタグ管理に使用したい場合には機能します。

「variable_name」：「variable_value」を必要なパラメータに変更し、GTMスニペットの前のウェブサイトページにコードを貼り付けます。

注： オブジェクトの値をdataLayer配列に割り当てるには「=」演算子を使用します。

push方式は、オブジェクトの要素をデータレイヤーに動的に追加します。データレイヤー宣言方式とは異なり、pushデータを使えば、データレイヤーのスニペットをコード内のどこにでも配置できます。

少し紛らわしいかもしれませんが、dataLayerもまた、windowオブジェクトと対話するあらゆる関数からアクセスできるJavaScript変数です。そのため、dataLayerという名前の他のローカルJavaScript配列との競合を避けるために、最善の方法はwindow.dataLayerというプレフィックスを使用することです。

したがって、dataLayer.push方式には以下のコードを使用する必要があります。「variable_name」：「variable_value」の代わりに、必要なパラメータを追加します。

上記のコードブロックでは、既存のdataLayerがある場合はそれが設定され、ない場合は空の配列として新しいdataLayerが作成されます。||（OR）演算子は、これらの条件のいずれかが満たされた場合に割り当てが行われることを保証します。

この方法により、dataLayerを上書きしてしまう可能性のある複数の宣言を作成することを避けられます。

多くのeCommerce CMSには、標準的なeCommerceイベント向けのデータレイヤーを作成できるプラグイン（Stapeのプラグインを含む）が用意されています。場合によっては、これだけでは不十分なこともあります。例えば、データレイヤーイベントに追加のイベントや追加のデータが必要な場合です。あるいは、完全にカスタマイズされたプラットフォームを使用している場合です。

この場合は、必要なペイロードを持つデータレイヤーイベントを作成するために、開発者に連絡する必要があります。これは通常、開発者にとってかなり単純な作業で、時間もあまりかかりませんが、サイトやプラットフォームのアーキテクチャによって異なります。

いくつかの有用なガイドライン：

• ドキュメントのコピーを作成し、不要なイベントを削除し、必要なイベントとサンプルのペイロードを追加してください。
• すべてのイベントで同じデータ形式を使用してください。GA4形式に従うのが最善です。
• 明白なイベント（例：商品の閲覧やカートへの追加など）でない場合は、いつ発火すべきかを詳細に説明してください。これにより、あなたと開発者との間の不必要なやり取りを避けられます。
• ユーザーデータはほぼすべてのマーケティングプラットフォームで利用できるため、それがデータレイヤーで利用可能であることが重要です――これを活用することで、トラッキング結果が大幅に向上します。
• ユーザーが別のページにリダイレクトされる前に送信されるデータレイヤーイベントは避けるようにしてください。これにより、リダイレクト前にイベントが実際には送信されない可能性があり、データが失われることがあります。例えば、ユーザーがフォームを送信した後にLeadイベントを送信し、その後ユーザーがサンクスページへ送られる場合――ベストプラクティスは、ユーザーが実際にフォームを送信した時点ではなく、サンクスページでこのイベントをデータレイヤーに送信することです。
• サイトにすでにいくつかのデータレイヤーイベントがある場合は、新しいデータレイヤーイベントにはカスタム名を使用し、古いイベントを変更しない方が良いでしょう。そうすることで、既存のトラッキングに影響を与えずに済みます。つまり、データレイヤーにすでに例えばadd_to_cartがある場合、古いものを変更してからタグを新しいイベントに再設定するのではなく、新しいイベントadd_to_cart_v2を作成する方が良いでしょう。
• 開発者がこれを実装した後は、必ずデータレイヤーを確認してください。ペイロード内の小さな誤りであっても、トラッキングの問題を引き起こすことがあります。

1. 商品/アイテムデータ

• item_id – 一意の商品識別子（SKUまたはデータベースID）
• item_name – 商品名
• item_category – 商品カテゴリ（ネストすることが可能：item_category2、item_category3）
• item_brand – ブランド名
• price – 単価
• quantity – 数量

2. 取引データ

• transaction_id – 一意の注文ID（重複排除に不可欠）
• value – 取引の合計金額
• currency – ISO 4217通貨コード（例：USD、EUR）
• tax – 税額
• shipping – 配送料
• coupon – 適用されたクーポンコード

3. ユーザーデータ

• user_id – 内部ユーザー識別子
• email – ハッシュ化されたユーザーのメールアドレス（拡張コンバージョン用）

4. イベント固有のパラメータ

Google Tag Managerでは、データレイヤー配列内の要素に異なる方法でアクセスできます。Google Tag Manager内でデータを活用するには、変数に割り当てるか、イベントトリガーとして使用します。これらの変数やイベントは、その後、タグ、トリガー、または他の変数に組み込むことができます。

以下では、データレイヤーの3つの活用例とGTMでの設定方法を紹介します。

• データポイントとしてのデータレイヤー変数
• イベントをトリガーするためのデータレイヤー
• 変数とイベントトリガーの両方としてのデータレイヤー変数

例として、オレンジ色のTシャツの購入額を取り上げます。

1. 変数の設定には、GTMコンテナ内でVariables → ユーザー定義変数で「New」をクリックします。

2. 変数タイプとして「Data Layer Variable」を選択します。

3. データレイヤー変数名を追加し、「Save」をクリックします。

ご注意ください： このフィールドは大文字と小文字を区別するため、名前がページに追加したコード内の値名と一致していることを確認してください。今回の例では、「purchase_value」です。

コード例として、ユーザーが登録に必要なデータを入力し、「Register」をクリックしたときに「register」イベントをトリガーするdataLayer変数を取り上げます。

1. Google Tag Manager Triggersに移動し、「New」をクリックします。

2. 「Custom Event」トリガータイプを選択します。

3. 「Event name」には、このフィールドが大文字と小文字を区別するため、コード内の値名と同じように名前を追加します。「Save」をクリックします。

以下のデータレイヤー変数の例は、購入イベントをトリガーし、購入情報を作成します。

コードからの変数は、Google Tag Managerで変数としてもイベントトリガーとしても使用できます。変数とイベントについては、前のステップの設定プロセスをご確認ください。

データレイヤーは、クライアントサイドGTMとは異なり、サーバーサイドGoogle Tag Managerには存在しません。

しかし、sGTMにはウェブGTMからのHTTPリクエストをチェックするClientというオブジェクトがあります。リクエストに特定のデータが含まれている場合、Clientはリクエストデータをイベントデータに変換します。タグも、ウェブGTMコンテナからGTMサーバーへデータを送信するために使用されます。

サーバーGTMコンテナのデータポイントを入力するには、ウェブからサーバーGTMへデータを送信する方法を選択する必要があります。一般的な方法には以下があります。

• Google Analytics 4
• Stape Data Tag

この方法は、Google AdsやFloodlightのサーバーサイドトラッキングを設定する場合に特に効果的です。どちらもGA4タグのみに依存しているためです。

1. ウェブGTMで、構成が「Google Analytics: GA4 Event」のタグを作成します。

2. このデータに対して事前定義されたフィールドが見つかり、各パラメータに個別にデータレイヤー変数を割り当てることができます。

Data Tag/Data Clientを使用する主な利点は、データレイヤーや他の一般的なデータを自動的にウェブからGTMサーバーへ送信することです。

1. ウェブGTMコンテナで新しいタグを作成し、タグの構成として「Data Tag」を選択します。

ご注意ください： Data ClientをGTMギャラリーに追加する必要があります。

2. タグの構成で、「Send common data」と「Send all from DataLayer」という2つのチェックボックスを有効にします。

システムは、ウェブGTM内のデータを自動的に解析し、利用可能なすべての情報をサーバーGTMへ転送します。

注：以下では、データを送信するためにGoogleタグを設定する方法を説明します。すでにGoogleタグを設定している場合、新しいタグを作成する必要はありません。以下の手順を飛ばして、カスタムディメンションの作成に関するセクションへ直接進んでください。

この場合、「Shared event settings」セクションのデータレイヤー用コードにあるようなパラメータを追加するだけで済みます。

1. GTMの「Tags」セクションで「New」をクリックし、タグタイプとして「Google Tag」を選択します。

2. GA4測定IDを追加し、「Shared event settings」セクションで、コードに追加したパラメータをリストアップします。

3. トリガーとして「Page View – All Pages」を選択します。

標準パラメータの一覧があります。データレイヤーを使って追跡したいデータがGoogle Analyticsの推奨イベントに含まれていない場合は、GA4アカウントにカスタムディメンションとして手動で追加する必要があります。追加すると、GA4レポートに表示されるようになります。

1. Google Analyticsアカウントで、「Admin」→「Custom definitions」をクリックします。

2. 「Create custom dimension」をクリックし、必要なパラメータを入力します。

• Dimension name – レポートに表示したい名前。
• Scope – イベント、ユーザー、またはアイテムのスコープを選択します。
• Event parameter – データレイヤーのスニペットで指定されている変数名またはイベント名を追加します（このフィールドのデータは大文字と小文字を区別することにご注意ください）。

「Save」をクリックします。

Google Tag Managerが変数を正しく取得しているかを確認するには、通常のGTMでのデバッグと同様のいくつかの簡単な手順を実行する必要があります。

1. 「Preview」をクリックし、デバッグ対象のウェブサイトのURLを追加します。

2. 「Variable」セクションのタブに切り替えます。すべてが正しく機能していれば、このタブに必要なデータが表示されます。

GTMのデバッグモードで問題が発生した場合は、以下のガイドをご確認ください。

• Google Tag Managerのプレビューモードが機能しないのはなぜですか？
• サーバーサイドトラッキング設定のデバッグと監視に関するガイド

Google Analyticsがデータを取得しているかを確認するには、「Admin」→DebugViewに移動します。

変数やイベントがpushされないことに気づいた場合、おそらくオブジェクト名の大文字・小文字の使い方が正しくないか、引用符が抜けている可能性があります。

• dataLayerがキャメルケースになっているか確認してください。

良い例：

悪い例：

• すべての変数名が引用符で囲まれていることを確認してください。

良い例：

悪い例：

ウェブサイト上の必要なすべての場所でタグを発火できない場合は、異なるページ上の変数名を確認してください。

最も頻繁に起こる間違いは、異なるページ間で変数名の大文字・小文字の使い方が一貫していないことです。そのため、名前を見直す必要があります。

良い例：

悪い例：

GTM datalayerは、GTMの重要な構成要素です。これにより、ウェブサイトとのユーザーの操作を記録しつつ、その操作やコンテキストに関する追加データも提供できます。より良いデータ構造を作りたい場合、データレイヤーを使用することが不可欠です。

データレイヤーの概念を実装するのはかなり難しく、複雑なトラッキングインフラを構築するには開発者が必要になる可能性が高いでしょう。

簡単なまとめはこちらです。

• データレイヤーを実装するには、dataLayer.pushメソッドの使用をお勧めします。
• データレイヤーの実装後、データレイヤーをデータポイント、イベントトリガー、またはその両方として使用できます。
• サーバーサイドトラッキングを使用している場合は、データレイヤーのパラメータをクライアントサイドからサーバーサイドのGTMコンテナへ送信してください。
• 設定は必ずGTMデバッグモードで確認してください。
• GA4のレポートでデータを確認するために、（このツールを使用している場合）GA4でカスタムディメンションを追加してください。
• データレイヤーが誤作動を起こす原因となるよくある間違いを避けてください。