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.
Trên trang này
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:ordervà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
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:
- Trong trang quản trị Shopify, vào mục Cài đặt > Thanh toán.
- Trong trường Đoạn mã bổ sung sau khi mua hàng, nhập đoạn mã.
- 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. |
| Đị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á. |