Theo dõi pixel trên trang sau khi mua hàng

Cẩn trọng

Đoạn mã theo dõi là các tùy chỉnh nâng cao không được đội ngũ hỗ trợ của Shopify hỗ trợ. Bạn phải có kiến thức về các ngôn ngữ thiết kế web như HTML, CSS, JavaScript và Liquid. Cân nhắc thuê chuyên gia Shopify nếu bạn không tự tin khi sử dụng đoạn mã.

Nếu cửa hàng đã cài đặt ứng dụng để thêm trang sau khi mua hàng vào trang thanh toán của cửa hàng, mọi theo dõi pixel tùy chỉnh bạn sử dụng trên cửa hàng có thể không ghi lại một số sự kiện theo dõi. Pixel theo dõi tùy chỉnh được thêm vào hộp Đoạn mã bổ sung của cửa hàng chỉ theo dõi sự kiện trên trang trạng thái đơn hàng, hiển thị sau trang sau khi mua hàng trong trang thanh toán. Nếu khách hàng rời khỏi cửa hàng trên trang sau khi mua hàng, sẽ không có sự kiện nào trên trang trạng thái đơn hàng được theo dõi.

Để đảm bảo ghi lại sự kiện chuyển đổi đúng cách, bạn có thể thêm đoạn mã theo dõi sự kiện trên trang sau khi mua hàng. Đoạn mã này cũng có thể theo dõi các giao dịch mua bổ sung được thực hiện tại trang sau khi mua hàng, ví dụ như bán thêm. Sau khi thêm đoạn mã trang sau khi mua hàng, bạn cần điều chỉnh đoạn mã trang trạng thái đơn hàng để bỏ qua các sự kiện đã được ghi lại bằng đoạn mã trang sau khi mua hàng.

Bạn cần thay đổi cách cửa hàng chỉ theo dõi sự kiện nếu bạn sử dụng pixel theo dõi tùy chỉnh. Ví dụ: Nếu bạn thiết lập Google Analytics qua Cửa hàng trực tuyến > Tùy chọn ưu tiên, Google Analytics sẽ ghi lại chính xác sự kiện trên trang sau khi mua hàng của bạn.

Những điều cần cân nhắc

Đoạn mã bổ sung của trang sau khi mua hàng tương tự như đoạn mã bổ sung của trang trạng thái đơn hàng, nhưng với một số điểm khác biệt chính:

• Đoạn mã được thêm vào trang sau khi mua hàng, không phải trang trạng thái đơn hàng.
• Trường này chỉ cho phép JavaScript. Mã Liquid không được chấp nhận.
• Thẻ HTML duy nhất được phép là <script>.
• Đoạn mã chạy trong một sandbox và không có trong trang chính.
• Bạn chỉ có thể thêm đoạn mã trang sau khi mua hàng nếu cửa hàng đã cài đặt ứng dụng để thêm trang sau khi mua hàng vào trang thanh toán.

Chạy đoạn mã trong sandbox đảm bảo đoạn mã được bảo mật và sử dụng vì mục đích dự định.

Bộ phận hỗ trợ của Shopify không thể hỗ trợ các đoạn mã của trang sau khi mua hàng. Nếu cần trợ giúp, bạn có thể đăng bài trong Cộng đồng Shopify hoặc thuê Chuyên gia Shopify.

Khả năng tương thích với đoạn mã trên trang trạng thái đơn hàng

Để đảm bảo pixel theo dõi chính xác tất cả các sự kiện chuyển đổi, hãy thiết lập đoạn mã theo dõi trên cả trang sau khi mua hàng và trang trạng thái đơn hàng. Để tránh tính sự kiện chuyển đổi hai lần, bạn có thể sử dụng biến Liquid post_purchase_page_accessed trong các đoạn mã chạy trên trang trạng thái đơn hàng.

Nếu khách hàng truy cập trang sau khi mua hàng rồi chuyển đến trang trạng thái đơn hàng, biến post_purchase_page_accessed sẽ trở thành true. Nếu khách hàng không truy cập trang sau khi mua hàng, biến sẽ trở thành false.

Ví dụ: Bạn có thể dùng định dạng sau cho đoạn mã trên trang trạng thái đơn hàng:

{% if first_time_accessed == true and post_purchase_page_accessed == false %}
<script>
   // insert your tracking script
</script>
{% endif %}

API hiện có

Bạn có thể sử dụng biến JavaScript global để cấp cho đoạn mã theo dõi quyền truy cập vào dữ liệu họ cần. Dữ liệu có thể truy cập nằm trong window.Shopify.

Theo dõi giao dịch mua hàng đã thực hiện trên trang sau khi mua hàng

Để theo dõi các giao dịch mua hàng bổ sung được thực hiện qua trang sau khi mua hàng, bạn có thể đăng ký sự kiện Shopify.on.

Sau khi bạn đăng ký, các thao tác sau sẽ diễn ra bất cứ khi nào áp dụng thành công bộ thay đổi sau khi mua hàng:

• Bộ xử lý được gọi bằng hai đối số loại Order: order và outdated order.
• Các biến global trong window.Shopify được cập nhật để các đoạn mã có thể sử dụng dữ liệu đã cập nhật.

Bộ xử lý đã đăng ký sự kiện này có thể có tối thiểu 500 ms để thực hiện. Hãy nhớ tải các quan hệ phụ thuộc bạn cần từ trước.

Thêm đoạn mã của trang sau khi mua hàng

1. Trong trang quản trị Shopify, vào mục Cài đặt > Thanh toán.
2. Trong trường Đoạn mã bổ sung sau khi mua hàng, nhập đoạn mã.
3. Nhấp vào Save (Lưu).

Ví dụ về tập lệnh

Bạn có thể sử dụng mẫu đoạn mã cơ bản sau để giúp bạn xây dựng đoạn mã trang sau khi mua hàng. Đoạn mã mẫu này sử dụng Google Analytics để theo dõi chuyển đổi ban đầu và giải thích cách theo dõi các giao dịch mua hàng bổ sung. Ví dụ này rất đơn giản và đoạn mã cuối cùng có khả năng sẽ khác.

Các tệp đoạn mã mẫu

Đoạn mã mẫu cho trang trạng thái đơn hàng:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-FYNQ742HTX"></script>
<script>
(function() {
  // make sure the initial conversion isn't tracked twice
  {% if first_time_accessed == false or post_purchase_page_accessed == true %}
    return;
  {% endif %}
  // set up google analytics
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag('js', new Date());
  gtag('config', 'G-FYNQ742HTX');
  // track initial conversion
  var order = window.Shopify.order;

  gtag('event', 'purchase', {
    affiliation: 'My Shopify Store',
    transaction_id: Number(order.id).toString(),
    value: order.totalPrice,
    currency: order.currency,
    items: order.lineItems.map((item) => ({
      id: Number(item.id).toString(),
      name: item.title,
      category: item.product.type,
      price: item.price,
      quantity: item.quantity,
      variant: Number(item.variant.sku).toString(),
    })),
  });
})();
</script>

Đoạn mã mẫu cho trang sau khi mua hàng:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-FYNQ742HTX"></script>
<script>
(function() {
  // set up google analytics
  window.dataLayer = window.dataLayer || [];

  function gtag() {
    dataLayer.push(arguments);
  }

  gtag('js', new Date());
  gtag('config', 'G-FYNQ742HTX');

  // make sure the initial conversion isn't tracked twice
  if (!Shopify.wasPostPurchasePageSeen) {
    var order = window.Shopify.order;

    // track initial conversion
    gtag('event', 'purchase', {
      affiliation: 'My Shopify Store',
      transaction_id: Number(order.id).toString(),
      value: order.totalPrice,
      currency: order.currency,
      items: order.lineItems.map(function(item) {
        return {
          id: Number(item.id).toString(),
          name: item.title,
          category: item.product.type,
          price: item.price,
          quantity: item.quantity,
          variant: Number(item.variant.sku).toString(),
        };
      }),
    });
  }

  // set up additional conversion tracking
  Shopify.on('CheckoutAmended', function(newOrder, previousOrder) {
    // identify which items were recently added, if any
    var oldItems = previousOrder.lineItems.map(function (line) { return line.id; });

    var addedItems = newOrder.lineItems.filter(
      function (line) { return oldItems.indexOf(line.id) < 0; }
    );

    // no new items were added, so we skip conversion tracking
    if (addedItems.length === 0) {
      return;
    }

    // track additional purchase
    gtag('event', 'purchase', {
      affiliation: 'My Shopify Store',
      transaction_id: Number(order.id).toString(),
      value: order.totalPrice,
      currency: order.currency,
      items: addedItems.map(function (item) {
        return {
          id: Number(item.id).toString(),
          name: item.title,
          category: item.product.type,
          price: item.price,
          quantity: item.quantity,
          variant: Number(item.variant.sku).toString(),
        };
      }),
    });
  });
})();
</script>

Tài liệu tham khảo

Bảng dưới đây chứa định nghĩa loại của các thuộc tính được cấp cho đoạn mã bổ sung sau khi mua hàng qua window.Shopify:

Trường	Định nghĩa
window.Shopify
shop	Thông tin chi tiết về cửa hàng từ nơi đặt hàng.
order	Thông tin chi tiết đơn hàng.
pageUrl	URL của trang hiện tại.
wasPostPurchasePageSeen	Khách hàng đã xem trang sau khi mua hàng trong quá trình thanh toán này hay chưa. Kết quả sẽ là false khi kết xuất lần đầu tiên hoặc true, ví dụ như nếu tải lại trang.
on(event: string, handler: function): void	Đã đăng ký event. Hiện tại chỉ hỗ trợ sự kiện CheckoutAmended.
off(event: string, handler: function): void	Hủy đăng ký handler khỏi event đã có. Hiện tại chỉ hỗ trợ sự kiện CheckoutAmended.
Shop
id	ID cửa hàng.
currency	Đơn vị tiền tệ của cửa hàng theo định dạng ISO 4217. Ví dụ: USD. Để biết thêm chi tiết, tham khảo shop.currency.
Order
id	Mã nhận dạng nội bộ của đơn hàng.
number	Biểu thị số nguyên của tên đơn hàng. Ví dụ: 1025.
checkoutToken	Mã nhận dạng nội bộ của trang thanh toán.
customer	Khách hàng liên kết với đơn hàng.
lineItem	Các mục hàng trong đơn hàng.
subtotalPrice	Giá tổng phụ của tất cả các mặt hàng trong đơn hàng sau khi áp dụng cả giảm giá mục hàng và giỏ hàng. Tổng phụ không bao gồm thuế (trừ khi thuế được tính trong giá), chi phí vận chuyển hay tiền boa.
totalPrice	Tổng giá trị đơn hàng.
currency	Mã ISO 4217 của đơn vị tiền tệ của đơn hàng.
discounts	Tổng số tiền giảm giá áp dụng cho đơn hàng.
Customer
id	ID của khách hàng.
email	Địa chỉ email của khách hàng.
acceptsMarketing	Khách hàng chấp nhận tiếp thị hay không. Sẽ là true nếu khách hàng chấp nhận tiếp thị và false nếu không.
hasAccount	Email khách hàng có liên kết với tài khoản khách hàng hay không. Sẽ là true nếu email được liệt kê trong tài khoản khách hàng và false nếu không. Để biết thêm chi tiết, tham khảo customer.has_account.
firstName	Tên khách hàng.
lastName	Họ của khách hàng.
ordersCount	Tổng số đơn hàng mà khách hàng đã đặt.
totalSpent	Tổng số tiền mà khách hàng đã chi cho tất cả các đơn hàng.
LineItem
finalLinePrice	Giá tổng hợp của tất cả các mặt hàng trong mục hàng. Giá trị này bằng line_item.final_price nhân với line_item.quantity.
finalPrice	Giá của mục hàng, bao gồm tất cả số tiền giảm giá theo mục hàng.
lineLevelTotalDiscount	Tổng số tiền của tất cả các ưu đãi giảm giá được áp dụng cho mục hàng cụ thể. Số tiền này không bao gồm ưu đãi giảm giá được thêm vào giỏ hàng.
optionsWithValues	Một loạt giá trị đã chọn từ các tùy chọn sản phẩm của mặt hàng. Để biết thêm chi tiết, tham khảo line_item.options_with_values.
originalLinePrice	Giá kết hợp của các mặt hàng trong dòng, trước khi áp dụng giảm giá. Giá trị này bằng này line_item.original_price nhân với line_item.quantity.
originalPrice	Giá ban đầu của mục hàng trước khi áp dụng giảm giá.
price	Đơn giá của mục hàng. Giá này thể hiện mọi ưu đãi giảm giá được áp dụng cho mục hàng. Chỉ dành cho các cửa hàng tại Đức hoặc Pháp.
product	Sản phẩm của mục hàng.
properties	Một loạt thông tin tùy chỉnh về mặt hàng đã được thêm vào giỏ hàng. Để biết thêm thông tin, tham khảo line_item.properties.
quantity	Số lượng mục hàng.
title	Tiêu đề của mục hàng. Để biết thêm thông tin, tham khảo line_item.title.
variant	Mẫu mã của mục hàng.
Product
id	ID sản phẩm.
type	Loại sản phẩm.
ProductVariant
id	ID của mẫu mã.
sku	SKU của mẫu mã.
CartDiscount
id	Mã nhận dạng nội bộ của ứng dụng giảm giá.
code	Mã giảm giá, nếu có.
type	Loại giảm giá. Có thể có các giá trị: automatic, discount_code, manual và script.
amount	Tổng số tiền giảm giá của đơn hàng khi áp dụng ưu đãi giảm giá.