การติดตามพิกเซลในหน้าหลังการซื้อ
หากร้านค้าของคุณได้ติดตั้งแอปที่เพิ่มหน้าหลังการซื้อไปยังขั้นตอนการแท็กร้านค้าของคุณ การติดตามพิกเซลแบบปรับแต่งเองใดๆ ที่คุณใช้ในร้านค้าของคุณอาจไม่จัดเก็บกิจกรรมการติดตามบางอย่าง พิกเซลการติดตามแบบปรับแต่งเองที่เพิ่มไปยังกล่อง สคริปต์เพิ่มเติมของ ร้านค้าของคุณ ติดตามกิจกรรมในหน้าแสดงสถานะเฉพาะซึ่งมาหลังหน้าหลังการซื้อในขั้นตอนการเงิน หากลูกค้าออกจากร้านค้าของคุณในหน้าหลังการซื้อ จะไม่มีการติดตามกิจกรรมในหน้าแสดงสถานะ
เพื่อให้แน่ใจว่าคุณจัดเก็บกิจกรรมคอนเวอร์ชันอย่างถูกต้อง คุณสามารถเพิ่มสคริปต์ที่ติดตามกิจกรรมบนหน้าหลังการซื้อได้ สคริปต์นี้สามารถติดตามการซื้อเพิ่มเติมจากหน้าหลังการซื้อ เช่น การแนะนำสินค้าที่ราคาสูงกว่า หลังจากที่คุณเพิ่มสคริปต์หน้าหลังการซื้อแล้ว คุณต้องปรับสคริปต์หน้าแสดงสถานะของคุณเพื่อไม่ให้กิจกรรมที่สคริปต์หน้าหลังการซื้อบันทึกแล้ว
คุณต้องเปลี่ยนวิธีที่ร้านค้าของคุณติดตามกิจกรรมเฉพาะเมื่อคุณใช้พิกเซลการติดตามแบบปรับแต่งเองเท่านั้น ตัวอย่างเช่น หากคุณตั้งค่า Google Analytics ผ่านร้านค้าออนไลน์ > การกำหนดลักษณะ และกิจกรรมจะถูกจัดเก็บอย่างถูกต้องในหน้าหลังการซื้อของคุณ
ข้อพิจารณา
สคริปต์เพิ่มเติมในหน้าหลังการซื้อจะคล้ายกับสคริปต์เพิ่มเติมในหน้าสถานะการสั่งซื้อ แต่มีความแตกต่างกันเล็กน้อย:
- สคริปต์จะถูกเพิ่มไปยังหน้าหลังการซื้อ ไม่ใช่หน้าแสดงสถานะ
- ช่องนี้อนุญาตเฉพาะ JavaScript เท่านั้น ไม่ยอมรับรหัส Liquid
- แท็ก HTML ที่อนุญาตคือ
<script>
เท่านั้น - สคริปต์จะทำงานอยู่ภายใน Sandbox และไม่ได้รวมอยู่ในหน้าแรก
- คุณสามารถเพิ่มสคริปต์หน้าหลังการซื้อได้ต่อเมื่อร้านค้าของคุณได้ติดตั้งแอปที่เพิ่มหน้าหลังการซื้อไปยังขั้นตอนการซื้อสินค้าของคุณแล้วเท่านั้น
เรียกใช้สคริปต์ภายใน Sandbox เพื่อให้แน่ใจว่าสคริปต์นั้นปลอดภัยและใช้เพื่อวัตถุประสงค์ที่ตั้งใจไว้
ฝ่ายช่วยเหลือของ Shopify ไม่สามารถให้ความช่วยเหลือในสคริปต์หน้าหลังการซื้อได้ หากคุณต้องการความช่วยเหลือ คุณสามารถโพสต์ในชุมชน Shopify หรือจ้างผู้เชี่ยวชาญของ Shopify ได้
ความเข้ากันได้กับสคริปต์ในหน้าแสดงสถานะ
หากต้องการตรวจสอบให้แน่ใจว่าพิกเซลของคุณติดตามกิจกรรมคอนเวอร์ชันทั้งหมดอย่างถูกต้อง ให้ตั้งค่าสคริปต์การติดตามทั้งในหน้าหลังการซื้อและหน้าแสดงสถานะ เพื่อหลีกเลี่ยงการนับกิจกรรมคอนเวอร์ชันสองครั้ง คุณสามารถใช้ตัวแปร Liquid post_purchase_page_accessed
ในสคริปต์ที่เรียกใช้ในหน้าสถานะการสั่งซื้อได้
หากลูกค้าไปที่หน้าหลังการซื้อ แล้วนําทางไปยังหน้าสถานะการสั่งซื้อ ตัวแปร post_purchase_page_accessed
จะแสดงค่า true
หากลูกค้าไม่มาถึงหน้าหลังการซื้อ ตัวแปรจะแสดงค่า false
ตัวอย่างเช่น คุณสามารถใช้รูปแบบต่อไปนี้ในสคริปต์ของคุณในหน้าแสดงสถานะได้:
{% if first_time_accessed == true and post_purchase_page_accessed == false %}
<script>
// insert your tracking script
</script>
{% endif %}
API ที่พร้อมใช้งาน
คุณสามารถใช้ตัวแปร JavaScript Global เพื่อให้สคริปต์การติดตามเข้าถึงข้อมูลที่พวกเขาต้องการได้ ข้อมูลที่เข้าถึงได้นั้นพร้อมใช้งานในส่วน window.Shopify
การติดตามการซื้อที่ซื้อได้ในหน้าหลังการซื้อ
คุณสามารถสมัครรับข้อมูลกิจกรรม Shopify.on
เพื่อติดตามการซื้อเพิ่มเติมที่ผ่านหน้าหลังการซื้อได้
หลังจากที่คุณสมัครรับข้อมูล การดำเนินการต่อไปนี้จะเกิดขึ้นเมื่อมีการใช้ชุดการเปลี่ยนแปลงหลังการซื้อ
- คำสั่งจัดการของคุณถูกเรียกใช้เพื่อจัดการอาร์กิวเมนต์ประเภท
คำสั่งซื้อ
:outdated order
และorder
- Global ที่อยู่ใน
window.Shopify
จะอัปเดตเพื่อให้สคริปต์สามารถใช้ข้อมูลที่อัปเดตแล้วได้
คำสั่งจัดการที่สมัครรับข้อมูลกิจกรรมนี้สามารถมีได้เพียง 500 ms ในการประมวลผล ตรวจสอบให้แน่ใจว่าคุณได้โหลดการอ้างอิงใดๆ ที่คุณต้องการไว้ล่วงหน้า
เพิ่มสคริปต์หน้าหลังการซื้อ
- จากส่วน Shopify admin ให้ไปที่การตั้งค่า > การชำระเงิน
- ในช่องสคริปต์เพิ่มเติมหลังการซื้อ ให้ป้อนสคริปต์ของคุณ
- คลิกที่ “บันทึก”
สคริปต์ตัวอย่าง
คุณสามารถใช้เทมเพลตสคริปต์พื้นฐานต่อไปนี้เพื่อช่วยในการสร้างสคริปต์หน้าหลังการซื้อของคุณเอง สคริปต์ตัวอย่างนี้ใช้ Google Analytics เพื่อติดตามคอนเวอร์ชันเริ่มต้น และอธิบายถึงวิธีติดตามการซื้อเพิ่มเติม ตัวอย่างนี้เรียบง่ายและสคริปต์ขั้นสุดท้ายของคุณอาจจะแตกต่างออกไป
ไฟล์สคริปต์ตัวอย่าง
ตัวอย่างสคริปต์ของหน้าสถานะการสั่งซื้อ
<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>
ตัวอย่างสคริปต์ของหน้าหลังการซื้อ
<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>
การอ้างอิง
ตารางต่อไปนี้ประกอบด้วยข้อนิยามของประเภทแอตทริบิวต์ที่มีสคริปต์เพิ่มเติมหลังการซื้อผ่าน window.Shopify
ช่อง | ความหมาย |
---|---|
window.Shopify | |
shop | รายละเอียดของร้านค้า ณ จุดที่มีการสั่งซื้อ |
order | รายละเอียดของคำสั่งซื้อ |
pageUrl | URL ของหน้าปัจจุบัน |
wasPostPurchasePageSeen | ไม่ว่าลูกค้าจะได้ดูหน้าหลังการซื้อในขั้นตอนการชำระเงินนี้หรือไม่ก็ตาม ระบบจะแสดงค่าเป็น false เมื่อแสดงผลครั้งแรก และจะแสดงค่าเป็น true หากไม่ใช่การแสดงผลครั้งแรก เช่น หากมีการโหลดหน้าอีกครั้ง |
on(event: string, handler: function): void | สมัครรับข้อมูล event ขณะนี้มีการรองรับเพียงกิจกรรม CheckoutAmended เท่านั้น |
off(event: string, handler: function): void | ยกเลิกการสมัครรับข้อมูล handler จาก event ที่มีให้ ขณะนี้มีการรองรับเพียงกิจกรรม CheckoutAmended เท่านั้น |
Shop | |
id | ID ของร้านค้า |
currency | สกุลเงินของร้านค้าในรูปแบบ ISO 4217 ตัวอย่างเช่น ดอลลาร์สหรัฐ หากต้องการรายละเอียดเพิ่มเติม โปรดดูที่ shop.currency |
Order | |
id | ตัวระบุภายในของคำสั่งซื้อ |
number | การแสดงจํานวนเต็มของชื่อสั่งซื้อ ตัวอย่างเช่น 1025 |
checkoutToken | ตัวระบุภายในของขั้นตอนการซื้อสินค้า |
customer | ลูกค้าที่เกี่ยวข้องกับคำสั่งซื้อ |
lineItem | สินค้าเฉพาะรายการของคำสั่งซื้อ |
subtotalPrice | ยอดรวมของสินค้าทั้งหมดในคำสั่งซื้อหลังจากมีการใช้ส่วนลดทั้งสินค้าเฉพาะรายการและส่วนลดตะกร้าสินค้าแล้ว ยอดรวมจะไม่รวมภาษี (เว้นแต่ภาษีจะรวมอยู่ในราคา) ค่าจัดส่ง หรือเงินทิป |
totalPrice | ราคารวมของคำสั่งซื้อ |
currency | รหัส ISO 4217 ของสกุลเงินในคำสั่งซื้อ |
discounts | ผลรวมของจํานวนส่วนลดที่ใช้กับคำสั่งซื้อ |
Customer | |
id | ID ของลูกค้า |
ที่อยู่อีเมลของลูกค้า | |
acceptsMarketing | ลูกค้ายอมรับการตลาดหรือไม่ ค่าที่แสดงจะเป็น true หากลูกค้ายอมรับการตลาด และจะเป็น false หากไม่ยอมรับ |
hasAccount | อีเมลลูกค้าเชื่อมโยงกับบัญชีผู้ใช้ของลูกค้าหรือไม่ ค่าที่แสดงจะเป็น true หากอีเมลปรากฏบนรายการบัญชีผู้ใช้ของลูกค้า และจะเป็น false หากไม่มีอีเมลปรากฏ หากต้องการรายละเอียดเพิ่มเติม โปรดดูที่ customer.has_account
|
firstName | ชื่อจริงของลูกค้า |
lastName | นามสกุลของลูกค้า |
ordersCount | จํานวนรวมของคำสั่งซื้อที่ลูกค้าได้สั่งซื้อ |
totalSpent | ยอดรวมทั้งหมดที่ลูกค้าใช้จ่ายสำหรับคำสั่งซื้อทั้งหมด |
LineItem | |
finalLinePrice | ราคารวมของสินค้าทั้งหมดในสินค้าเฉพาะรายการ ซึ่งเท่ากับ line_item.final_price คูณด้วย line_item.quantity
|
finalPrice | ราคาของสินค้าเฉพาะรายการรวมถึงจำนวนส่วนลดตามระดับรายการทั้งหมด |
lineLevelTotalDiscount | ยอดรวมของส่วนลดทั้งหมดที่ใช้กับสินค้าเฉพาะรายการโดยเฉพาะ โดยไม่รวมส่วนลดที่เพิ่มลงในตะกร้าสินค้า |
optionsWithValues | ค่าอาร์เรย์ของค่าที่เลือกจากตัวเลือกสินค้าของรายการ หากต้องการรายละเอียดเพิ่มเติม โปรดดูที่ line_item.options_with_values |
originalLinePrice | ราคารวมของจำนวนสินค้าที่รวมอยู่ในรายการก่อนจะมีการใช้ส่วนลด ค่านี้จะเท่ากับ line_item.original_price คูณด้วย line_item.quantity
|
originalPrice | ราคาเดิมของสินค้าเฉพาะรายการก่อนจะมีการใช้ส่วนลด |
price | ราคาต่อหน่วยของสินค้าเฉพาะรายการ ราคาจะแสดงส่วนลดใดๆ ที่ใช้กับสินค้าเฉพาะรายการ สามารถใช้งานได้เฉพาะในร้านค้าที่อยู่ในเยอรมนีหรือฝรั่งเศสเท่านั้น |
product | สินค้าในสินค้าเฉพาะรายการ |
properties | อาร์เรย์ของข้อมูลที่ปรับแต่งเองของรายการที่ถูกเพิ่มไปยังตะกร้าสินค้า หากต้องการข้อมูลเพิ่มเติม โปรดดูที่ line_item.properties |
quantity | จำนวนของสินค้าเฉพาะรายการ |
title | ชื่อของสินค้าเฉพาะรายการ หากต้องการข้อมูลเพิ่มเติม โปรดดูที่ line_item.title |
variant | ตัวเลือกสินค้าของสินค้าเฉพาะรายการ |
Product | |
id | ID สินค้า |
type | ประเภทของสินค้า |
ProductVariant | |
id | ID ของตัวเลือกสินค้า |
sku | SKU ของตัวเลือกสินค้า |
CartDiscount | |
id | ตัวระบุภายในของแอปพลิเคชันส่วนลด |
code | รหัสของส่วนลด หากมี |
type | ประเภทของส่วนลด ค่าที่เป็นไปได้คือ: automatic , discount_code , manual และ script
|
amount | ยอดรวมราคาคำสั่งซื้อที่ลดลงทั้งหมดเมื่อใช้ส่วนลด |