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

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

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

此頁面上

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

準備建立自訂像素

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

建立或開啟 Google 代碼管理工具帳戶並取得 GTM 容器 ID。
基於安全考量，在沙箱中載入的代碼管理工具與其他像素的限制相同。深入瞭解像素沙箱限制。

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

步驟如下：

開啟 Google 代碼管理工具帳戶，然後選取要設定自訂像素的帳戶。
依序點擊「管理」和「安裝 Google 代碼管理工具」以開啟安裝程式碼。
複製屬於 head 區段的程式碼區塊。
從程式碼區塊移除 HTML 標籤。例如，<script></script>。
將剩餘的程式碼插入新的 Shopify 自訂像素。
訂閱顧客事件並推送至 GTM 的 dataLayer。
若要檢視程式碼顯示的方式，請參閱 Google 代碼管理工具自訂像素範例。
設定 Google 代碼管理工具來接受您的自訂像素事件。
選用：如果 checkout.liquid 檔案中已有 dataLayer.push(event) 呼叫，請替換為 analytics.publish()。

訂閱顧客事件並推送至 GTM 的資料層

在自訂像素程式碼中，您可以使用 GTM 的 dataLayer 來訂閱顧客事件。

依預設，您可以訂閱一組標準顧客事件。但是，如果您想追蹤的顧客事件並非標準事件，可以從 Liquid 範本檔案發布自己的自訂事件。

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

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

在此例中，產品名稱在事件承載中傳遞。您可以使用 Google 代碼管理工具變數，在您所選的標籤中擷取事件承載內的產品名稱。

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

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

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

//Google Consent Mode v2
gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

//subscribe to events
analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("payment_info_submitted", (event) => {
  window.dataLayer.push({
    event: "payment_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_shipping_info_submitted", (event) => {
  window.dataLayer.push({
    event: checkout_shipping_info_submitted,
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_address_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_address_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_contact_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_contact_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_started", (event) => {
  window.dataLayer.push({
    event: "checkout_started",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("product_added_to_cart", (event) => {
  window.dataLayer.push({
    event: "product_added_to_cart",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    price: event.data?.cartLine?.merchandise?.price?.amount,
    currency: event.data?.cartLine?.merchandise?.id,
    product_title: event.data?.cartLine?.merchandise?.product?.title,
    quantity: event.data?.cartLine?.quantity,
    total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,
  });
});

analytics.subscribe("cart_viewed", (event) => {
  window.dataLayer.push({
    event: "cart_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    total_cost: event.data?.cart?.cost?.totalAmount?.amount,
    quantity: event.data?.cart?.totalQuantity,
    cart_id: event.data?.cart?.id,
  });
});

analytics.subscribe("page_viewed", (event) => {
  window.dataLayer.push({
    event: "page_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    page_title: event.context.document.title,
  });
});

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
    event: "product_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    product_id: event.data?.productVariant?.product?.id,
    product_title: event.data?.productVariant?.title,
    product_sku: event.data?.productVariant?.sku,
  });
});

analytics.subscribe("search_submitted", (event) => {
  window.dataLayer.push({
    event: "search_submitted",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    query: event.data?.searchResult?.query,
  });
});

analytics.subscribe("collection_viewed", (event) => {
  window.dataLayer.push({
    event: "collection_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    collection_id: event.data?.collection?.id,
    collection_title: event.data?.collection?.title,
  });
});

設定 Google 代碼管理工具來接受您的自訂像素事件

建立自訂像素後，您需要設定 Google 代碼管理工具來接受自訂像素事件。為此，您需要代碼、觸發條件和 Google 代碼管理工具中的 dataLayer 變數。

下表列出選定的標準顧客事件及 Google 代碼管理工具對應事件的幾個範例：

標準 Shopify 顧客事件清單及在 GTM 中的對應事件
Shopify 事件	觸發條件	GTM 事件
payment_info_submitted	提交付款資訊	add_payment_info
checkout_address_info_submitted	提交運送資訊	add_shipping_info
product_added_to_cart	新增品項至購物車	add_to_cart
checkout_started	開始結帳	begin_checkout
checkout_completed	完成結帳	購買
product_removed_from_cart	從購物車移除品項	remove_from_cart
cart_viewed	檢視購物車	view_cart
product_viewed	檢視商品詳細資訊頁面	view_item
collection_viewed	檢視品項清單	view_item_list

GTM 代碼事件參數需符合預期的命名規則，以配合處理自訂像素 dataLayer 事件。

以下是選定自訂像素 dataLayer 事件屬性，及對應的 Google Analytics (分析) 4 (GA4) 事件參數的範例：

使用 GA4 命名規則的自訂像素 `dataLayer` 事件的選定清單
自訂像素 `dataLayer` 事件	GA4 事件參數
`event.data?.checkout?.currencyCode`	`貨幣`
`event.data?.checkout?.totalPrice?.amount`	`value`
`event.data?.checkout?.order?.id`	`transaction_id`
`event.data?.checkout?.discountAllocations`	`coupon`
`event.data?.checkout?.shippingLine?.price?.amount`	`shipping`
`event.data?.checkout?.totalTax`	`tax`
`event.data?.checkout?.lineItems`	`items`

下面是使用 checkout_completed 事件的範例：

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    price: event.data.checkout.totalPrice.amount,
    shippingLine: event.data.checkout.shippingLine.price.amount,
    totalTax: event.data.checkout.totalTax,
  });
});

Google 代碼管理工具觸發條件是一種自訂事件類型，其事件名稱為 checkout_completed。觸發條件中的「事件名稱」欄位必須與自訂像素中的事件金鑰相符。

orderId 和 currency 是 Google 代碼管理工具中用於擷取事件資料的變數。這些變數可以對應到 Google 代碼管理工具中的 dataLayer 變數。每個事件變數都需要自己的 dataLayer 變數。請將觸發條件設為對所有自訂事件觸發。

建立一個代碼，並讓此代碼使用剛才建立的觸發條件。在事件參數下方，新增您要擷取的變數。在上述範例中，orderId、currency、price、shippingLine 和 totalTax 將會設為 dataLayer 變數。每次觸發代碼時，皆會擷取事件的這些 dataLayer 變數。

請注意，若要執行資料傳輸，必須在 Google 代碼管理工具中至少設定一個標籤和觸發條件。

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

如果您先前已完成 Google 代碼管理工具的設定，則需使用 Shopify.analytics.publish() 呼叫取代 dataLayer.push 呼叫。您可以前往佈景主題編輯器的「版面配置」區段，然後在 theme.liquid 檔案中找到 dataLayer.push 呼叫。

您也需要替換 checkout.liquid 中的 dataLayer.push 呼叫。不過，由於 checkout.liquid 與 Checkout Extensibility 不相容，因此必須使用 UI 擴充功能將資料推送到網頁像素。

以下是使用 theme.liquid 檔案中的 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 代碼管理工具有一項功能，可讓您將可設定狀態的 dataLayer 物件推送至每個事件。雖然 Shopify 的像素沙箱不包含同等功能，但您可以建立自己的資料物件並傳輸到自訂事件，藉此獲得相同的結果。

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

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

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

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

設定 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 的參數，並將值設為您透過自訂像素傳入 dataLayer 的值。

加強型評估

在 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 的任何加強型評估指標都能達到相同的追蹤效果。

測試和偵錯

在 Chrome 瀏覽器中開啟您的 Shopify 商店。
將 Google Tag Assistant 舊版 Chrome 擴充功能加到瀏覽器。
點擊該擴充功能圖示，然後點擊「啟用」。
導覽至您的網站，然後觸發您要測試的事件。
在擴充功能中，點擊「Google 代碼管理工具」標籤。「資料層」區段應會顯示已觸發的事件承載。
Google 代碼管理工具載入的其他標籤也都列在擴充功能中。點擊這些標籤即可查看向其傳送的資料。

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

此頁面上

準備建立自訂像素

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

步驟如下：

訂閱顧客事件並推送至 GTM 的資料層

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

設定 Google 代碼管理工具來接受您的自訂像素事件

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

取代舊的 dataLayer.push(data)

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

更簡潔的頁面網址

加強型評估

測試和偵錯

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