Webサイトでユーザーの行動を分析する際、要素が画面に表示されたタイミングを検知したいと思い、Vue.jsのコンポーネントで Intersection Observer API を使用して要素の表示を検知し、Google Analytics 4（GA4）でトラッキングする実装方法を紹介します。
目次
目的
- カードコンポーネントの画面表示を検知
- GTM経由でGA4にイベントを送信
- 表示データの分析
実装フロー
- Vueコンポーネントで要素の表示を検知
- dataLayerにイベントをプッシュ
- GTMでイベントを捕捉
- GA4にデータを送信
Vueコンポーネントの実装
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | import { ref, onMounted } from 'vue' interface Props { items: Array<{ id: string title: string }> } const props = defineProps<Props>() const itemRefs = ref<any[]>([]) onMounted(() => { itemRefs.value.forEach((elementRef, index) => { if (!elementRef) return const observer = new IntersectionObserver((entries) => { if (entries[0].isIntersecting) { const item = props.items[index] // dataLayerにイベントをプッシュ window.dataLayer?.push({ event: 'item_view', item_id: item.id, item_title: item.title, eventModel: { send_to: 'G-XXXXXXXX' } }) observer.disconnect() } }) observer.observe(elementRef.$el || elementRef) }) }) </script> <template> <div> <div v-for="(item, index) in items" :key="item.id" :ref="el => itemRefs[index] = el" > <!-- カードの内容 --> </div> </div> </template> |
ref配列の使用
itemRefs配列を使って、複数のカードコンポーネントへの参照を管理しています。Vue3のref属性の動的な割り当てを活用しています。
Intersection Observer APIの設定
各カードごとに個別のObserverを作成しています。一度表示を検知したらdisconnect()で監視を停止し、重複計測を防止します。
dataLayerへのデータ送信
カードのIDとタイトルを送信し、eventModelを使って送信先のGA4を指定しています。
GTMの設定
続いて、Google Tag Managerの設定手順です。
1. 変数の設定
まずは、dataLayerから送信されたデータを受け取るための変数を設定します。
GTMの変数設定で以下の2つを作成します。
1 2 3 4 5 6 7 8 9 | 【Item ID変数の設定】 - 変数名: Item ID - 種類: データレイヤー変数 - データレイヤー変数名: item_id 【Item Title変数の設定】 - 変数名: Item Title - 種類: データレイヤー変数 - データレイヤー変数名: item_title |
これらの変数は、後ほどGA4にデータを送信する際のパラメータとして使用します。
2. トリガーの設定
次に、イベントを検知するためのトリガーを設定します。
1 2 3 4 | 【トリガーの設定】 - トリガー名: Item View - トリガータイプ: カスタムイベント - イベント名: item_view |
このトリガーは、dataLayerにプッシュされたitem_viewイベントを検知します。
3. タグの設定
最後に、GA4にデータを送信するためのタグを設定します。
1 2 3 4 5 6 7 8 | 【タグの設定】 - タグ名: GA4 - Item View - タグタイプ: Google タグ - 測定ID: G-XXXXXXXX イベントパラメータ: - item_id: {{Item ID}} - item_title: {{Item Title}} |
GA4での設定と分析
カスタムディメンションの設定
GA4でデータを分析するために、まずカスタムディメンションを設定する必要があります。
管理画面から以下のディメンションを作成します。
- Item ID（イベントスコープ）
- Item Title（イベントスコープ）
レポートの作成
探索レポートを使って、以下のように分析が可能です。
- ディメンション：Item Title
- 指標：イベントカウント
- フィルター：イベント名 = item_view
これにより、各カードの表示回数を確認できます。
デバッグのポイント
1. GTMのプレビューモード
GTMのプレビューモードでは以下を確認します。
- dataLayerにイベントが正しく送信されているか
- 変数が期待通りの値を取得できているか
- タグが正しいタイミングで発火しているか
2. GA4のデバッグビュー
GA4のデバッグビューでは
- イベントが正しく送信されているか
- パラメータが正しく設定されているか
を確認できます。
よくあるトラブルと解決方法
イベントが発火しない
- dataLayerの実装を確認
- コンソールでエラーがないか確認
パラメータが取得できない
- GTMの変数名が正しいか確認
- dataLayerの構造を確認
GA4にデータが反映されない
- 測定IDが正しいか確認
- 最大48時間の遅延を考慮
→ 実際に24時間くらいデータが反映されず、実装が間違っているのかと見直していましたが時間が経てば反映されてました
参考リンク
Introduction to Google Analytics | Google for Developers
Google アナリティクスについて | Google Analytics | Google for Developers