突破限制：Shopify 標準方案結帳頁面 GTM 追蹤

, ,
1

在 Shopify 標準方案上，無法直接修改「資訊、運送、付款」步驟的結帳樣板，只能透過「Customer Events 自訂像素」及「訂單狀態頁附加程式碼（Additional Scripts）」來部署 Google Tag Manager (GTM)。

一、準備工作

  1. 建立 GTM 帳戶並取得 Container ID（格式如 GTM-XXXXXX）。
  2. 在 Shopify 後台啟用自訂像素：
    • 前往「設定(Settings) > 客戶事件(Customer events)」。
    • 點擊「新增自訂像素(Add custom pixel)」，選擇 Google Tag Manager Custom Pixel 教學範本並貼上去。

二、在 Customer Events 中安裝 GTM

於自訂像素程式碼區，貼入以下片段（移除 <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');

然後訂閱你想要的結帳步驟事件，並推送到 dataLayer，例如：

analytics.subscribe('checkout_started', event => {
  window.dataLayer.push({
    event: 'begin_checkout',
    value: event.data.checkout.totalPrice.amount,
    currency: event.data.checkout.currencyCode
  });
});
analytics.subscribe('checkout_address_info_submitted', event => {
  window.dataLayer.push({
    event: 'add_shipping_info',
    shipping_tier: event.data.checkout.shippingLine.title
  });
});
analytics.subscribe('checkout_payment_info_submitted', event => {
  window.dataLayer.push({
    event: 'add_payment_info'
  });
});
analytics.subscribe('checkout_completed', event => {
  window.dataLayer.push({
    event: 'purchase',
    transaction_id: event.data.checkout.order.id,
    value: event.data.checkout.totalPrice.amount,
    currency: event.data.checkout.currencyCode
  });
});

三、設定 Additional Scripts (訂單狀態頁)

  1. 後台「設定(Settings) > 結帳(Checkout)」。
  2. 在「訂單狀態頁附加程式碼(Order status page Additional scripts)」區域貼上：
    • 先貼入相同的 GTM container <script> 無標籤程式碼（如上）。
    • 再貼入任何直接在「謝謝頁」想要觸發的 dataLayer 推送程式。
  3. 儲存後，完成 GTM 在訂單完成頁的部署。

四、GTM 端設定

  1. 在 GTM 建立自訂事件觸發器（Trigger type：Custom Event），名稱與上述 event 欄位一致，例如 begin_checkout、purchase。
  2. 建立相對應的 GA4 或其他第三方標籤 (Tag)，選擇對應觸發器及 dataLayer 變數。
  3. 在 GTM Preview 模式測試，確認事件在不同結帳步驟正確觸發。

五、小結

  • 標準方案無法直接編輯 checkout.liquid，僅能透過 Customer Events 自訂像素與 Order Status Page Additional Scripts 來部署 GTM。
  • 利用 analytics.subscribe 訂閱結帳過程中的事件，並推送到 dataLayer，再由 GTM 觸發標籤進行分析或轉換追蹤。
  • 測試與驗證：使用 Shopify Pixel Helper 或瀏覽器 Console、Network 標籤確認事件。

這樣即可在 Shopify 標準方案的結帳流程中，完整安裝並啟用 Google Tag Manager 追蹤標籤。