月: 2025年1月

Webサイトでユーザーの行動を分析する際、要素が画面に表示されたタイミングを検知したいと思い、Vue.jsのコンポーネントで Intersection Observer API を使用して要素の表示を検知し、Google Analytics 4（GA4）でトラッキングする実装方法を紹介します。 目的 カードコンポーネントの画面表示を検知 GTM経由でGA4にイベントを送信 表示データの分析 実装フロー Vueコンポーネントで要素の表示を検知 dataLayerにイベントをプッシュ GTMでイベントを捕捉 GA4にデータを送信 Vueコンポーネントの実装 [crayon-6779e596497e8702205318/] ref配列の使用 itemRefs配列を使って、複数のカードコンポーネントへの参照を管理しています。Vue 3のref属性の動的な割り当てを活用しています Intersection Observer APIの設定 各カードごとに個別のObserverを作成しています。一度表示を検知したらdisconnect()で監視を停止し、重複計測を防止します。 dataLayerへのデータ送信 カードのIDとタイトルを送信し、eventModelを使って送信先のGA4を指定しています。 GTMの設定 続いて、Google Tag Managerの設定手順を見ていきます。 1. 変数の設定 まずは、dataLayerから送信されたデータを受け取るための変数を設定します。 GTMの変数設定で以下の2つを作成します。 [crayon-6779e596497ec866847708/] これらの変数は、後ほどGA4にデータを送信する際のパラメータとして使用します。 2. トリガーの設定 次に、イベントを検知するためのトリガーを設定します。 [crayon-6779e596497ee286023567/] このトリガーは、dataLayerにプッシュされたitem_viewイベントを検知します。 3. タグの設定 最後に、GA4にデータを送信するためのタグを設定します。 [crayon-6779e596497ef967511816/] GA4での設定と分析 カスタムディメンションの設定 GA4でデータを分析するために、まずカスタムディメンションを設定する必要があります。 管理画面から以下のディメンションを作成します。 Item ID（イベントスコープ） Item Title（イベントスコープ） レポートの作成 探索レポートを使って、以下のように分析が可能です。 ディメンション：Item Title 指標：イベントカウント フィルター：イベント名 = item_view これにより、各カードの表示回数を確認できます。 デバッグのポイント 実装後の動作確認で特に注意すべきポイントを紹介します。 1. GTMのプレビューモード GTMのプレビューモードでは以下を確認します。 dataLayerにイベントが正しく送信されているか 変数が期待通りの値を取得できているか タグが正しいタイミングで発火しているか 2. GA4のデバッグビュー GA4のデバッグビューでは イベントが正しく送信されているか パラメータが正しく設定されているか を確認できます。 よくあるトラブルと解決方法 イベントが発火しない dataLayerの実装を確認 コンソールでエラーがないか確認 パラメータが取得できない GTMの変数名が正しいか確認 dataLayerの構造を確認 GA4にデータが反映されない 測定IDが正しいか確認 最大48時間の遅延を考慮 → 実際に24時間くらいデータが反映されず、実装が間違っているのかと見直していましたが時間が経てば反映されてました 参考リンク https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API https://developers.google.com/analytics/devguides/collection/ga4 https://developers.google.com/analytics/devguides/collection/ga4?hl=ja

Intersection Observer APIを使用したGTM/GA4イベントトラッキングの実装