การทดสอบพิกเซลที่กำหนดเอง

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

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

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

คุณสามารถใช้ Shopify Pixel Helper ในเซสชันเบราว์เซอร์เดียวกับเครื่องมือช่วยเหลือพิกเซลของภายนอกเพื่อทดสอบเหตุการณ์สำหรับทั้งสองแพลตฟอร์มในเวลาเดียวกันได้

นี่คือสคริปต์พิกเซลที่กำหนดเองซึ่งจะเริ่มเหตุการณ์มาตรฐานทั้งหมดไปยังแซนด์บ็อกซ์และบันทึกข้อมูลเหตุการณ์ไปยังคอนโซล เหตุการณ์มาตรฐานจะปรากฏใน Shopify Pixel Helper นอกจากนี้ คุณยังสามารถสมัครใช้งานการสมัครใช้งานจำนวนมากรายการอื่นๆ ได้ เช่น all_events, all_custom_events และ all_dom_events เพื่อดูทุกอย่างที่เว็บพิกเซลสามารถให้ได้ ไปที่ web pixels API เพื่อดูข้อมูลเพิ่มเติม

analytics.subscribe("all_standard_events", event => {
   console.log("Event data ", event?.data);
});

ตรวจสอบให้แน่ใจว่าพิกเซลที่กำหนดเองเชื่อมต่ออยู่

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

ขั้นตอน

1. จากส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่การตั้งค่า > เหตุการณ์ของลูกค้า

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

3. หากพิกเซลไม่ได้เชื่อมต่ออยู่ ให้คลิก ... จากนั้นคลิกเชื่อมต่อ

ทดสอบพิกเซลที่กำหนดเองโดยใช้ Shopify Pixel Helper

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

ขั้นตอน

1. จากส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่การตั้งค่า > เหตุการณ์ของลูกค้า

2. คลิกพิกเซลที่กำหนดเองที่คุณต้องการทดสอบ

3. คลิกทดสอบเพื่อเปิดพิกเซลที่กำหนดเองบนเว็บไซต์ของคุณเพื่อทำการทดสอบ

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

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

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

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

6. หากต้องการดูข้อมูลเหตุการณ์ที่ได้รับ ให้คลิกที่ เพื่อขยายกล่องโต้ตอบเครื่องมือช่วยเหลือพิกเซล

การดูส่วนเหตุการณ์ที่ได้รับ

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

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

analytics.subscribe("all_standard_events", event => {
  console.log("Event data ", event?.data);
  throw new Error("callback error");
});

throw new Error("top level error")

หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับการแก้ไขข้อผิดพลาด JavaScript โปรดไปที่การแก้ไขปัญหา JavaScript

การแก้ไขปัญหาพิกเซลที่กำหนดเองของคุณ

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

ตรวจสอบการตั้งค่าความเป็นส่วนตัวของลูกค้าของคุณ

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

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

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

หากคุณใช้เครื่องมือภายนอกเพื่อจัดการความยินยอม โปรดติดต่อผู้ให้บริการภายนอกของคุณเพื่อขอความช่วยเหลือ

การแก้ไขปัญหาเพิ่มเติม

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

• ล้างคุกกี้ในเบราว์เซอร์ของคุณ
• หากคุณกำลังทดสอบเหตุการณ์มาตรฐาน ให้ตรวจสอบเอกสารสำหรับนักพัฒนาเกี่ยวกับคำอธิบายเหตุการณ์มาตรฐานของ Shopify เพื่อให้แน่ใจว่าคุณกำลังดำเนินการตามขั้นตอนที่กำหนดเพื่อทริกเกอร์เหตุการณ์

การทดสอบตัวช่วยพิกเซลภายนอก

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

• ทดสอบว่า SDK ภายนอกของพิกเซลโหลดแล้วหรือไม่
• ทดสอบว่า SDK ภายนอกของพิกเซลเริ่มต้นการทำงานและรับเหตุการณ์แล้วหรือไม่

ทดสอบว่า SDK ภายนอกของพิกเซลโหลดแล้วหรือไม่

ขั้นตอนการตรวจสอบแท็บเครือข่ายจะแตกต่างกันไปตามเว็บเบราว์เซอร์ที่คุณใช้ ตัวอย่างเช่น หากต้องการดูวิธีตรวจสอบแท็บเครือข่ายใน Google Chrome โปรดดูเอกสาร ตรวจสอบกิจกรรมบนเครือข่าย ของ Chrome for Developers

ในการทดสอบว่า SDK ภายนอกของพิกเซลโหลดแล้วหรือไม่ คุณจะต้องกู้คืนโค้ดสำหรับ URL ของ SDK จากผู้ให้บริการภายนอกของคุณก่อน เพื่อนำไปเพิ่มลงในโค้ดพิกเซลของคุณ หากต้องการความช่วยเหลือ โปรดติดต่อผู้ให้บริการพิกเซลภายนอกของคุณ

ขั้นตอน

1. จากส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่การตั้งค่า > เหตุการณ์ของลูกค้า

2. คลิกพิกเซลที่กำหนดเองที่คุณต้องการทดสอบ

3. ในส่วนโค้ด ให้ป้อน SDK ของพิกเซลที่ผู้ให้บริการภายนอกของคุณให้มาต่อท้ายโค้ดพิกเซลของคุณ

4. คลิกบันทึก

5. ไปที่ร้านค้าออนไลน์ของคุณ จากนั้นตรวจสอบแท็บเครือข่ายเพื่อให้แน่ใจว่า URL ของ SDK จากผู้ให้บริการภายนอกกำลังถูกดาวน์โหลด

6. ตัวเลือกเสริม: หาก SDK ภายนอกของพิกเซลไม่โหลด ให้ตรวจสอบหาข้อผิดพลาดรันไทม์ JavaScript ในแซนด์บ็อกซ์ ตัวอย่างเช่น ใน Chrome คุณสามารถเลือก iFrame ที่ต้องการเพื่อตรวจสอบรายการบันทึกของคอนโซล จากนั้นจำกัดรายการบันทึกให้แสดงเฉพาะพิกเซลที่คุณกำลังทดสอบ หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับการตรวจสอบข้อผิดพลาดรันไทม์ JavaScript ใน Chrome โปรดดูเอกสาร การดีบัก JavaScript ของ Chrome

หาก SDK ภายนอกของพิกเซลไม่โหลดในระหว่างการทดสอบ โปรดติดต่อผู้ให้บริการพิกเซลภายนอกของคุณเพื่อขอความช่วยเหลือ

การทดสอบ SDK ภายนอกของพิกเซลอื่นๆ

หากต้องการทดสอบว่า SDK ภายนอกของพิกเซลเริ่มต้นการทำงานหรือกำลังเก็บเหตุการณ์หรือไม่ โปรดดูเอกสารของผู้ให้บริการพิกเซลภายนอกของคุณ

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