有問題可以在文章底部留言

用Stape实现Google Tag Manager伺服端追蹤完整教學

Google Tag Manager Haran 2年前 (2024-12-11) 6293次瀏覽 2條留言

更新時間:2025年5月30號

隨著Safari的ITP、Firefox的ETP以及各類廣告阻擋工具持續升級,傳統的Client-side Tracking(客戶端追蹤) 開始面臨嚴重的資料流失問題。

常見現象包括:

  • GA4與廣告平台轉換數據不一致
  • session/user數據低估
  • third-party cookie限制導致歸因失真

因此,GTM Server-side(伺服端追蹤,簡稱sGTM) 已逐漸成為GA4架構中的標準解法,用來提升:

  • 資料完整性
  • 追蹤穩定性
  • Cookie可控性
  • 廣告歸因準確度

本篇將以Stape為例,帶你從0完成sGTM架設、設定與驗證。

什麼是Stape?

Stape是一個專門提供GTM Server-side容器託管服務 的平台。

它的核心價值是:

幫你「省去自己架AWS/GCP/Cloud Run的複雜流程」

傳統sGTM架設需要:GCP/Cloud Run設定、Docker/server管理、SSL/domain配置、scaling與維運

但使用Stape:不需要後端能力、不需要雲端部署、直接UI操作完成sGTM

適合:數據分析師、Marketing技術人員、初階工程師團隊

sGTM架構運作原理

sGTM的核心架構如下:網站 → Web GTM → Server GTM → GA4/Ads

在這個會使用到兩個GTM容器:

  • 一個是Web GTM: 是一般網站容器,用於瀏覽器端收集事件

  • 一個是sGTM :是伺服端容器,用於伺服端轉送與處理資料

一般網站容器所收集到的資料,會先送到伺服端容器,再由伺服端统一轉送至GA4或其他平台。

布署示範

Step 1:創建伺服端容器sGTM

首先創建伺服端容器sGTM,在GTM裡點擊「管理」——「+」,然後做如下設定:

用Stape实现Google Tag Manager伺服端追蹤完整教學

點擊「建立」後就進入設定標記伺服器:

用Stape实现Google Tag Manager伺服端追蹤完整教學

選擇“手動佈建標記伺服器”,需要複製容器設定aWQ9R1RNLVBOMk5ENkNDJmVudj0xJmF1dGg9QWQ1TjUzaWRsX1lzNkdHV0dLeXF5dw==,後面將用於在Stape裡設定。

就可以點擊「關閉」。

Step 2:Stape裡創建sGTM

在Stape裡點擊「sGTM」——「Create container」,然後做如下設定:

用Stape实现Google Tag Manager伺服端追蹤完整教學

Container configuration裡黏貼上一步複製的aWQ9R1RNLVBOMk5ENkNDJmVudj0xJmF1dGg9QWQ1TjUzaWRsX1lzNkdHV0dLeXF5dw==。

最後點擊「Create Container」,接下裡就是選擇訂閱的類型:

用Stape实现Google Tag Manager伺服端追蹤完整教學

這裡選擇免費版的。

 

Step 3:設定伺服器容器網址

Stape裡的sGTM裡自動生成一個伺服器容器網址,打開剛創建的sGTM,找到 Domains (Tagging Server URLs)就可以看到伺服器容器網址是 https://ybshxyvs.jp.stape.io:

用Stape实现Google Tag Manager伺服端追蹤完整教學

也就是GTM代碼的和資料的發送都是發送到這個地址,這是個第三方的網域,看起來不太好看,我們可以自定,點擊「Add custom domain」,做如下設定:

用Stape实现Google Tag Manager伺服端追蹤完整教學

到域名商後台設定CNAME,這個設定的作用是GTM代碼的和資料的發送都是發送到這個地址gtm.haranhuang.com。

免費版的Stape只能設定一個CNAME,如果是使用付費版的Stape ,建議設定兩個CNAME,一個用於加載GTM的程式碼,一個用於接收GA4資料。

 

返回到GTM裡,點擊「管理」——「容器設定」設定伺服器容器網址:

用Stape实现Google Tag Manager伺服端追蹤完整教學

 

 

Step 4:創建網站容器GTM

GTM裡創建一個普通的網頁容器,網頁容器ID是GTM-NW7D7DV,下一步會用到它。

然後做如下設定:

用Stape实现Google Tag Manager伺服端追蹤完整教學

重點是要配置參數server_container_url,值是gtm.haranhuang.com,表示資料發送到gtm.haranhuang.com。

 

 

Step 5:安裝sGTM的基礎代碼

在Stape裡點擊「Power-Ups」——「Custom Loader」——「use」做如下設定:

用Stape实现Google Tag Manager伺服端追蹤完整教學

  • Domain:gtm.haranhuang.com,表示從哪裡加載GTM程式碼
  • Web GTM ID:就是上一步網頁容器ID是GTM-NW7D7DV (注意,這裡不是填伺服器容器的)
  • Platform:Other

點擊「Generate」,右側就會生成GTM的程式碼,將其安裝到網站。

Step 6:配置sGTM

在sGTM裡做如下設定:

客戶端

用Stape实现Google Tag Manager伺服端追蹤完整教學

用Stape实现Google Tag Manager伺服端追蹤完整教學

 

變數

勾選內建變數Client Name和Event Name :

用Stape实现Google Tag Manager伺服端追蹤完整教學

觸發條件

用Stape实现Google Tag Manager伺服端追蹤完整教學

代碼

用Stape实现Google Tag Manager伺服端追蹤完整教學

Step 7:sGTM預覽調試

sGTM裡點擊「預覽」,然後打開網站:

用Stape实现Google Tag Manager伺服端追蹤完整教學

資料可以發送。

 

在瀏覽器開發者工具的網路裡,用“gtm”過濾:

用Stape实现Google Tag Manager伺服端追蹤完整教學

可以看到GTM是從gtm.haranhaung.com加載。

用Stape实现Google Tag Manager伺服端追蹤完整教學

資料是發送到gtm.haranhaung.com。


如果您在操作上仍有任何疑問,歡迎留言交流,或加入:Google Analytics 4交流社團發問
Like (0)
發佈我的留言
取消留言
表情 贴图 加粗 删除线 居中 斜体

Hi,*为發佈留言必須填寫。

  • 顯示名稱*
  • 電子郵件地址*
  • 個人網站網址
(2)个小伙伴在留言
  1. 你好,請問sGTM最後代碼設置的部分,評估ID是填上現有GA的ID嗎?(G-xxxxxxxxxx這串)
    S2025-01-19 12:47 Reply Mac OS X | Chrome 131.0.0.0
    • 對,是的
      Haran2025-01-19 13:10 Reply Mac OS X | Chrome 131.0.0.0