如果你的網站沒有使用GTM，或希望直接透過程式碼部署GA4，那麼 gtag.js（Google Tag） 是Google官方最推薦的安裝方式之一。
雖然現在許多網站都採用GTM管理標籤，但對於小型網站、SSR 框架（Next.js、Nuxt）、以及需要降低第三方依賴的專案而言，直接安裝gtag.js仍然是相當好的選擇。
本文將完整介紹：
- 什麼是gtag.js
- 如何安裝GA4
- 如何驗證是否安裝成功
- 常見設定
- 如何傳送自訂事件
- gtag與GTM的差異
- 常見問題
什麼是gtag？
gtag.js（Google Tag）是Google提供的JavaScript標籤，用來將網站資料傳送至Google的各項產品，如GA4、Ads、Floodlight、Campaign Manager 360。
實際載入的JavaScript檔案是：
https://www.googletagmanager.com/gtag/jsgtag.js 如何運作？
當使用者瀏覽網站時：
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4X87W9BLM3"></script> //載入Google Tag
<script>
window.dataLayer = window.dataLayer || []; //初始化dataLayer
function gtag(){dataLayer.push(arguments);} //建立gtag
gtag('js', new Date()); //初始化，JavaScript 已經開始執行
gtag('config', 'G-4X87W9BLM3'); //初始化GA4
</script>
如何安裝GA4
首先需要建立GA4資源，並取得網站專屬的評估ID，整個流程可分為四個步驟：
建立資源
在GA4中點擊「管理」——「建立」——「資源」，做如下設定：
- 資源名稱： 建議包含網站名稱與平台，例如，我這裡命名為“Haran的營銷筆記（GA4）”
- 報表時區：建議設定為主要使用者所在地的時區，例如台灣選擇 （GMT+08:00）台北。時區會影響每日資料切分，設定後不建議隨意更改。
- 貨幣：設定為主要營運使用的幣別，例如新台幣（TWD）。此設定會影響 GA4 報表中營收、交易金額等數據的顯示。
設定完成後，點擊 「下一步」，進入商家詳細資料設定。
商家詳細資料
此步驟主要是設定企業或網站的基本背景資訊，包含：
需要設定：
- 產業類別： 選擇與網站最接近的產業，這個選項會影響後續「業務目標」中可使用的報表範本。
- 商家規模： 依實際情況選擇。
這一頁的設定主要用於報表建議，不會影響實際資料收集，完成後點擊 「下一步」。
設定業務目標
GA4會依據你選擇的業務目標，自動建立部分預設報表，例如：
這些設定不會限制你後續的分析方式，只是影響 GA4 預設提供哪些報表內容，可依需求選擇，或直接略過。
建立網站資料串流
完成前面設定後，系統會進入資料串流建立畫面。
你也可以點擊「管理」——「資源設定」——「資料收集和修改」——「資料串流」，打開資料串流頁面。
在資料串流頁面中，點擊 「網站」 來建立網站資料串流：
- 網站網址：請輸入實際的網站網址，例如，我這裡設定為https://www.haranhuang.com
- 串流名稱：建議使用網站名稱，方便日後辨識，例如我這裡設定為“Haran的營銷比例”
- 加強型評估：預設即可，通常不需要額外修改。
確認設定無誤後，點擊 「建立串流」，即完成 GA4 資料串流的建立。
取得Google Tag
在網頁資料詳情裡點擊「Google代碼」——「查看代碼操作說明」——「手動安裝」，就可以獲取Google Tag：
安裝Google Tag
講程式碼放在每個網頁 <head> 中。
如何驗證是否安裝成功
- 方法一：在瀏覽器開發者工具裡的網路，用 gtag 去過濾，可以看到 gtag.js，表示安裝成功
- 方法二：在獲取Google Tag的位置的下方，有一個測試網站的功能，也可以驗證是否安裝成功
如何傳送自訂事件？
假設我現在要追蹤的位置的點擊事件：
Step 1：建立自訂事件 gtag_method
gtag事件的標準寫法如下：
gtag('event', '<event_name>', {
<event_parameters>
});
參數說明：
- event_name：事件名稱（可自訂）
- event_parameters：事件參數（可自訂）
將事件名稱設定為gtag_method, 事件參數定位 label, 值是test，程式碼如下：
gtag('event', 'gtag_method', {
'label':'test'
});
Step 2：將gtag加入HTML點擊事件
將滑鼠移動到追蹤的位置，然後查看程式：
原始HTML結構如下：
<a href="/">自訂事件（硬編碼）</a>
添加gtag事件代碼後是:
<a href="/" onclick=“gtag('event', 'gtag_method', {'label':'test' });”>自訂事件（硬編碼）</a>
使用onclick是因為此案例為「點擊行為追蹤」，當使用者點擊連結時，會同時送出 GA4 事件
Step 3：事件測試方式（DebugView方法）
由於此方法未使用GTM，因此無法透過GTM預覽調試。
需要使用Google Analytics Debugger拓展去調試，開啟Google Analytics Debugger後，去點擊需要測試位置，然後到GA4的Debugview裡去看，觀察事件是否成功送達GA4。
Step 4：GA4自訂維度設定
如果你希望在報表中使用事件參數 label，必須先在GA 註冊自訂維度。
在GA4中，點擊「管理」——「自訂定義」——「建立自訂維度」, 然後做如下設定：
你就可以在GA4中使用gtag_method_label這個維度。
gtag.js 與 GTM 有什麼差異？
| 比較項目 | gtag.js | GTM |
|---|---|---|
| 安裝方式 | 修改程式碼 | GTM Container |
| 管理介面 | 無 | 有 |
| 建立事件 | 程式開發 | 可視化設定 |
| 第三方標籤 | 不方便 | 非常方便 |
| 行銷人員自行修改 | 幾乎不能 | 可以 |
| 維護成本 | 較低 | 較高 |
| 適合網站 | 小型網站 | 中大型網站 |
常見問題（FAQ）
一個網站可以安裝多個Google Tag嗎？
可以。
例如：
gtag('config', 'G-AAAAAA');
gtag('config', 'G-BBBBBB');事件可同時送往兩個不同的GA4資源。
gtag.js可以同時送到Google Ads嗎？
可以，透過同一個Google Tag將資料傳送至多個Google產品。
gtag.js可以取代 GTM 嗎？
若網站僅需GA4或少量Google產品整合，gtag.js 足以應付。
但若需要管理多種第三方標籤、依條件觸發事件、版本控制或由行銷團隊自行維護，GTM仍是更具彈性的選擇。
結語
gtag.js 是 Google 官方提供的輕量級安裝方式，只需幾行程式碼即可完成 GA4 部署，適合功能單純、追蹤需求較少的網站。對於需要更複雜的事件管理、第三方標籤整合與版本控管的專案，則建議改用GTM。