การติดตามพิกเซลในหน้าหลังการซื้อ

หน้านี้พิมพ์ขึ้นเมื่อ May 23, 2022 หากต้องการเวอร์ชันปัจจุบัน โปรดไปที่ https://help.shopify.com/th/manual/promoting-marketing/analyze-marketing/pixel-tracking-post-purchase-page

หากร้านค้าของคุณได้ติดตั้งแอปที่เพิ่มหน้าหลังการซื้อไปยังขั้นตอนการแท็กร้านค้าของคุณ การติดตามพิกเซลแบบปรับแต่งเองใดๆ ที่คุณใช้ในร้านค้าของคุณอาจไม่จัดเก็บกิจกรรมการติดตามบางอย่าง พิกเซลการติดตามแบบปรับแต่งเองที่เพิ่มไปยังกล่อง สคริปต์เพิ่มเติมของ ร้านค้าของคุณ ติดตามกิจกรรมในหน้าแสดงสถานะเฉพาะซึ่งมาหลังหน้าหลังการซื้อในขั้นตอนการเงิน หากลูกค้าออกจากร้านค้าของคุณในหน้าหลังการซื้อ จะไม่มีการติดตามกิจกรรมในหน้าแสดงสถานะ

เพื่อให้แน่ใจว่าคุณจัดเก็บกิจกรรมคอนเวอร์ชันอย่างถูกต้อง คุณสามารถเพิ่มสคริปต์ที่ติดตามกิจกรรมบนหน้าหลังการซื้อได้ สคริปต์นี้สามารถติดตามการซื้อเพิ่มเติมจากหน้าหลังการซื้อ เช่น การแนะนำสินค้าที่ราคาสูงกว่า หลังจากที่คุณเพิ่มสคริปต์หน้าหลังการซื้อแล้ว คุณต้องปรับสคริปต์หน้าแสดงสถานะของคุณเพื่อไม่ให้กิจกรรมที่สคริปต์หน้าหลังการซื้อบันทึกแล้ว

คุณต้องเปลี่ยนวิธีที่ร้านค้าของคุณติดตามกิจกรรมเฉพาะเมื่อคุณใช้พิกเซลการติดตามแบบปรับแต่งเองเท่านั้น ตัวอย่างเช่น หากคุณตั้งค่า Google Analytics ผ่านร้านค้าออนไลน์ > การกำหนดลักษณะ และกิจกรรมจะถูกจัดเก็บอย่างถูกต้องในหน้าหลังการซื้อของคุณ

ข้อพิจารณา

สคริปต์เพิ่มเติมในหน้าหลังการซื้อจะคล้ายกับสคริปต์เพิ่มเติมในหน้าสถานะการสั่งซื้อ แต่มีความแตกต่างกันเล็กน้อย:

  • สคริปต์จะถูกเพิ่มไปยังหน้าหลังการซื้อ ไม่ใช่หน้าแสดงสถานะ
  • ช่องนี้อนุญาตเฉพาะ JavaScript เท่านั้น ไม่ยอมรับรหัส Liquid
  • แท็ก HTML ที่อนุญาตคือ <script>เท่านั้น
  • สคริปต์จะทำงานอยู่ภายใน Sandbox และไม่ได้รวมอยู่ในหน้าแรก
  • คุณสามารถเพิ่มสคริปต์หน้าหลังการซื้อได้ต่อเมื่อร้านค้าของคุณได้ติดตั้งแอปที่เพิ่มหน้าหลังการซื้อไปยังขั้นตอนการซื้อสินค้าของคุณแล้วเท่านั้น

เรียกใช้สคริปต์ภายใน Sandbox เพื่อให้แน่ใจว่าสคริปต์นั้นปลอดภัยและใช้เพื่อวัตถุประสงค์ที่ตั้งใจไว้

ฝ่ายช่วยเหลือของ Shopify ไม่สามารถให้ความช่วยเหลือในสคริปต์หน้าหลังการซื้อได้ หากคุณต้องการความช่วยเหลือ คุณสามารถโพสต์ในชุมชน Shopify หรือจ้างผู้เชี่ยวชาญของ Shopify ได้

ความเข้ากันได้กับสคริปต์ในหน้าแสดงสถานะ

หากต้องการตรวจสอบให้แน่ใจว่าพิกเซลของคุณติดตามกิจกรรมคอนเวอร์ชันทั้งหมดอย่างถูกต้อง ให้ตั้งค่าสคริปต์การติดตามทั้งในหน้าหลังการซื้อและหน้าแสดงสถานะ เพื่อหลีกเลี่ยงการนับกิจกรรมคอนเวอร์ชันสองครั้ง คุณสามารถใช้ตัวแปร Liquid post_purchase_page_accessed ในสคริปต์ที่เรียกใช้ในหน้าสถานะการสั่งซื้อได้

หากลูกค้าไปที่หน้าหลังการซื้อ แล้วนําทางไปยังหน้าสถานะการสั่งซื้อ ตัวแปร post_purchase_page_accessed จะแสดงค่า true หากลูกค้าไม่มาถึงหน้าหลังการซื้อ ตัวแปรจะแสดงค่า false

ตัวอย่างเช่น คุณสามารถใช้รูปแบบต่อไปนี้ในสคริปต์ของคุณในหน้าแสดงสถานะได้:

{% unless post_purchase_page_accessed %}
<script>
    //insert your tracking script
</script>
{% endunless %}

API ที่พร้อมใช้งาน

คุณสามารถใช้ตัวแปร JavaScript Global เพื่อให้สคริปต์การติดตามเข้าถึงข้อมูลที่พวกเขาต้องการได้ ข้อมูลที่เข้าถึงได้นั้นพร้อมใช้งานในส่วน window.Shopify

การติดตามการซื้อที่ซื้อได้ในหน้าหลังการซื้อ

คุณสามารถสมัครรับข้อมูลกิจกรรม Shopify.on เพื่อติดตามการซื้อเพิ่มเติมที่ผ่านหน้าหลังการซื้อได้

หลังจากที่คุณสมัครรับข้อมูล การดำเนินการต่อไปนี้จะเกิดขึ้นเมื่อมีการใช้ชุดการเปลี่ยนแปลงหลังการซื้อ

  • คำสั่งจัดการของคุณถูกเรียกใช้เพื่อจัดการอาร์กิวเมนต์ประเภทคำสั่งซื้อ: outdated order และ order
  • Global ที่อยู่ใน window.Shopify จะอัปเดตเพื่อให้สคริปต์สามารถใช้ข้อมูลที่อัปเดตแล้วได้

คำสั่งจัดการที่สมัครรับข้อมูลกิจกรรมนี้สามารถมีได้เพียง 500 ms ในการประมวลผล ตรวจสอบให้แน่ใจว่าคุณได้โหลดการอ้างอิงใดๆ ที่คุณต้องการไว้ล่วงหน้า

เพิ่มสคริปต์หน้าหลังการซื้อ

  1. จากส่วน Shopify admin ให้ไปที่การตั้งค่า > การชำระเงิน
  2. ในช่องสคริปต์เพิ่มเติมหลังการซื้อ ให้ป้อนสคริปต์ของคุณ
  3. คลิกที่ "บันทึก"

สคริปต์ตัวอย่าง

คุณสามารถใช้เทมเพลตสคริปต์พื้นฐานต่อไปนี้เพื่อช่วยในการสร้างสคริปต์หน้าหลังการซื้อของคุณเอง สคริปต์ตัวอย่างนี้ใช้ 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 ลูกค้าได้ดูหน้าหลังการซื้อในขั้นตอนการซื้อสินค้านี้หรือไม่ ค่าที่แสดงจะเป็น true เมื่อแสดงผลเป็นครั้งแรก มิฉะนั้นก็จะเป็น false หากมีการโหลดหน้าอีกครั้ง เป็นต้น
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 ของลูกค้า
email ที่อยู่อีเมลของลูกค้า
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 ยอดรวมราคาคำสั่งซื้อที่ลดลงทั้งหมดเมื่อใช้ส่วนลด

พร้อมเริ่มต้นการขายด้วย Shopify แล้วหรือยัง

ทดลองใช้งานฟรี