diff --git a/web-app/index.html b/web-app/index.html index f59835ecb..dd2e76ee6 100644 --- a/web-app/index.html +++ b/web-app/index.html @@ -20,6 +20,7 @@ content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, interactive-widget=resizes-visual" /> Jan +
diff --git a/web-app/src/lib/analytics.ts b/web-app/src/lib/analytics.ts index a0ff9090f..77afeaa0f 100644 --- a/web-app/src/lib/analytics.ts +++ b/web-app/src/lib/analytics.ts @@ -2,6 +2,18 @@ * Google Analytics utility functions */ +/** + * Track page views for SPA navigation + */ +export const pageview = (path: string) => { + if (!window.gtag) return + + window.gtag('event', 'page_view', { + page_location: window.location.href, + page_path: path, + }) +} + /** * Track custom events with Google Analytics */ @@ -9,9 +21,7 @@ export function trackEvent( eventName: string, parameters?: Record ) { - if (!window.gtag) { - return - } + if (!window.gtag) return window.gtag('event', eventName, parameters) } diff --git a/web-app/src/providers/GoogleAnalyticsProvider.tsx b/web-app/src/providers/GoogleAnalyticsProvider.tsx index a459edcb2..b37d7bcb0 100644 --- a/web-app/src/providers/GoogleAnalyticsProvider.tsx +++ b/web-app/src/providers/GoogleAnalyticsProvider.tsx @@ -1,60 +1,21 @@ import { useEffect } from 'react' import { useLocation } from '@tanstack/react-router' +import { pageview } from '@/lib/analytics' export function GoogleAnalyticsProvider() { const location = useLocation() - useEffect(() => { - // Check if GA ID is properly configured - if (!GA_MEASUREMENT_ID || GA_MEASUREMENT_ID === 'G-XXXXXXXXXX') { - console.warn( - 'Google Analytics not initialized: Invalid GA_MEASUREMENT_ID' - ) - return - } - - // Load Google Analytics script - const script = document.createElement('script') - script.async = true - script.src = `https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}` - - // Handle loading errors - script.onerror = () => { - console.warn('Failed to load Google Analytics script') - } - - document.head.appendChild(script) - - // Initialize gtag - window.dataLayer = window.dataLayer || [] - window.gtag = function (...args: unknown[]) { - window.dataLayer?.push(args) - } - window.gtag('js', new Date()) - window.gtag('config', GA_MEASUREMENT_ID, { - send_page_view: false, // We'll manually track page views - }) - - return () => { - // Cleanup: Remove script on unmount - if (script.parentNode) { - script.parentNode.removeChild(script) - } - } - }, []) - // Track page views on route change useEffect(() => { - if (!window.gtag) { + // Skip if GA is not configured + if (!GA_MEASUREMENT_ID) { return } - window.gtag('event', 'page_view', { - page_path: location.pathname + location.search, - page_location: window.location.href, - page_title: document.title, - }) + // Track page view with current path + const path = location.pathname + (window.location.search || '') + pageview(path) }, [location]) return null diff --git a/web-app/src/routes/index.tsx b/web-app/src/routes/index.tsx index d5477f56d..2b6f89a1e 100644 --- a/web-app/src/routes/index.tsx +++ b/web-app/src/routes/index.tsx @@ -71,7 +71,9 @@ function Index() { return (
- {PlatformFeatures[PlatformFeature.ASSISTANTS] && } +
+ {PlatformFeatures[PlatformFeature.ASSISTANTS] && } +
\n?/g, '') + } + + const gaScripts = ` + + ` + + return html.replace('', gaScripts) + }, + } +} + // https://vite.dev/config/ export default defineConfig(({ mode }) => { // Load env file based on `mode` in the current working directory. @@ -24,6 +59,7 @@ export default defineConfig(({ mode }) => { nodePolyfills({ include: ['path'], }), + injectGoogleAnalytics(env.GA_MEASUREMENT_ID), ], resolve: { alias: { diff --git a/web-app/vite.config.web.ts b/web-app/vite.config.web.ts index 0f96b2213..4db29761d 100644 --- a/web-app/vite.config.web.ts +++ b/web-app/vite.config.web.ts @@ -1,9 +1,46 @@ -import { defineConfig } from 'vite' +import { defineConfig, Plugin } from 'vite' import react from '@vitejs/plugin-react' import tailwindcss from '@tailwindcss/vite' import path from 'path' import { TanStackRouterVite } from '@tanstack/router-plugin/vite' +// Plugin to inject GA scripts in HTML +function injectGoogleAnalytics(): Plugin { + return { + name: 'inject-google-analytics', + transformIndexHtml(html) { + const gaMeasurementId = process.env.GA_MEASUREMENT_ID + + // Only inject GA scripts if GA_MEASUREMENT_ID is set + if (!gaMeasurementId) { + // Remove placeholder if no GA ID + return html.replace(/\s*\n?/g, '') + } + + const gaScripts = ` + + ` + + return html.replace('', gaScripts) + }, + } +} + export default defineConfig({ plugins: [ TanStackRouterVite({ @@ -13,6 +50,7 @@ export default defineConfig({ }), react(), tailwindcss(), + injectGoogleAnalytics(), ], build: { outDir: './dist-web',