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

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

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

更新時間:2025年5月30號

隨著瀏覽器隱私機制(如 Safari 的 ITP、Firefox 的 ETP)以及廣告阻擋工具越來越嚴格,傳統的前端追蹤(Client-side Tracking) 正逐漸面臨資料流失的問題。

因此,GTM Server-side(sGTM)伺服端追蹤,已成為目前 GA4 與數位分析實務中,用來提升資料完整性與追蹤穩定度的重要解決方案之一。

本文將以Stape為範例,說明如何從零開始建置sGTM,並完成實際的布署與驗證流程。

認識Stape

Stape是一家提供GTM伺服端(Server-side)標籤託管服務的平台,主要用途是簡化伺服端追蹤的建置流程,讓使用者能更容易實現Server-side Tracking,而不需要自行架設雲端環境。

對於沒有後端或雲端相關經驗的數據分析人員來說,Stape是目前上手門檻最低、最容易導入的sGTM解決方案之一。

實現原理

整體運作原理如下:

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

 

此流程會使用到兩個GTM容器:

  • 一個是sGTM :伺服端容器

  • 一個是GTM: 一般網站容器

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

布署示範

創建伺服端容器sGTM

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

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

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

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

 

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

就可以點擊「關閉」。

Stape裡創建sGTM

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

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

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

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

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

這裡選擇免費版的。

 

設定伺服器容器網址

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伺服端追蹤完整教學

 

 

創建網站容器GTM

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

然後做如下設定:

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

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

 

 

安裝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的程式碼,將其安裝到網站。

配置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伺服端追蹤完整教學

sGTM預覽調試

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

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

資料可以發送。

 

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

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

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

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

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

 

 

 

類似Stape的產品還有TAGGRS,有興趣可以去了解。


如果您在操作上仍有任何疑問,歡迎留言交流,或加入: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