如何在 Shopify 上安裝 Google Tag Manager?

為什麼你該在 Shopify 上安裝 Google Tag Manager?

想像一下:當顧客在你的 Shopify 商店點擊某個商品卻沒結帳,你卻不知道原因?GTM 就像你的數位偵探工具,幫你追蹤用戶行為、設定再行銷廣告,甚至整合 Google Analytics 4(GA4),而且完全不用碰程式碼!以下用最白話的步驟帶你完成安裝👇

安裝 Google Tag Manager 的完整步驟

:white_check_mark: 步驟 1:建立 GTM 帳戶

  1. 進入 Google Tag Manager 官網
  2. 點擊「建立帳戶」,輸入商店名稱(例如:我的品牌電商)
  3. 容器名稱填寫你的 Shopify 網址,平台選「Web

:light_bulb: 小提醒:容器設定中的「目標廣告平台」可先跳過,之後隨時能加

:white_check_mark: 步驟 2:取得 GTM 安裝代碼

建立帳戶後,你會看到兩組代碼:

<!-- Google Tag Manager -->
<script>(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-XXXXXX');</script>
<!-- End Google Tag Manager -->

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

重點複製這兩段!(GTM-XXXXXX 是你的專屬 ID)

:white_check_mark: 步驟 3:將代碼貼入 Shopify 後台

  1. 登入 Shopify 管理介面 → 左側「線上商店」→「主題
  2. 點擊「編輯程式碼」→ 在 theme.liquid 檔案中尋找 </head> 標籤
  3. 第一段代碼 貼在 </head> 上方
  4. 再尋找 <body> 標籤,將 第二段代碼 貼在 <body> 下方
  5. 儲存後,回到 GTM 介面點擊「提交」發布容器

:white_check_mark: 步驟 4:用 GA4 測試是否成功

  1. 在 GTM 建立新代碼 → 選擇「Google Analytics:GA4 事件
  2. 輸入你的 GA4 評估 ID(在 GA4 後台的「管理」>「資料串流」中找)
  3. 觸發條件選「All Pages
  4. 發布後,用 Google Tag Assistant 檢查
    → 看到綠勾就代表安裝成功!

常見問題破解

:red_question_mark: 安裝後數據沒更新?

  • 清除瀏覽器快取或試用無痕模式
  • 確認 GTM 容器已「提交」發布(非草稿狀態)
  • 在 Shopify 主題編輯器預覽模式中測試

:red_question_mark: 需要請開發者嗎?

完全不用!這套方法是 Shopify 官方推薦的無程式碼解法,適合所有使用者。

:red_question_mark: 能追蹤哪些數據?

透過 GTM 可輕鬆監測:

  • 按鈕點擊(例如「加入購物車」)
  • 表單提交(訂閱電子報)
  • 滾動深度(用戶看了多少頁面)
  • 自訂事件(特價活動轉換率)

進階技巧:用 GTM 提升轉換率

試著在 GTM 設定「結帳頁面瀏覽」事件,當用戶進入 /checkout 頁面時觸發,再搭配 Facebook 像素進行再行銷,能有效挽回棄單客戶!

:glowing_star: 小結:安裝 GTM 只要 10 分鐘,卻能解鎖精準數據戰力。現在就動手,別讓流量白白浪費啦!

(附註:若需視覺化教學,可參考 Shopify 官方指南或 GTM 的 YouTube 頻道)