在前一篇文章中，我們展示了如何將多語言資料從本地 JSON 檔案轉換為 API 形式，並部署到 Vercel 進行集中管理。這樣的改進讓我們的應用能夠動態從伺服器獲取翻譯資料，極大提升了多語言管理的靈活性與效能。

在現代的網頁開發中，追蹤使用者的行為是優化用戶體驗 (UX) 的關鍵。透過分析使用者的行為數據，我們可以更有效地改進設計，並強化應用的功能性。今天，我們將展示如何在 React 應用中整合 Google Analytics，實現各種追蹤功能，如頁面瀏覽、滾動深度、點擊事件等，來更精準地瞭解用戶的行為。

Google Analytics 追蹤指標

在整合Google Analytics時，SPA應用面臨的挑戰之一是由於沒有頁面重新加載，因此必須手動追蹤各種用戶行為。以下是一些常見的關鍵指標與事件類型，以及如何在應用中測量這些指標。

透過這些追蹤指標，你能夠深入了解應用的使用情況，並根據數據結果進行優化和改進。

實際演練

Step 1: 取得 Google Analytics Tracking ID

首先，您需要一個 Google Analytics 帳戶來開始追蹤您的網站。前往 Google Analytics，登入您的 Google 帳戶並按照指示創建一個新的屬性 (Property)，以追蹤您的應用。如下圖所示，完成屬性設定後，Google Analytics 會生成一個唯一的追蹤碼 (Tracking ID)，形如 G-XXXXXXXXXX。

Step 2: 安裝 Google Analytics 套件

為了更輕鬆地將 Google Analytics 4 (GA4) 整合到 React 應用中，我們將使用 react-ga4 套件。

npm install react-ga4

Step 3: 初始化 Google Analytics

在 index.jsx 中完成這一初始化設定，我們需要初始化 Google Analytics。

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import '@/utils/logLevel';  // 只需在 log.js 中引入 logLevel
import createI18nInstance from '@/utils/i18n'; // 确保 i18n 初始化在应用渲染之前
import App from '@/App';
import { ThemeProvider } from '@/utils/ThemeContext';
import '@/styles/_global.scss' // 引入全局樣式
import ReactGA from 'react-ga4';

// 使用您的 Google Analytics 追蹤 ID 進行初始化
ReactGA.initialize(process.env.Google_Analytics_ID);
console.log(process.env.Google_Analytics_ID);
// 初始化單例 i18n
createI18nInstance();

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
        <ThemeProvider>
            <App />
        </ThemeProvider>
    </BrowserRouter>
);

Step 4: 追蹤頁面瀏覽 (Page Views)

為了確保每次頁面切換都會被記錄下來，我們可以在 Layout.jsx利用 useEffect 在每次 React Router 的路徑變更時觸發 Google Analytics 的頁面追蹤功能：

//src/components/Layout.jsx
import React, { useEffect } from 'react'
import { Outlet } from 'react-router-dom';
import LangButton from '@/components/navBar/LangButton';
import Version from '@/components/Version';
import * as styles from '@/components/Layout.module.scss'
import Navbar from '@/components/navBar/Navbar';
import ThemeButton from '@/components/navBar/ThemeButton';
import { useLocation } from 'react-router-dom'; // 引入 useLocation
import ReactGA from 'react-ga4';

const Layout = () => {

    const location = useLocation(); // 獲取當前路徑

    useEffect(() => {
        // 每次路由變更時，發送頁面瀏覽事件
        const path = location.pathname + location.search;
        ReactGA.send({ hitType: 'pageview', page: path });
    }, [location]);

    const isAdvancedPage = location.pathname === '/portfolio';
    return (
        <div className={styles.appContainer}>
            <header>
                {isAdvancedPage ? <Navbar /> : <ThemeButton />}
            </header>
            <main className={styles.mainContent}>
                <Outlet /> {/* 這裡渲染頁面的主要內容 */}
            </main>
            <footer>
                {!isAdvancedPage &&
                    <div className={styles.footer_menu}>
                        <LangButton />
                        <Version />
                    </div>
                }
            </footer>
        </div>
    )
}

export default Layout

說明：

1. useEffect：當 location 變更時，會觸發 ReactGA.send，並向 Google Analytics 發送新的 pageview。
2. ReactGA.send：每次用戶切換頁面時，手動發送 pageview 事件，這樣 Google Analytics 就能追蹤到這次切換。

Step 5: 在頁面滑動時，追蹤瀏覽行為

在 SPA 中，因為沒有頁面重新加載，我們需要手動追蹤頁面切換的行為。當使用者透過點擊導航欄的選單項目來進行頁面滾動時，我們可以使用 Google Analytics 來追蹤這些行為。以下是 Navbar.jsx的修改代碼，並在使用者點擊選單時，手動發送 pageview 事件給 Google Analytics。

import ReactGA from 'react-ga4';

// 定義滾動並設置激活狀態的函數
const handleMenuClick = (e, index, link) => {
    e.preventDefault();  // 防止默認的錨點行為
    if (activeLink !== index) {
        setActiveLink(index);  // 設定激活的菜單項目
        handleScroll(link);  // 滾動到對應區塊

        const pageName = menuItems[index].name;
        ReactGA.send({ hitType: 'pageview', page: `/${pageName.toLowerCase()}` });
    }
};

說明：

1. handleMenuClick：這個函數在使用者點擊導航欄的選單項目時觸發，會執行平滑滾動，並透過 ReactGA.send 來發送 pageview 事件到 Google Analytics。
2. ReactGA.send：這行代碼會將每次導航點擊的頁面資訊（如 /home, /services）發送到 Google Analytics，從而記錄使用者的行為

Step 6: 設定 Google Analytics 按鈕事件追蹤

在許多情況下，追蹤按鈕點擊和外部連結的點擊事件可以提供關鍵的使用者行為數據。在 Google Analytics 中，我們可以使用事件追蹤 (Event Tracking) 來實現這一目標。以下是一個Project Section的部分程式碼，展示如何在專案卡片或外部連結上實作點擊事件追蹤：

// src/pages/Portfolio/ProjectSection.jsx
import ReactGA from 'react-ga4';

const handleExternalLinkClick = (type) => {
    ReactGA.event({
        category: 'External Link',
        action: 'Click',
        label: type,  // 標記不同的連結類型
    });
};

const ProjectSection = ({ id, projectData }) => {
    return (
        <div id={id}>
            {projectData.map((project, index) => (
                <div key={index}>
                    <h2>{project.title}</h2>
                    <p>{project.description}</p>

                    {/* 外部連結範例：GitHub */}
                    {project.github && (
                        <a
                            href={project.github.url}
                            target="_blank"
                            rel="noopener noreferrer"
                            onClick={() => handleExternalLinkClick('GitHub')}
                        >
                            GitHub
                        </a>
                    )}
                </div>
            ))}
        </div>
    );
};

export default ProjectSection;

說明：

1. handleExternalLinkClick：我們透過此函數將點擊事件傳送至 Google Analytics。不同的 label 會標記不同的連結來源，例如 "Live"、"GitHub" 或 "Figma"。
2. ReactGA.event()：這個方法用於追蹤點擊事件，我們可以記錄事件的 category（分類）、action（行動）以及 label（標籤）來識別具體的點擊行為。

此方法可以應用於各種按鈕或連結的點擊行為，並將數據傳送到 Google Analytics 進行分析。這能幫助我們了解用戶對於特定專案或功能的興趣，並根據這些數據來進行優化。

結語

透過這篇文章，我們深入了解了如何在單頁應用中整合Google Analytics進行用戶行為追蹤。透過追蹤用戶的頁面瀏覽、滾動深度、按鈕點擊等操作，我們能夠更精確地分析應用的使用情況，並作出相應的優化。這些數據將成為未來提升應用效能和使用者體驗的寶貴資源。

目前，Project Section 的開發已告一段落，完整的程式碼已上傳至 GitHub。接下來，我們將專注於 Contact Section 的開發，進一步優化網站的設計與功能。
👉 前往 GitHub 的 V0.17.0-project-section-using-swiper 查看完整程式碼

✨ 流光館Luma<∕> ✨ 期待與你繼續探索更多技術知識！