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

Shopline安裝 Google Tag Manager(GTM)完整教學

Google Tag Manager Haran 4年前 (2023-01-15) 3967次瀏覽 0條留言

如果你想在Shopline網站上部署GA4、Google Ads、Meta Pixel、TikTok Pixel 等各種追蹤工具,那麼最推薦的方式就是透過GTM進行管理。

好消息是,Shopline已內建支援GTM,因此安裝過程相當簡單,不需要修改網站程式碼,只需填入GTM容器ID即可完成設定。

本文將帶你一步一步完成Shopline安裝GTM的流程,並介紹如何驗證是否安裝成功。

為什麼要使用Google Tag Manager?

GTM是Google提供的免費標籤管理工具,可以集中管理網站上的各種追蹤程式。

透過GTM,你可以快速部署:

  • GA4
  • Meta Pixel(Facebook Pixel)
  • TikTok Pixel
  • 自訂事件追蹤

最大的優點是:

  • 不需要頻繁修改網站程式碼
  • 行銷與分析人員可自行管理追蹤設定
  • 降低開發成本
  • 提升追蹤維護效率

第一步:建立Google Tag Manager容器

使用Google帳號登入GTM後,在GTM中的賬戶右側點擊三個點,然後點選“建立容器”:

Shopline安裝 Google Tag Manager(GTM)完整教學

然後會進入建立容器的界面,做如下設置:
Shopline安裝 Google Tag Manager(GTM)完整教學

容器名稱:建議使用網站網域名稱或域名,方便日後管理。我這裡是www.haranhuang.com

目標廣告平台:就是要安裝的目標廣告平台類型,一種有5種,根據實際情況去選擇,我這裡是網站,所以選擇“網路”

  • 網路:就是網站類型
  • iOS:就是iOS應用程式
  • Android:就是Android應用程式
  • AMP:谷歌的AMP
  • Server:伺服器標籤追蹤

設置好後點擊“建立”就會創建容器。

第二步:取得GTM容器ID

建立完成後,GTM會產生一組容器編號。你可以在 GTM 後台右上角看到這組編號:

Shopline安裝 Google Tag Manager(GTM)完整教學

 

這組ID就是稍後要填入Shopline的追蹤代碼。

第三步:在Shopline安裝GTM

在Shopline裡點擊「網店行銷及追蹤」——「追蹤設定」,就可以看到Shopline支援的第三方追蹤工具:

Shopline安裝 Google Tag Manager(GTM)完整教學

 

然後選擇「Google 代碼管理工具」:

Shopline安裝 Google Tag Manager(GTM)完整教學

將GTM追蹤編碼GTM-TCH6XWZ 黏貼到 “我的 Google 代碼管理工具追蹤編號是:”,然後點擊「儲存」。

Shopline安裝 Google Tag Manager(GTM)完整教學

儲存後,如果左上角出現綠色勾勾圖示,表示Shopline已成功儲存GTM設定。

不過此時還不能代表GTM已正常運作,仍需要進一步驗證。

 

第四步:發布GTM容器版本

許多人完成安裝後發現GTM無法載入,原因通常是:

容器尚未發布。

即使 GTM 已成功安裝到網站,若容器沒有發布版本,網站仍不會載入任何標籤,所以在驗證前,需要先發布一個版本,點擊右上角的「提交」就可以發佈版本:

Shopline安裝 Google Tag Manager(GTM)完整教學

 

第五步:驗證GTM是否安裝成功

打開Chrome開發者工具,找到Network,在Filter裡用“GTM-”過濾:

Shopline安裝 Google Tag Manager(GTM)完整教學

可以看到GTM的請求是正常加載,狀態是200表示加載成功,也就是GTM追蹤碼安裝成功。

 

常見問題

已填入GTM容器ID,但沒有看到請求?

請確認:

  • GTM容器是否已發布
  • GTM容器ID是否輸入正確
  • 是否誤填GA4的 Measurement ID(G-XXXXXXX)
  • 是否受到瀏覽器外掛阻擋

GTM和GA4可以同時安裝嗎?

可以,但一般建議:Shopline安裝GTM,再透過GTM部署GA4

這樣後續管理會比較方便。

避免同時使用:

  • Shopline直接安裝GA4
  • GTM再安裝一份GA4

否則容易造成資料重複收集。


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

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

  • 顯示名稱*
  • 電子郵件地址*
  • 個人網站網址