Theo dõi pixel trên 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 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 hậu mãi. Nếu cần trợ giúp, bạn có thể đăng bài trong Cộng đồng Shopify hoặc thuê Đối tác của 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: orderoutdated 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

Trước khi thêm đoạn mã trang hậu mãi, để trường hậu mãi hiển thị trên trang quản trị Shopify, hãy đảm bảo bạn thiết lập kênh Google và YouTube hoặc tải xuống ứng dụng hậu mãi bên thứ ba.

Bước:

  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 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, manualscript.
amount Tổng số tiền giảm giá của đơn hàng khi áp dụng ưu đãi giảm giá.

Bạn đã sẵn sàng bán hàng với Shopify?

Dùng thử miễn phí