建立 Google 代碼管理工具自訂像素

此頁面列印時間為 Mar 27, 2023。如須最新版本，請至 https://help.shopify.com/zh-TW/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial。

此頁面提供的說明會介紹如何將 Google 代碼管理工具 (GTM) 作為自訂像素，來管理第三方像素。

準備建立自訂像素

使用 Google 代碼管理工具建立自訂像素之前，請確認以下資訊，確保您瞭解設定像素的方式：

建立 Google 代碼管理工具自訂像素

步驟

  1. 開啟 Google 代碼管理工具帳戶，然後選取要設定自訂像素的帳戶。
  2. 依序點擊「管理」和「安裝 Google 代碼管理工具」以開啟安裝程式碼。
  3. 複製屬於 head 區段的程式碼區塊。
  4. 從此程式碼區塊移除 HTML 標籤。
  5. 將剩餘的程式碼插入新的 Shopify 自訂像素。
  6. 使用 window.dataLayer = window.dataLayer || []; 初始化 dataLayer 物件。

您的自訂像素程式碼應如下所示，且 GTM-XXXXXXX 應與您的 GTM 容器 ID 相符。

(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');

window.dataLayer = window.dataLayer || [];

訂閱顧客事件並推送至 GTM 的 dataLayer

您會在自訂像素程式碼中執行所有 GTM dataLayer 工作，不用將 dataLayer.push() 呼叫新增至您的 Liquid 範本檔案。

依預設，您可以訂閱一組立即可用的標準自訂事件，也可以從 Liquid 範本檔案發布自己的自訂事件。

以下是訂閱標準「product_viewed」事件的範例，此事件表示有人檢視某項商品。當事件觸發時，系統會將事件推送到 dataLayer。

analytics.subscribe('product_viewed', (event) => {
  window.dataLayer.push({
   'event': 'product_viewed',
   'product_title': event.data.productVariant.title,
  });
});

此次範例中傳輸的資料為商品名稱，這些資料使用 Google 代碼管理工具變數且可轉傳給其他代碼。

使用 analytics.publish() 取代舊的 dataLayer.push(event) 呼叫

如果您先前已完成 Google 代碼管理工具的設定，則需要使用 Shopify.analytics.publish() 呼叫取代 dataLayer.push 呼叫。

以下是使用 dataLayer 跟蹤自訂電子郵件註冊事件的簡易範例。

<script>
  dataLayer.push({ event: 'email_signup', email: customer.email });
</script>

Shopify 等效程式碼如下所示，此程式碼可將資料推送到您的自訂像素。

<script>
  Shopify.analytics.publish('email_signup', {email: customer.email });
</script>

然後，在自訂像素程式碼中新增類似下列內容。

analytics.subscribe("email_signup", (event) => {
  window.dataLayer.push({
   'event': 'email_signup',
   'email': event.customData.email,
  });
});

取代舊的 dataLayer.push(data)

Google 代碼管理工具有一項功能，可讓您將可設定狀態的資料層物件推送至每個事件。雖然 Shopify 的像素沙箱不包含相等的功能，但您可以建立自己的資料物件並傳輸到自訂事件，來獲得相同的結果。

例如，在發布任何自訂事件之前，先定義一個「customData」物件。

<script>
  const customData = {email: customer.email}
</script>

然後，每當您想包含自訂資料時，請將該物件傳入您的發布方法中。

<script>
  Shopify.analytics.publish('email_signup', customData);
</script>

Google 代碼管理工具自訂像素範例

以下範例為簡化版本的 Google 代碼管理工具自訂像素，介紹如何將資料傳送到 GTM。若要將更多事件推送到您的 dataLayer，您可以訂閱更多標準和自訂事件。

(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');

window.dataLayer = window.dataLayer || [];

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
   'event': 'product_viewed',
   'product_id': event.data.product.id,
   'product_title': event.data.product.title,
  });
});

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
   'event': 'checkout_completed',
   'order_id': event.data.order.id,
   'currency': event.data.checkout.currencyCode,
  });
});

設定 Google Analytics (分析) 4 的秘訣與竅門

將 Google 代碼管理工具作為自訂像素時，不妨參考下列 Google Analytics (分析) 4 (GA4) 的設定秘訣。

更簡潔的頁面網址

當 GA4 在沙箱中執行時，您可能會注意到頁面網址包含的資訊與該沙箱相關。如果要從這些網址移除沙箱資訊，您可以關閉 GA4 的自動頁面追蹤，改為透過標準 page_viewed 事件來使用自己的追蹤功能。

analytics.subscribe('page_viewed', (event) => {
  window.dataLayer.push({
   'event': 'page_viewed',
   'page_location': event.context.window.location.href,
   'page_title': event.context.document.title,
  });
});

您將自己的事件發布到 dataLayer 後，您可以建立一個在 page_viewed 事件上觸發的 GA4 page_view 代碼。大多數情況下，您可以使用 Google Analytics (分析)：GA4 事件代碼類型，將事件名稱設為 page_view。設定代碼類型和事件名稱後，您應為 page_location 新增參數，並將值設為您透過顧客像素傳入資料層的值。

加強型評估

在 Shopify 的像素沙箱中載入 GA4 時，您將須手動設定一些系統通常會自動推斷的事件。例如，基於安全考量，使用自訂像素時，出站連結點擊次數 (其中一項 GA4 加強型評估設定) 不會自動觸發。但是，您可以自行實作 GA4 的加強型事件評估並作為自訂事件。

下方提供的程式碼包括追蹤出站連結點擊次數的簡化範例。

<script>
  function detectOutboundLink() {
    // add your logic for determining if a link click is outbound

    // if the link click is outbound then publish it
    if (isOutboundLink) {
      Shopify.analytics.publish('outbound_link', { link_url: link_url });
    }
  }
</script>

最後，在 GTM 中，確認該事件名稱為「click」且符合 GA4 的加強型事件命名規則，並建立會將連結點擊次數資料傳送給 GA4 的 GA4 代碼。

Google 的任何加強型評估指標都能達到相同的追蹤效果。

測試和偵錯

  1. 在 Chrome 瀏覽器中開啟您的 Shopify 商店。
  2. 在瀏覽器上開啟網路分頁並找到名為「collect?...」的要求，若資料已從 Google 代碼管理工具傳送至 GA4，此要求便會包含 GA4 評估 ID。
  3. 在 Google Analytics (分析) 帳戶中，依序點擊「管理」和「DebugView」。
  4. 請確認您已將 GA 偵錯擴充功能新增至 Chrome 瀏覽器：
    • 啟用 GA 偵錯。
    • 在單獨的分頁中開啟您的 Shopify 商店。
    • 返回 DebugView 的 GA4 並查看 page_viewed 事件。

準備好開始透過 Shopify 銷售商品了嗎？

免費試用