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

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

Google Tag Manager Haran 3年前 (2023-04-14) 4321次瀏覽 0條留言

如果你想在Shopify商店中追蹤網站流量、表單送出、加入購物車、購買轉換等行為,通常會使用GTM來管理各種追蹤碼。

本文將介紹Shopify安裝GTM的方式、不同版本的限制,以及實際應用案例。

認識Shopify

Shopify成立於2004年,是目前全球最受歡迎的SaaS電子商務平台之一。

透過Shopify,商家可以快速建立網路商店,並整合:

  • 線上商品銷售
  • 訂單管理
  • 金流服務
  • 物流配送
  • 數位行銷工具

無論是小型品牌還是大型跨國企業,都能利用Shopify建立完整的電商營運系統。

 

Shopify安裝GTM的主要方式

截至2026年,Shopify的追蹤架構已與過去有很大差異。

由於Shopify已全面推動Checkout Extensibility,並逐步淘汰checkout.liquid,因此GTM的安裝方式主要分為以下三種:

方法一:在theme.liquid安裝GTM(最常見)

這是目前大多數Shopify商店最常使用的GTM安裝方式。

在Shopify裡點擊「Online Store」——「Themes」——「…」——「Edit Code」:

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

然後找到theme.liquid:Shopify 安裝 Google Tag Manager(GTM)完整教學

 

將GTM提供的程式碼貼入網站即可。

優點

  • 安裝簡單
  • 設定簡單
  • 支援GTM預覽模式
  • 可追蹤大部分前台頁面

缺點

  • 無法追蹤Checkout頁面
  • 無法取得部分Shopify原生事件
  • 電商事件需要額外開發或透過App協助

適合企業官網、品牌官網、一般Shopify商店

 

方法二:透過 Customer Events(官方推薦)

Shopify目前最推薦的方式。

在Shopify裡點擊「Settings」——「Customer Events」——「Add Custom Pixel」,建立新的 Custom Pixel。

GTM程式碼注意事項:由於Custom Pixel會在Sandbox(沙盒環境)中執行,部分GTM功能與預覽模式會受到限制,無法直接貼上完整GTM安裝碼,需要先移除HTML標籤

移除後HTML標籤的範例:

// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

//Initialize GTM tag
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXXX');

優點

  • Shopify官方支援
  • 支援Checkout Extensibility
  • 可取得更多Shopify原生事件

缺點

  • 在Sandbox運行,不能直接使用GTM預覽調試
  • 除錯流程較複雜
  • 需要熟悉JavaScript

適合需要完整電商追蹤的商家、技術團隊

 

方法三:使用Shopify App Store追蹤工具

如果不想自行開發,也可以直接使用Shopify App Store提供的GTM整合工具,例如Analyzify、Elevar、TagFly,這些工具通常已預先建置完整的電商事件。

優點

  • 快速部署
  • 不需寫程式
  • 自動建立GA4電商事件

缺點

  • 通常需要付費
  • 部分功能依賴第三方維護

適合不熟悉GTM的商家、希望快速上線GA4電商追蹤

Shopify安裝GTM應該選哪種方式?

使用情境 建議方案
品牌官網 theme.liquid
一般Shopify商店 theme.liquid
需要完整電商事件 Customer Events
重視Checkout追蹤 Customer Events
沒有技術團隊 Shopify App
快速導入GA4 Shopify App

常見問題(FAQ)

Shopify可以直接安裝GTM嗎?

可以,大部分商店只需要在theme.liquid中加入GTM程式碼即可。

 

建議使用GTM還是直接安裝GA4?

建議使用GTM,都能集中管理,不需反覆修改Shopify程式碼。

 

Shopify Plus還能使用checkout.liquid嗎?

不能。

Shopify已全面推動Checkout Extensibility,新建商店無法使用checkout.liquid,既有商店也需逐步遷移至新的結帳擴充架構。

因此未來的Shopify追蹤實作,將以Customer Events與Checkout Extensibility為核心。


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

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

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