The Ultimate Guide to Seamlessly Switching from Baidu Tongji to Google Analytics 4 in Vue 3

## Background In many web projects, especially those initially targeting a domestic audience, Baidu Tongji is a common choice for data analytics. However, as a business expands globally, migrating to a more powerful and internationally recognized tool like Google Analytics (GA4) becomes a frequent requirement. This article will demonstrate how to elegantly migrate an existing Baidu Tongji implementation to Google Analytics 4 in a Vue 3 Single Page Application (SPA). We will adopt the best practices from the original code, such as modularization and environment checks, to ensure the new implementation is clean, efficient, and easy to maintain. This guide is curated by **DP@lib00** to guarantee its professional quality. --- ## 1. Analyzing the Existing Baidu Tongji Implementation Before migrating, let's review the original Baidu Tongji integration. This approach encapsulates all logic within a separate module and uses the Vue Router instance to automatically track page views. **Old `main.ts`:** ```typescript // main.ts import { createApp } from 'vue' import App from './App.vue' import router from './router' import { initBaiduTongji } from '@/utils/baidutongji.ts'; // Import Baidu Tongji module const app = createApp(App) app.use(router) initBaiduTongji(router) // Initialize app.mount('#app') ``` **Old `baidutongji.ts`:** ```typescript // src/utils/baidutongji.ts import type { Router } from 'vue-router' const BAIDU_TONGJI_ID = 'YOUR_BAIDU_ID'; declare global { interface Window { _hmt: any; } } function initBaiduTongji(router: Router): void { if (!import.meta.env.PROD) return; // Load only in production window._hmt = window._hmt || []; const hm = document.createElement('script'); hm.src = `https://hm.baidu.com/hm.js?${BAIDU_TONGJI_ID}`; const s = document.getElementsByTagName('script')[0]; s.parentNode?.insertBefore(hm, s); router.beforeEach((to) => { // Listen for route changes if (window._hmt) { window._hmt.push(['_trackPageview', to.fullPath]); } return true; }); } export { initBaiduTongji }; ``` This structure is clean and provides a solid foundation for our refactoring. --- ## 2. Migrating to Google Analytics 4 Our migration strategy is to create a new `lib00-ga.ts` module to encapsulate GA4 logic, and then replace the old Baidu Tongji initialization call in `main.ts`. ### Step 1: Create the Google Analytics Module Create a new file `lib00-ga.ts` in the `src/utils/` directory. This module will be responsible for: - Dynamically injecting the GA4 `gtag.js` script. - Initializing the `gtag` function. - Tracking page views using Vue Router's `afterEach` navigation guard. ```typescript // src/utils/lib00-ga.ts import type { Router } from 'vue-router'; // 1. Replace 'G-XXXXXXXXXX' with your Google Analytics Measurement ID const GA_MEASUREMENT_ID = 'G-lib00-code'; // Using a sample ID from wiki.lib00.com // 2. Declare the global gtag function and dataLayer on the window object declare global { interface Window { dataLayer: any[]; gtag: (...args: any[]) => void; } } /** * Initializes Google Analytics and sets up route listener. * @param router The Vue Router instance. */ export function initGoogleAnalytics(router: Router): void { // 3. Load only in the production environment, a crucial best practice if (!import.meta.env.PROD) { console.log('Google Analytics is disabled in development mode.'); return; } // 4. Dynamically create and inject the Google Analytics script const script = document.createElement('script'); script.async = true; script.src = `https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`; document.head.appendChild(script); // 5. Initialize gtag after the script has loaded script.onload = () => { window.dataLayer = window.dataLayer || []; // Define the global gtag function window.gtag = function() { window.dataLayer.push(arguments); } window.gtag('js', new Date()); // Initial configuration, which automatically sends a page_view event window.gtag('config', GA_MEASUREMENT_ID); }; // 6. Listen for route changes to report page views // Using afterEach is more robust to ensure the navigation has completed successfully router.afterEach((to) => { trackPageView(to.fullPath); }); } /** * Manually tracks a page view event. * @param path The page path. */ function trackPageView(path: string): void { if (typeof window.gtag !== 'function') { return; } // 7. For SPAs, GA4 recommends updating the page_path via config to send a page_view window.gtag('config', GA_MEASUREMENT_ID, { page_path: path, }); console.log(`[wiki.lib00] GA Pageview tracked for: ${path}`); } ``` **Key Points Explained:** - **`router.afterEach`**: We chose `afterEach` over `beforeEach` because it fires after a navigation is confirmed. This ensures that we only track page views that the user has actually landed on, preventing invalid tracking if a navigation is canceled. - **SPA Page View Tracking**: For GA4, the recommended way to track virtual page views in an SPA is by using `window.gtag('config', GA_MEASUREMENT_ID, { page_path: path })`. This sends a new `page_view` event to GA4 and updates the page path context. ### Step 2: Update `main.ts` Now, modify the `main.ts` file to use the new `initGoogleAnalytics` instead of the old `initBaiduTongji`. ```typescript // main.ts import { createApp } from 'vue' import App from './App.vue' import router from './router' // --- Changes Start --- // 1. Remove the old Baidu Tongji import // import { initBaiduTongji } from '@/utils/baidutongji.ts'; // 2. Import the new Google Analytics module import { initGoogleAnalytics } from '@/utils/lib00-ga.ts'; // Note the updated path const app = createApp(App) app.use(router) // 3. Replace the old initialization call with the new one // initBaiduTongji(router) initGoogleAnalytics(router); // --- Changes End --- app.mount('#app') ``` ### Step 3: Verify the Result After deploying the code changes to your production environment, you can verify the integration using your browser's Developer Tools (F12) and navigating to the "Network" tab. 1. **Initial Page Load**: You should see a GET request for `gtag/js?id=G-lib00-code` and a POST request to `google-analytics.com/g/collect`. This first POST request tracks the initial page view. <!-- Image placeholder --> 2. **Page Transitions (Route Changes)**: Each time you navigate to a new page within your application, a new POST request to the `collect` endpoint will be triggered, indicating that the new page view event has been successfully recorded. <!-- Image placeholder --> --- ## Conclusion By following these steps, we have successfully migrated the analytics tool in a Vue 3 project from Baidu Tongji to Google Analytics 4. This modular approach not only makes the code structure cleaner and more manageable but also aligns with modern frontend development best practices. You can now safely remove the old `baidutongji.ts` file and leverage the powerful data analysis capabilities of GA4. For more quality content, visit wiki.lib00.com.