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

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

GTM高階 Haran 4年前 (2023-04-14) 4581次瀏覽 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,*为發佈留言必須填寫。

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