如何为Laravel/Inertia/Vue应用添加Google Analytics

由于 Inertia 属于单页应用（SPA），常规 Google Analytics 的自动页面追踪无法适配路由切换，需要通过监听 Inertia 的页面导航事件实现全局统计，以下是具体实现步骤：

步骤1：在根 Blade 模板中添加 GA 基础脚本 #

打开 Inertia 根模板（通常为 resources/views/app.blade.php），在 </head> 标签前插入 Google Analytics 4 初始化脚本，记得将 GA_MEASUREMENT_ID 替换为你的实际追踪ID（如 G-XXXXXXXXXX）：

<!-- Google Analytics 4 初始化脚本 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  // 禁用自动页面视图，避免重复统计
  gtag('config', 'GA_MEASUREMENT_ID', { send_page_view: false });
</script>

步骤2：在 main.js 中监听页面导航事件 #

修改你的 main.js，添加 Inertia 导航事件监听，在页面切换时手动发送视图数据到 GA，同时处理初始页面的统计逻辑：

/* eslint-disable import/order */
import '@/@iconify/icons-bundle'
import layoutsPlugin from '@/plugins/layouts'
import vuetify from '@/plugins/vuetify'
import VueToast from 'vue-toast-notification'
import 'vue-toast-notification/dist/theme-default.css'
import { createInertiaApp, Link } from '@inertiajs/vue3'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
import { loadFonts } from '@/plugins/webfontloader'
import './../styles/@core/template/index.scss'
import '@styles/styles.scss'
import { createPinia } from 'pinia'
import { createApp, h } from 'vue' // 补充导入h函数
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m'
import 'sweetalert2/dist/sweetalert2.min.css'

loadFonts()
createInertiaApp({
    title: title => `${title}`,
    resolve: name => resolvePageComponent(`./pages/${name}.vue`, import.meta.glob('./pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        const vueApp = createApp({ render: () => h(App, props) })

        vueApp.use(plugin)
            .use(ZiggyVue, Ziggy)
            .use(VueToast, {
                position: 'top',
                pauseOnHover: true,
            }).provide('toast', vueApp.config.globalProperties.$toast)
            .use(vuetify)
            .use(createPinia())
            .use(layoutsPlugin)
            .use(Link)
            .mount(el)

        // 监听Inertia页面导航事件，发送页面视图
        vueApp.config.globalProperties.$inertia.on('navigate', (event) => {
            if (window.gtag && import.meta.env.PROD) { // 仅在生产环境发送数据
                gtag('config', 'GA_MEASUREMENT_ID', {
                    page_path: event.visit.url,
                    page_title: document.title
                })
            }
        })

        // 初始页面加载时发送一次统计
        if (window.gtag && import.meta.env.PROD) {
            gtag('config', 'GA_MEASUREMENT_ID', {
                page_path: window.location.pathname + window.location.search,
                page_title: document.title
            })
        }

        return vueApp
    },
    progress: {
        color: '#4B5563',
    },
})

关键细节说明 #

• 禁用自动页面视图：在GA初始化脚本中设置 send_page_view: false，防止初始加载和手动发送操作产生重复统计。
• 生产环境限制：通过 import.meta.env.PROD 判断环境，避免开发环境生成无效统计数据。
• 追踪ID替换：确保所有代码中的 GA_MEASUREMENT_ID 都替换为你自己的Google Analytics追踪ID。

内容的提问来源于stack exchange，提问作者Aleksandar Đokić