vue-gtag

import { createApp } from 'vue'; import App from './App.vue'; import { createRouter, createWebHistory } from 'vue-router'; import VueGtag from 'vue-gtag'; // The main plugin import type { GtagOptions } from 'vue-gtag'; // Import types for clarity // 1. Setup Vue Router (optional, but recommended for pageview tracking) const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', component: { template: '<div><h1>Home Page</h1><router-link to="/about">Go to About</router-link></div>' } }, { path: '/about', component: { template: '<div><h1>About Page</h1><router-link to="/">Go to Home</router-link></div>' } } ], }); // 2. Configure vue-gtag options const gtagOptions: GtagOptions = { appName: 'my-vue-app', pageTrackerScreenviewEnabled: true, // Enables automatic pageview tracking config: { id: process.env.VUE_APP_GTAG_ID ?? 'G-XXXXXXXXXX', // Use an environment variable for your GA4 Measurement ID params: { send_page_view: true, }, }, router, // Link router for automatic pageview tracking // consent: { // granted: ['analytics_storage', 'ad_storage'], // denied: [], // default: { analytics_storage: 'denied', ad_storage: 'denied' } // } }; // 3. Create and configure Vue App const app = createApp(App); app.use(router); app.use(VueGtag, gtagOptions); app.mount('#app'); // App.vue (Example component using useGtag composable) <template> <div> <router-view></router-view> <button @click="trackButtonClick">Track Interaction</button> </div> </template> <script setup lang="ts"> import { useGtag } from 'vue-gtag'; import { onMounted } from 'vue'; const { event, consent } = useGtag(); onMounted(() => { console.log('App and gtag are ready.'); // Optionally set or update consent based on user interaction // consent.update({ analytics_storage: 'granted', ad_storage: 'granted' }); }); function trackButtonClick() { event('custom_button_click', { event_category: 'engagement', event_label: 'user_interaction', value: Math.floor(Math.random() * 100) + 1, }); console.log('Custom button click event sent.'); } </script>