GTMのデータレイヤーの解説
Webサイトのアクセス解析やマーケティング施策の効果測定には、適切なデータ収集が不可欠です。Google Tag Manager（GTM）のデータレイヤーを活用することで、より詳細なデータ収集と分析が可能になります。本記事では、データレイヤーの基本から実践的な活用方法まで、分かりやすく解説していきます。
結論、データレイヤーは通常計測することができないデータを計測するためのツールです。
目次
データレイヤーとは何か
データレイヤーは、Webサイト上で発生するさまざまなイベントやユーザーの行動データを一時的に保存する仮想的なデータ層です。JavaScriptのオブジェクトとして実装され、GTMを通じてアナリティクスツールにデータを送信する際の橋渡しの役割を果たします。
イメージが湧きにくいかと思いますが、サイトから収集データを一時的にデータレイヤー（GTM）に渡して、アナリティクスなどにデータ渡して計測する役割です。
通常は、サイトから直接データをアナリティクスに渡しているところの間に入り、データを集約してアナリティクス側に送信します。
データレイヤーが必要な理由
では具体的にデータレイヤーが必要な場合はどんな時かと言うと。
通常のアナリティクスの解析では、取得することができない深いデータを収集したい場合や自社のKPIに沿ったデータを収集したい場合になります。アナリティクスでも一定のデータは取得することができますが、完全に自社にあったものではないことが多いです。その場合にはデータレイヤーを使い細かいデータを収集する必要があります。
- 柔軟なデータ収集が可能
- 自社のKPIに沿ったデータ収集が必要
- 複数のマーケティングツールでデータ共有が必要
- カスタムイベントの詳細な追跡が可能
データレイヤーの基本構造
基本的なコードの記述方法と設定方法が決まっております。これに沿って設定する必要があり、エラーになると収集することができません。コードの記述が必要になりますが、ChatGTPなどを駆使すれば、コードの理解がなくても設定できるものはあります。
データレイヤーの実装方法
データレイヤーは下記のコードがベースになります。このベースに沿って取得したい条件や方法などをJavaScriptで記述していくことになります。
データレイヤーのコードの中の { } の括弧の中に必要なデータを記述します。
具体的な記述方法は別のセクションでご紹介します。
<script>
dataLayer = [];
dataLayer.push({
//ここの処理を記述
});
</script>基本的なデータ構造
- イベント名
- イベントカテゴリ
- イベントアクション
- イベントラベル
- カスタムデータ
基本のデータ構造のデータレイヤーのコード例
コード自体の細かい解説は割愛しますが、基本的な記述方法になりますので、取得したいデータなどによって変わってきます。
// データレイヤーの初期化
<script>
// グローバルのデータレイヤー配列を初期化 決まりのようなもの
dataLayer = [];
// 基本的なイベントデータの追加例
dataLayer.push({
'event': 'button_click', // イベント名
'eventCategory': 'CTA', // イベントカテゴリ
'eventAction': 'click', // イベントアクション
'eventLabel': 'sign_up_button', // イベントラベル
'customData': { // カスタムデータ
'userId': 'user123',
'userType': 'new_visitor',
'pageSection': 'hero_section'
}
});上記のコードで「ボタンクリックの計測」をすることができます。
次でイベントトラッキングの設定方法を詳しく紹介します。
イベントトラッキングの設定
イベントトラッキングは、どのようなアクションをされた時に計測するかと言う意味になります。
ボタンをクリックされた時や完了画面が表示された時など、サイトのKPIや取得したいデータによって設定方法がことなります。
今回は、ボタンがクリックされた時に計測するコードを紹介します。
基本的なイベント設定
- クリックイベント
- フォーム送信
- ページビュー
- スクロール深度
イベントコードの実装例（ボタンクリック）
dataLayer.push({
'event': 'buttonClick',
'eventCategory': 'CTA',
'eventAction': 'click',
'eventLabel': 'お問い合わせボタン'
});変数の活用方法
変数は、Webサイトでユーザーの行動や情報を追跡・分析するために使用する「データの入れ物」だと考えてください。スーパーマーケットの商品棚のように、異なる種類の情報を整理して保管する場所のイメージです。
データレイヤー変数の種類
- イベント変数
- ページ変数
- ユーザー変数
- カスタム変数
変数の設定手順
- GTMでの変数定義
- トリガーの設定
- タグへの紐づけ
eコマースデータの実装
基本的なeコマース情報
- 商品情報
- 取引情報
- プロモーション情報
eコマースコードの例
dataLayer.push({
'event': 'purchase',
'ecommerce': {
'purchase': {
'actionField': {
'id': 'T12345',
'revenue': '35.43'
}
}
}
});デバッグと検証方法
プレビューモードの活用
- イベント発火の確認
- 変数値の検証
- エラーチェック
一般的なデバッグツール
- GTMプレビュー
- Chrome開発者ツール
- GAデバッガー
データレイヤーのベストプラクティス
命名規則
命名規則は最も重要になります。命名規則が決まってない場合は、決めるようにしてください。
サイトを運用している期間が短い場合や立ち上げたばかりサイトでは、どのような名前でも問題ないですが、サイト運用期間が長くなると、ページ数も増えてくるとともに計測するべきデータ量も必然的に多くなります。
その際に、GTMで独自でイベントを作成したりすることが必ずあります。GTM上にイベントが増えすぎて動いているかどうかわからないタグなども発生するため必ず初期の段階で命名規則はつけるようにしてください。
- 一貫性のある命名
- 運用保守がしやすい
- 重複や複数計測の回避
- 管理コストの削減
パフォーマンスの最適化
命名規則を決めておくとどのタイミングで取得するデータか判断がつくため、不要な計測や正しい順番で計測することもできるため結果的にパフォーマンスも良くなることがあります。
- 必要最小限のデータ送信
- 適切なイベントのタイミング
- エラー処理の実装
一般的なGTMで計測するべき箇所
下記の例は一般的なものになるため、自社で管理・KPIとして設定しているデータを計測するようにしてください。取得しすぎないようにしてください。データを取得することがたまに目的になっていることもありますので、明確なビジネスの目的に対して重要な指標のデータを取得してください。
フォーム分析
- 入力開始
- 入力完了
- エラー発生
- 送信完了
ユーザー行動分析
- スクロール深度
- 滞在時間
- クリック位置
- 離脱タイミング
トラブルシューティング
よくある問題と解決方法
- イベントが発火しない
- データが正しく送信されない
- 二重カウント
- タイミングの問題
特に多いのがイベントが発火しない。というトラブルになります。この場合は、設定が間違っていることが多いため見直すことで基本的には動くはずです。
しかし、何点か動かない場合もございます。
サイトの仕様上の問題で、ボタンのクラス名などがサイトを表示させたタイミングで変更される仕様のサイトや外部のツールの計測などを行う際に計測ができない原因になっていることがあります。
この仕様にサイトがなっている場合は、データレイヤーでの取得方法を変更する必要があります。
また、サイトが長い間運用されており、複数のデータレイヤーがある場合やリニュアールや一部ページの改修を行うと計測ができないデータが発生することもありますのでご注意ください。
チェックポイント
- コードの記述位置
- イベントの順序
- 変数の定義
- トリガーの設定
- サイトの取得要素の確認
まとめ
GTMのデータレイヤーは、Webサイトの分析に必要不可欠なツールです。適切に設定することで、より詳細なデータ収集と分析が可能になります。本記事で解説した内容を参考に、自社のWebサイトに最適な実装を行ってください。
[技術用語集]
- Google Tag Manager (GTM)
Webサイトにタグを追加・管理するためのタグ管理システム。 - データレイヤー
Webサイト上のデータを一時的に保存する仮想的なデータ層。 - イベント
ユーザーの行動や特定のアクションを示すデータポイント。 - トリガー
タグを実行する条件を定義する設定項目。 - タグ
Webサイトに追加する tracking code や解析用のスクリプト。 - カスタムイベント
標準のイベント以外に、独自に定義したイベント。
よく読まれている記事
新しい記事はありません