【完全解説】実例コードありGTMのデータレイヤーを設定から活用
目次
データレイヤーとは？
データレイヤーは、Googleタグマネージャー（GTM）において、ウェブサイトやアプリケーションのデータを一時的に保存し、タグに受け渡すためのデータ層です。JavaScriptのオブジェクトとして実装され、サイト上の様々なデータ（ユーザー情報、ページ情報、イベント情報など）を統一された形式で管理・計測することができます。
データレイヤーを活用することで、通常GA4では計測できないデータも計測が可能になり且つ、タグの設定やイベントトラッキングがより柔軟になります。特に、ECサイトやコンテンツサイトなど、複雑なデータ管理が必要なウェブサイトでは、データレイヤーの活用してデータを計測することがあります。
データレイヤーの基本構造
データレイヤーは、JavaScriptオブジェクトとして以下のような構造を持ちます。
1. 基本的な構文
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'eventName',
'eventCategory': 'category',
'eventAction': 'action',
'eventLabel': 'label'
});2.主要な要素
- イベント名
- イベントカテゴリ
- イベントアクション
- イベントラベル
- カスタム変数
3.データ型
- 文字列
- 数値
- 配列
- オブジェクト
- ブール値
データレイヤーの構造は、計測したいものに応じてカスタマイズ可能です。ただし、一貫性のある命名規則と構造を維持することが重要です。特に命名規則は重要です。命名規則をあらかじめ決めておくと複数人で管理する場合管理がしやすくなります。
データレイヤーの実装方法
データレイヤーの実装は、サイトの要件に応じて適切な方法を選択する必要があります。以下に、主な実装方法とそのポイントを解説します。
基本的な実装手順
データレイヤーの実装は、以下の手順で行います。
1.コードの配置
- GTMコンテナの前にデータレイヤーコードを配置
- <head>タグ内での実装を推奨
- 同期的な読み込みの確保
2.イベントの定義
- 必要なイベントの洗い出し
- イベントパラメータの設計
- トリガー条件の検討
3.テストと検証
- デバッグコンソールでの確認
- プレビューモードでのテスト
- クロスブラウザでの動作確認
これらの手順を丁寧に実施することで、信頼性の高いデータレイヤーを構築できます。
注意点
データレイヤーのJavaScriptはhead内の上部に設置することが好ましいです。
GTMタグよりも上部に設置するしてください。GTMタグのよりも下に設置すると正しく計測されないことがあります。
ECサイトでの実装例
ECサイトでのデータレイヤー実装には、以下のような情報を含めることが一般的です。
1.商品情報
dataLayer.push({
'event': 'productView',
'productInfo': {
'productId': '12345',
'productName': 'サンプル商品',
'price': 1980,
'category': 'アパレル',
'stock': 100
}
});2.カート操作
- 商品追加
- 数量変更
- カート削除
- 合計金額の更新
3.購入情報
- 注文ID
- 購入商品リスト
- 合計金額
- 割引情報
- 配送方法
データレイヤーの活用方法
データレイヤーを効果的に活用することで、より詳細なデータ分析が可能になります。
イベントトラッキング
データレイヤーを使用したイベントトラッキングの実装方法。
1.クリックイベント
dataLayer.push({
'event': 'buttonClick',
'buttonName': 'お問い合わせ',
'buttonLocation': 'ヘッダー',
'userType': 'guest'
});2.フォーム送信
- 入力開始
- 入力完了
- エラー発生
- 送信成功
3.スクロール追跡
- スクロール深度
- 滞在時間
- コンテンツの可視状態
カスタム変数の活用
データレイヤーを使用したカスタム変数の設定と活用例は下記のような形のデータを計測することができます。
1.ユーザー情報
- ログイン状態
- 会員ランク
- 購入履歴
- 閲覧履歴
ユーザーがログインしているユーザーかどうかやそのユーザーがサイト内でどのような行動をしているかを計測することができます。
2.ページ情報
- カテゴリ
- タグ
- 著者
- 公開日
3.サイト状態
- キャンペーン情報
- セール状況
- 在庫状態
- システム状態
データレイヤーのデバッグと管理
データレイヤーの正常な動作を確保するために、デバッグと管理が必要です。GTMを設置した際には、必ずデータが計測されているかデバッグモード（GTMのプレビューモード）で確認するようにしてください。
GTMなどの設置が正しいかデータレイヤーが正しく計測されているかどうか確認するチェックツールもありますので、ご使用ください。
デバッグ方法
データレイヤーのデバッグには以下の方法があります。
1.ブラウザの開発者ツール
- コンソールでのデータ確認
- ネットワークタブでの通信確認
- エラーの検出
2.GTMプレビューモード
- イベントの発火確認
- 変数の値の確認
- データの整合性チェック
3.サードパーティツール
- データレイヤーチェッカー
- デバッグ支援ツール
データレイヤーの実装でご不明点などがありましたらお気軽にご相談ください。ご相談はこちら
関連する記事
よく読まれている記事
新しい記事はありません