DAY27：整合 Google Analytics 4 到 Nuxt.js

首先，您需要安裝 nuxt-gtag 模塊，可以使用以下命令之一：

# 使用 pnpm
pnpm add -D nuxt-gtag

# 使用 npm
npm i -D nuxt-gtag

# 使用 yarn
yarn add -D nuxt-gtag

接下來，在您的 nuxt.config.ts 文件中，將 nuxt-gtag 添加到模塊部分，並提供您的 Google Analytics 測量 ID：

// nuxt.config.ts

export default {
  buildModules: ['nuxt-gtag'],
  gtag: {
    id: 'G-XXXXXXXXXX' // 替換成您的 Google Analytics 測量 ID
  }
}

現在，Google Analytics 將在您的應用程序客戶端中運行。

請確保在 Nuxt 中啟用了增強測量功能，以便 gtag.js 根據瀏覽器歷史事件自動跟蹤頁面更改。要啟用此功能，請按照以下步驟進行操作：

• 進入 Google Analytics 4 的報告視圖，然後點擊 "管理"。
• 在 "屬性" 部分下選擇 "數據流"。
• 點擊您的 Web 數據流。
• 接下來，切換 "增強測量" 旁邊的開關按鈕。

配置項目還可以進一步自定義。您可以使用 .env 文件來設置 Google Analytics 測量 ID，而不是在 Nuxt 配置中硬編碼它。這可以通過自動替換的公共運行時配置值來實現，方法是在運行時匹配環境變數。

在您的 .env 文件中添加以下內容：

NUXT_PUBLIC_GTAG_ID=G-XXXXXXXXXX

這樣，如果只想設置測量 ID，您可以省略 Nuxt 配置中的 gtag 鍵。

另外，如果您想在項目中實現 GDPR 合規性並禁用跟蹤，您可以將 initialConsent 選項設置為 false。這將防止 gtag.js 腳本加載，直到用戶同意跟蹤。

export default {
  buildModules: ['nuxt-gtag'],
  gtag: {
    id: 'G-XXXXXXXXXX',
    initialConsent: false
  }
}

要手動管理同意，您可以使用 grantConsent 方法，該方法可以在用戶接受 Cookie 政策後設置同意狀態。使用 useGtag() 以獲取 gtag、grantConsent 和 revokeConsent：

<script setup lang="ts">
const { gtag, grantConsent, revokeConsent } = useGtag()
</script>

<template>
  <button @click="grantConsent()">
    接受追蹤
  </button>
</template>

您甚至可以將 Nuxt 配置中的測量 ID 留空，並在應用程序中稍後動態設置它，方法是將您的 ID 作為 grantConsent 的第一個參數傳遞。這在為每個用戶使用自定義 ID 或在應用程序管理多個租戶時特別有用。

通過這些步驟，您已經成功將 Google Analytics 4 整合到您的 Nuxt.js 項目中，並可以開始跟蹤和分析您的網站流量。您還可以使用 useGtag 和 useTrackEvent 等組合方式來進一步自定義和追蹤事件。