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

Webサイトでユーザーの行動を分析する際、要素が画面に表示されたタイミングを検知したいと思い、Vue.jsのコンポーネントで Intersection Observer API を使用して要素の表示を検知し、Google Analytics 4（GA4）でトラッキングする実装方法を紹介します。

目的

カードコンポーネントの画面表示を検知
GTM経由でGA4にイベントを送信
表示データの分析

実装フロー

Vueコンポーネントで要素の表示を検知
dataLayerにイベントをプッシュ
GTMでイベントを捕捉
GA4にデータを送信

Vueコンポーネントの実装

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>

<div>

<div

v-for="(item, index) in items"

:key="item.id"

:ref="el => itemRefs[index] = el"

</div>

</template>

ref配列の使用

itemRefs配列を使って、複数のカードコンポーネントへの参照を管理しています。Vue3のref属性の動的な割り当てを活用しています。

Intersection Observer APIの設定

各カードごとに個別のObserverを作成しています。一度表示を検知したらdisconnect()で監視を停止し、重複計測を防止します。

dataLayerへのデータ送信

カードのIDとタイトルを送信し、eventModelを使って送信先のGA4を指定しています。

GTMの設定

続いて、Google Tag Managerの設定手順です。

1. 変数の設定

まずは、dataLayerから送信されたデータを受け取るための変数を設定します。

GTMの変数設定で以下の2つを作成します。

【Item ID変数の設定】

- 変数名: Item ID

- 種類: データレイヤー変数

- データレイヤー変数名: item_id

【Item Title変数の設定】

- 変数名: Item Title

- 種類: データレイヤー変数

- データレイヤー変数名: item_title

これらの変数は、後ほどGA4にデータを送信する際のパラメータとして使用します。

2. トリガーの設定

次に、イベントを検知するためのトリガーを設定します。

【トリガーの設定】

- トリガー名: Item View

- トリガータイプ: カスタムイベント

- イベント名: item_view

このトリガーは、dataLayerにプッシュされたitem_viewイベントを検知します。

3. タグの設定

最後に、GA4にデータを送信するためのタグを設定します。

【タグの設定】

- タグ名: 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時間くらいデータが反映されず、実装が間違っているのかと見直していましたが時間が経てば反映されてました

参考リンク

交差オブザーバー API - Web API | MDN

交差オブザーバー API (Intersection Observer API)…

developer.mozilla.org

Introduction to Google Analytics | Google for Developers

developers.google.com

Google アナリティクスについて | Google Analytics | Google for Developers

developers.google.com