Google Analytics 技術串接教學：2026 JavaScript、Python、Node.js 實戰指南

GA4 API, Google Analytics, JavaScript, Node.js, Python, 技術串接

根據 GA4.com 統計，GA4 被 1,420 萬個網站使用，其中超過 200 萬個 WordPress 網站已整合 GA4（GA4.com, 2025）。根據 MageComp 統計，超過 237,000 個 Shopify 商店使用 GA4，顯示 GA4 技術串接的廣泛應用（MageComp, 2025）。更多 Google Analytics 的使用統計，可以參考 ElectroIQ 的整理（ElectroIQ, 2026）與 MageComp 的整理（MageComp, 2025）。根據 StatCounter 2026 年 9 月數據，行動裝置佔全球網站流量 60.04%，GA4 的跨平台追蹤 API 可統一行動與桌面數據（StatCounter, 2026）。

GA4 不只是一個網頁介面。它背後有完整的 API 和開發工具，讓你用程式碼做到介面上做不到的事。

用 JavaScript 追蹤自訂事件。用 Python 自動化數據分析報告。用 Node.js 打造自訂的數據儀表板。

這篇文章給有技術背景的開發者和行銷工程師，從追蹤碼原理到 API 串接的完整實戰教學。

如果你不是技術人員，可以直接把這篇文章轉給你的工程師看。

需要在網站串接 GA4 但技術搞不定？加 LINE 免費諮詢，我們有專業開發團隊幫你處理。

重點摘要： GA4 的技術串接分三層：前端用 JavaScript gtag.js 追蹤使用者行為（頁面瀏覽、點擊、購買）、後端用 Python/Node.js 呼叫 GA4 Data API 抓取分析數據、進階場景用 Measurement Protocol 從伺服器端直接發送事件。追蹤碼壓縮傳輸後約 150KB，用 async 載入不影響頁面速度。

Google Analytics 追蹤碼的運作原理

gtag.js 結構解析

GA4 的追蹤碼核心是 gtag.js。它長這樣：

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

拆解一下：

第一行：非同步載入 gtag.js 函式庫（async 確保不阻塞頁面）
dataLayer：一個全域陣列，所有事件都推進去
gtag 函數：封裝 dataLayer.push 的語法糖
config：設定你的 Measurement ID（G-XXXXXXXXXX）

追蹤碼放哪裡

放在 <head> 標籤內，越早載入越好。原因是：如果放在 <body> 底部，使用者可能在追蹤碼載入前就離開了，這些訪客的數據就會遺失。

效能影響

GA4 追蹤碼（gtag.js）壓縮傳輸後約 150KB、解壓後約 440KB（2026 年 10 月實測，依資源設定略有差異）。使用 async 屬性代表它不會阻塞頁面的渲染。在 Lighthouse 測試中，GA4 追蹤碼通常只影響 0.1-0.3 秒的載入時間。

如果你對效能極度敏感，可以考慮 Partytown 方案——把追蹤碼放到 Web Worker 中執行，完全不影響主線程。不過這有點 over-engineering 了，大部分網站不需要。

JavaScript 自訂事件追蹤實戰

GA4 最強大的功能之一就是自訂事件追蹤。你可以追蹤任何使用者互動。

基本語法

gtag('event', '事件名稱', {
  '參數1': '值1',
  '參數2': '值2'
});

按鈕點擊追蹤

追蹤 LINE 按鈕的點擊：

document.querySelector('.line-cta-button').addEventListener('click', function() {
  gtag('event', 'line_click', {
    'button_location': 'article_bottom',
    'page_title': document.title
  });
});

這樣你就能在 GA4 中看到：哪些頁面的 LINE 按鈕被點擊最多、按鈕放在文章底部 vs 中段哪個效果好。

表單提交追蹤

document.querySelector('#contact-form').addEventListener('submit', function() {
  gtag('event', 'form_submit', {
    'form_name': 'contact_form',
    'page_url': window.location.href
  });
});

電商事件追蹤

GA4 有一套標準的電商事件命名：

事件	觸發時機	必要參數
view_item	查看商品頁面	items（商品資訊）
add_to_cart	加入購物車	items, value, currency
begin_checkout	開始結帳	items, value, currency
purchase	完成購買	transaction_id, value, currency, items

gtag('event', 'purchase', {
  transaction_id: 'T12345',
  value: 1990,
  currency: 'TWD',
  items: [{
    item_id: 'SKU001',
    item_name: 'WordPress 架站方案',
    price: 1990,
    quantity: 1
  }]
});

Debug 模式驗證

開發時怎麼確認事件有正確發送？在 gtag 的 config 指令加上 'debug_mode': true 參數（或用 Tag Assistant 開啟偵錯）：

gtag('config', 'G-XXXXXXXXXX', { 'debug_mode': true });

然後到 GA4 管理 → 資料顯示 → DebugView，就能即時看到所有觸發的事件。

我們在幫客戶設定 GA4 電商追蹤時，Debug View 是必用的工具。有一次我們發現 purchase 事件的 value 欄位一直是 0，原因是 WooCommerce 的 JavaScript 變數名稱在某次更新後改了。沒有 Debug View 的話，這個 bug 可能要過好幾天才會發現。

JavaScript 事件追蹤搞不定？

自訂追蹤、電商事件、Debug 排錯⋯⋯GOT YOU DESIGN 有專業開發團隊，幫你把 GA4 的追蹤設定做到位。

👉 加 LINE 免費諮詢

Python 串接 GA4 數據分析

如果你需要自動化地從 GA4 抓取數據（不想每次都手動看報表），Python 是最好的選擇。

GA4 Data API 啟用步驟

到 Google Cloud Console 建立專案
啟用 Google Analytics Data API
建立 服務帳號（Service Account）
下載 JSON 金鑰檔案
在 GA4 管理中，把服務帳號加入為「檢視者」角色

安裝 Python 套件

pip install google-analytics-data

程式碼範例：抓取過去 30 天的頁面瀏覽量

from google.analytics.data_v1beta import BetaAnalyticsDataClient
from google.analytics.data_v1beta.types import (
    RunReportRequest, DateRange, Metric, Dimension
)

client = BetaAnalyticsDataClient()

request = RunReportRequest(
    property=f"properties/你的GA4_PROPERTY_ID",
    date_ranges=[DateRange(start_date="30daysAgo", end_date="today")],
    metrics=[Metric(name="screenPageViews"), Metric(name="activeUsers")],
    dimensions=[Dimension(name="pagePath")],
)

response = client.run_report(request)

for row in response.rows:
    page = row.dimension_values[0].value
    views = row.metric_values[0].value
    users = row.metric_values[1].value
    print(f"{page}: {views} views, {users} users")

自動化排程

把上面的程式碼包成一個 Python 腳本，搭配 cron job 每天早上 9 點跑一次，自動把數據寫入 Google Sheets 或發送到 Slack。

# cron job 設定範例（每天早上 9 點執行）
0 9 * * * /usr/bin/python3 /path/to/ga4_report.py

Python 串接 GA4 API 最容易卡在「授權」這一步。常見的錯誤是服務帳號沒有被加入 GA4 的使用者清單。很多人只建立了服務帳號但忘了去 GA4 管理介面授權。

Node.js 串接 GA4 API 實戰

如果你的技術棧是 Node.js，用 @google-analytics/data 套件同樣可以串接 GA4。

安裝

npm install @google-analytics/data

程式碼範例

const {BetaAnalyticsDataClient} = require('@google-analytics/data');

const analyticsDataClient = new BetaAnalyticsDataClient({
  keyFilename: './service-account-key.json'
});

async function runReport() {
  const [response] = await analyticsDataClient.runReport({
    property: `properties/你的GA4_PROPERTY_ID`,
    dateRanges: [{ startDate: '30daysAgo', endDate: 'today' }],
    dimensions: [{ name: 'pagePath' }],
    metrics: [{ name: 'screenPageViews' }],
  });

  response.rows.forEach(row => {
    console.log(`${row.dimensionValues[0].value}: ${row.metricValues[0].value}`);
  });
}

runReport();

實際應用場景

Node.js 串接 GA4 最常見的用途是建立自訂的數據儀表板後端。用 Express.js 建 API，前端用 React 或 Vue 呈現圖表。

這種方式比 Looker Studio 更靈活，但開發成本也更高。適合有工程團隊且需要高度客製化報表的企業。

想了解 GA4 UTM 追蹤與轉換設定教學？掌握 UTM 和轉換設定之後，API 抓取的數據才有意義。

GA4 與其他平台的串接整合

WordPress 網站

WordPress 的 GA4 安裝有三種方式：Site Kit 外掛、手動嵌入追蹤碼、Google Tag Manager。

想了解 WordPress 網站的 GA4 安裝方式？那篇文章有每種方式的詳細步驟。

其他網站平台

平台	安裝方式	難度
Shopify	安裝 Google & YouTube 銷售管道，再依 Google 指示設定 GA4 代碼	簡單
Wix	行銷整合 → Google Tag → 貼上 Measurement ID（需付費方案＋自訂網域）	簡單
Weebly	依平台說明加入追蹤碼	簡單
自建網站	手動嵌入 gtag.js	中等

LinkedIn 轉換追蹤整合

如果你同時投 LinkedIn 廣告，可以透過 GTM 同時部署 GA4 和 LinkedIn Insight Tag。這樣就能在兩個平台交叉分析廣告效果。

GA4 技術串接的安全與隱私考量

IP 匿名化

GA4 不會記錄或儲存 IP 位址，因此不需要另外做 IP 匿名化。你不需要額外設定。

Consent Mode（使用者同意管理）

歐盟 GDPR 等法規要求網站取得使用者同意後才能追蹤；加州 CCPA 則是讓使用者有權選擇退出（opt-out）個資的出售或分享。GA4 的 Consent Mode 可以在使用者拒絕 cookie 的情況下，仍然收集匿名化的數據。

gtag('consent', 'default', {
  'analytics_storage': 'denied',
  'ad_storage': 'denied'
});

// 使用者同意後更新
gtag('consent', 'update', {
  'analytics_storage': 'granted'
});

伺服端追蹤（Server-Side Tracking）

傳統的客戶端追蹤（瀏覽器端）容易被廣告封鎖工具阻擋。伺服端追蹤把數據收集從瀏覽器移到伺服器，可以：

避免被 uBlock Origin 等工具封鎖
更精確地控制發送到 GA4 的數據
提升數據完整性

但設定比較複雜，需要一台代理伺服器（可以用 Google Cloud Run）。

回到 Google Analytics 完整教學可以重新理解 GA4 的完整功能框架。

GA4 技術串接常見問題 FAQ

Q: GA4 追蹤碼和 GTM 哪個比較好？

A: 小型網站直接用 GA4 追蹤碼就好，簡單直接。如果你需要管理多個追蹤碼（GA4 + Facebook Pixel + LinkedIn），用 GTM 更方便。GTM 的好處是不需要修改網站程式碼就能新增或修改追蹤碼。

Q: GA4 Data API 有呼叫次數限制嗎？

A: 有。標準版 GA4 資源的 Data API 配額以權杖計算，每個資源每天 200,000 個核心權杖（每小時 40,000）。對大部分使用場景來說足夠了。如果超過限制，可以優化 API 呼叫（減少維度與日期範圍、用快取減少重複查詢）；需要更高上限要改用 Analytics 360 資源（核心權杖每天 2,000,000、每小時 400,000）。

Q: 伺服端追蹤值得做嗎？

A: 取決於你的需求。如果廣告封鎖工具導致你遺失超過 20% 的數據，伺服端追蹤值得投資。但設定和維護成本不低（需要一台代理伺服器），適合有工程團隊的中大型企業。小型網站用客戶端追蹤就夠了。

Q: Python 和 Node.js 串接 GA4 API，哪個比較推薦？

A: 看你的技術棧。如果你的團隊主要用 Python（數據分析、機器學習），用 Python。如果你的團隊主要做 Web 開發（React、Next.js），用 Node.js。兩者的 API 功能完全一樣，差別只在語言。

結語：技術串接讓 GA4 發揮完整實力

GA4 的網頁介面只是冰山一角。

JavaScript 事件追蹤讓你追蹤每一個使用者互動。Python/Node.js API 讓你自動化數據分析。伺服端追蹤讓你的數據更完整。

把技術串接做好，GA4 就不再只是一個「看看流量」的工具——它會變成你的商業決策引擎。

GA4 串接、自訂追蹤、API 開發，交給專業的來

GOT YOU DESIGN 有專業開發團隊，幫你搞定 GA4 的技術串接和自動化報表。

👉 加 LINE 免費諮詢

參考資料

Google Analytics Data API Documentation, 2025
Google Tag Manager Documentation, 2025
GA4 Measurement Protocol, 2025

如果你願意，我們陪你一步一步來

先加入 LINE 跟我們聊聊你的狀況，我們會給你適合的建議；也可以直接看看線上課程內容，選擇最適合自己的節奏。

先加入 LINE 聊聊

分類: Google分析工具

我們的服務

提供完整的 WordPress 解決方案，滿足您的各種需求

WordPress 架設

客製化網站設計與開發
打造符合您品牌形象的網站

服務內容

客製化設計

響應式網頁設計

SEO 基礎優化

金流／表單串接

一對一教學

從基礎到進階，手把手教學
讓您輕鬆管理自己的網站

教學內容

基礎操作教學

內容新增與管理

外掛使用教學

網站問題排解

主機代管

穩定可靠的主機環境
讓您的網站 24 小時穩定運作

服務內容

高速穩定主機

定期備份

安全防護

技術支援

GA4 API, Google Analytics, JavaScript, Node.js, Python, 技術串接