🏷️

【Vue3】GTM（Googleタグマネージャー）を設置する

2024/07/25に公開1件

Nuxt

Vue.js

Google Tag Manager

tech

はじめに

Vue3でSPA（シングルページアプリケーション）を作成する際にGoogleタグマネージャーを利用してページビュートラッキングを取る方法についてご紹介します。
以下、GoogleタグマネージャーをGTMと言います。

1. GTM コンテナIDを取得

Googleタグマネージャーでコンテナを作成し、コンテナID（GTM-xxxxxxx）を取得しておいてください。

2. Vueアプリケーションインストール

Vue公式リファレンスの通りにインストールを実行してください。

3. Vue GTMプラグインをインストール

Vueアプリケーションのインストールが完了したら、次はVue版GTMプラグインのインストールをしていきます。

npm install @gtm-support/vue-gtm

👇 プラグイン説明

本プラグインはVue3系以上から利用できるVue版GTMプラグインとなります。
また、VueRouterと連携した画面の自動追跡も可能なので、SPAにおいても各ページ閲覧時のトラッキングが取れるというわけですね！！これはありがたいかぎりだ..
ちなみにVueRouterは4系以上から利用可能だそうです！

4. GTMトラッキング設定を行う

では、GTMトラッキング設定を行っていきます。今回はvueRouterを利用している前提で記載していきます。設定はmain.jsに記述していきます。
なお、以下の設定値以外にも設定項目が用意されているので見てみてね！

main.js

import { createApp } from 'vue'
import { createGtm } from '@gtm-support/vue-gtm' // GTMプラグインインポート
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

/**
 * VueGTMを用いたPageViewトラッキング送信
 */
app.use(
  createGtm({
    id: "GTM-xxxxxxx",    // GTM_IDをいれる
    defer: false,         // ページの読み込みを高速化（トラッキング精度低下の可能性あり）
    debug: false,         // コンソールログのデバッグを表示するかどうか 
    loadScript: true,     // GTMスクリプトを読み込むかどうか
    vueRouter: router,    // vueRouterと自動的に同期するインスタンスを設定
    ignoredViews: ['notFound'], // 指定したルーター名はトラッキングしない（例：404ページなど）
    trackOnNextTick: true // Vue.nextTick で trackView を呼び出すかどうか
  })
)
app.mount('#app')

上記の設定でvueRouterと連携したページビュートラッキングが取れるようになるかと思います。
しかし、トラッキングはローカル環境では計測したくないっていうケースがほぼ確実にあるんじゃないかなと思います。
次は、プロダクション（本番）環境でのみトラッキング計測を有効にする方法をご紹介します！

5. プロダクション（本番）環境でのみトラッキング計測するために

環境変数（.env）でローカル or 本番環境かを判別した上でトラッキング計測を実行していきす。

5-1. 環境変数を定義

.env.local

# ローカル環境用 環境変数（抜粋）
APP_ENV=local
VITE_GTM_ID=""

.env.prod

# 本番環境用 環境変数（抜粋）
APP_ENV=production
VITE_GTM_ID="GTM-xxxxxxx"

.env

# 各環境に合うように値を変更すること。
APP_ENV=production
VITE_GTM_ID="GTM-xxxxxxx"

5-2. トラッキング制御の編集

main.js

...省略

/**
 * VueGTMを用いたPageViewトラッキング送信
 * 動作環境：本番環境のみ
 */
if (import.meta.env.PROD) {  // 本番環境の場合のみトラッキングを有効にする
    app.use(
      createGtm({
        id: "import.meta.env.VITE_GTM_ID",  // GTM_IDを.envから読み込む
        defer: false,
        debug: false, 
        loadScript: true,
        vueRouter: router,
        ignoredViews: ['notFound'],
        trackOnNextTick: true
      })
    )
}
app.mount('#app')

6. GTMタグが設置されているか確認

GTMタグ設置確認は私の場合はChrome拡張機能であるGoogleTagAssistantを使っています。
無事に設置できていれば👇のように表示されるはずです。

7. 最後に

今回はVue3アプリケーションにおけるGTMトラッキング計測設定方法をご紹介しました！
誰かの役に立ってくれることを祈って、あざした👋

Discussion

夜王

理解