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

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

準備建立自訂像素

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

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

步驟

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

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

在自訂像素程式碼中,您可以使用 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,您可以訂閱更多標準和自訂事件。

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

//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 代碼管理工具中的標籤、觸發條件和資料層變數。

使用下列 checkout_completed 事件:

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

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

order_idcurrency 是 Google 代碼管理工具中用於擷取事件資料的變數。它們可以對應到 Google 代碼管理工具中的資料層變數。每個事件變數都需要其自己的資料層變數。請將觸發條件設為對所有自訂事件觸發。

建立一個標籤,並讓此標籤使用剛才建立的觸發條件。在事件參數下方,新增您要擷取的變數。在上述範例中,order_idcurrency 將會設為資料層變數。每次標籤觸發時,皆會擷取事件的 order_idcurrency

請注意,若要執行資料傳輸,必須在 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 代碼管理工具有一項功能,可讓您將可設定狀態的資料層物件推送至每個事件。雖然 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 新增參數,並將值設為您透過顧客像素傳入資料層的值。

加強型評估

在 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. Google Tag Assistant 舊版 Chrome 擴充功能加到瀏覽器。
  3. 點擊該擴充功能圖示,然後點擊「啟用」。
  4. 導覽至您的網站,然後觸發您要測試的事件。
  5. 在擴充功能中,點擊「Google 代碼管理工具」標籤。「資料層」區段應會顯示已觸發的事件承載。
  6. Google 代碼管理工具載入的其他標籤也都列在擴充功能中。點擊這些標籤即可查看向其傳送的資料。

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

免費試用