, , , , ,

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

  • 2026-04-11
GA4 技術串接架構圖，中央為 GA4，三條路線分別連接 JavaScript（瀏覽器端）、Python（數據分析）、Node.js（後端 API）

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

根據 GA4.com 統計，GA4 被 1,420 萬個網站使用，其中超過 120 萬個 WordPress 網站已整合 GA4（GA4.com, 2025）。根據 MageComp 統計，超過 237,000 個 Shopify 商店使用 GA4，顯示 GA4 技術串接的廣泛應用（MageComp, 2025）。根據 ElectroIQ 的數據，64% 的美國前 500 大零售商使用 Google Analytics 追蹤線上表現（ElectroIQ, 2025）。全球網站分析市場規模在 2025 年達 62.6 億美元，API 驅動的數據整合是主要成長動力（MageComp, 2025）。根據 StatCounter 數據，行動裝置產生全球 64.35% 的流量，GA4 的跨平台追蹤 API 可統一行動與桌面數據（StatCounter, 2025）。

GA4 技術串接架構圖，中央為 GA4，三條路線分別連接 JavaScript（瀏覽器端）、Python（數據分析）、Node.js（後端 API）

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

GA4 事件追蹤流程圖，使用者行為→JavaScript 捕捉→gtag 發送→GA4 收集→報表呈現

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

GA4 與各平台串接圖，中央 GA4，放射狀連接 WordPress、Shopify、Python、Node.js、GTM

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

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

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

重點摘要： GA4 的技術串接分三層：前端用 JavaScript gtag.js 追蹤使用者行為（頁面瀏覽、點擊、購買）、後端用 Python/Node.js 呼叫 GA4 Data API 抓取分析數據、進階場景用 Measurement Protocol 從伺服器端直接發送事件。追蹤碼約 90KB，用 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 追蹤碼的大小約 90KB（gzip 壓縮後約 30KB）。使用 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 模式驗證

開發時怎麼確認事件有正確發送？在 URL 後面加上 ?debug_mode=true：

https://你的網站.com/?debug_mode=true

然後到 GA4 管理 → Debug View，就能即時看到所有觸發的事件。

我們在幫客戶設定 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 啟用步驟

  1. 到 Google Cloud Console 建立專案
  2. 啟用 Google Analytics Data API
  3. 建立 服務帳號（Service Account）
  4. 下載 JSON 金鑰檔案
  5. 在 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 設定 → 偏好設定 → 貼上 Measurement ID 簡單
Wix 行銷整合 → Google Analytics → 輸入 ID 簡單
Weebly 設定 → SEO → 貼入 GA4 ID 簡單
自建網站 手動嵌入 gtag.js 中等

LinkedIn 轉換追蹤整合

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

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

IP 匿名化

GA4 預設已啟用 IP 匿名化。Google 在收集到 IP 位址後，會在儲存前將最後一段移除。你不需要額外設定。

Consent Mode（使用者同意管理）

歐盟 GDPR 和加州 CCPA 法規要求網站取得使用者同意後才能追蹤。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 每天的配額限制約為 10,000 次請求。對大部分使用場景來說足夠了。如果超過限制，可以申請提高配額或優化 API 呼叫頻率（例如用快取減少重複查詢）。

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 免費諮詢

延伸閱讀

參考資料

常見問題

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

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

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

有。免費版的 GA4 Data API 每天的配額限制約為 10,000 次請求。對大部分使用場景來說足夠了。如果超過限制，可以申請提高配額或優化 API 呼叫頻率（例如用快取減少重複查詢）。

伺服端追蹤值得做嗎？

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

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

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