ข้ามไปยังเนื้อหา
คู่มือผู้ใช้ คู่มือวิธีการ การสนับสนุน ขอสาธิต เข้าสู่ระบบ
Pushwoosh.com

การแนะนำสินค้าบนเว็บไซต์

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

  • Widget: เพิ่มองค์ประกอบที่มีแอตทริบิวต์ data-pw-recommendations แล้ว SDK จะเติมกริดสินค้าลงในองค์ประกอบนั้น
  • Headless API: เรียก Pushwoosh.recommendations.fetch และเรนเดอร์สินค้าด้วย markup ของคุณเอง

ตัวอย่างการใช้งานจริงคือร้านค้าสาธิตของ Pushwoosh ที่ pushon.pushwoosh.com ซึ่งมีบล็อก widget ในหน้า 404 และบล็อก headless ในหน้าสินค้าและในตะกร้าสินค้า

ข้อกำหนดเบื้องต้น

Anchor link to

เปิดการแนะนำบนเว็บไซต์

Anchor link to

แต่ละแอปพลิเคชันต้องเปิดใช้งานแยกกัน เนื่องจากฟีดที่ให้บริการบล็อกเป็นแบบสาธารณะและไม่ต้องใช้ API token จนกว่าจะเปิดใช้งาน ฟีดจะตอบกลับด้วยข้อผิดพลาดและบล็อกจะว่างเปล่า

วิธีเปิดการแนะนำบนเว็บไซต์ใน Control Panel:

  1. ไปที่ Content → Product Catalog สำหรับแอปพลิเคชัน
  2. คลิก On-site recommendations
  3. เปิด Show recommendations on my website
  4. ใน Website domains ให้ป้อนโดเมนของเว็บไซต์ที่จะแสดงบล็อก บรรทัดละหนึ่งโดเมน เช่น shop.example.com
  5. คลิก Save
แผง On-site recommendations ที่เปิดสวิตช์ Show recommendations on my website มีหนึ่งโดเมนใน Website domains และปุ่ม Save

หลังจากบันทึก:

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

หากคุณไม่สามารถเข้าถึง Control Panel ได้ ให้ขอให้ฝ่ายสนับสนุนของ Pushwoosh หรือ Customer Success Manager ของคุณเปิดการแนะนำบนเว็บไซต์สำหรับแอปพลิเคชัน โดยแจ้งรหัสแอปพลิเคชันและโดเมนของเว็บไซต์ของคุณ

กลยุทธ์การแนะนำ

Anchor link to
กลยุทธ์สิ่งที่แสดงสิ่งที่ต้องมี
viewedสินค้าที่ผู้เยี่ยมชมรายนี้ดูเมื่อเร็วๆ นี้ สำหรับผู้เยี่ยมชมที่ลงชื่อเข้าใช้ สินค้าที่ดูภายใต้ user ID ของพวกเขาจะแสดงก่อนการดูสินค้าที่ส่งด้วย trackProductView
bestsellers_30dสินค้าขายดีที่สุดของแอปพลิเคชันในช่วง 30 วันที่ผ่านมา สินค้าที่หมดสต็อกจะถูกข้ามevent การสั่งซื้อที่มีรายการสินค้าในคำสั่งซื้อ
also_boughtสินค้าที่มักถูกซื้อหรือดูร่วมกับสินค้าที่กำหนด สินค้าที่หมดสต็อกจะถูกข้ามการดูสินค้าที่ส่งด้วย trackProductView, event การสั่งซื้อ หรือ event อื่นๆ ที่มี ID สินค้า ดูติดตามกิจกรรมเกี่ยวกับผลิตภัณฑ์ คำขอต้องมี ID สินค้า

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

ติดตามการดูสินค้า

Anchor link to

กลยุทธ์ viewed และ also_bought ใช้ข้อมูลการดูสินค้า ในทุกหน้าสินค้า ให้เรียก trackProductView หลังจากที่ SDK พร้อมใช้งาน:

Pushwoosh.push(() => {
  Pushwoosh.trackProductView({
    id: 'SKU-123',
    name: 'Linen shirt',
    price: 49.9,
    currency: 'USD',
    category: 'Shirts',
    url: 'https://shop.example.com/linen-shirt',
    imageUrl: 'https://shop.example.com/img/linen-shirt.jpg',
  });
});

มีเพียง id เท่านั้นที่จำเป็น ใช้ ID สินค้าเดียวกับในแคตตาล็อกสินค้าของคุณ SDK จะส่ง event PW_ProductView และข้ามการดูสินค้าเดิมซ้ำภายใน 30 วินาที ดังนั้นการโหลดหน้าซ้ำจะไม่นับเป็นการดูครั้งที่สอง

ส่ง event การสั่งซื้อ

Anchor link to

กลยุทธ์ bestsellers_30d นับเฉพาะยอดขายจาก event การสั่งซื้อ และเป็นกลยุทธ์สำรองเริ่มต้นของทุกบล็อก เมื่อผู้เยี่ยมชมทำการสั่งซื้อ ให้ส่ง PW_OrderCreated:

Pushwoosh.push((api) => {
  api.postEvent('PW_OrderCreated', {
    orderId: 'ORDER-10293',
    items: [
      { productId: 'SKU-123', quantity: 1 },
      { productId: 'SKU-456', quantity: 2 },
    ],
  });
});

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

เพิ่มบล็อก widget

Anchor link to

เพิ่มองค์ประกอบที่มีแอตทริบิวต์ data-pw-recommendations ในตำแหน่งที่ต้องการให้บล็อกปรากฏ SDK จะโหลด widget เฉพาะในหน้าที่มีองค์ประกอบดังกล่าวเท่านั้น

<div
  data-pw-recommendations
  data-pw-strategy="also_bought"
  data-pw-product-id="SKU-123"
  data-pw-fallback="bestsellers_30d"
  data-pw-limit="4"
  data-pw-title="Bought together"
  data-pw-fallback-title="Popular right now"
  data-pw-block="pdp-also-bought"
  data-pw-min-height="260"
></div>
แอตทริบิวต์คำอธิบาย
data-pw-recommendationsทำเครื่องหมายองค์ประกอบเป็นบล็อกการแนะนำ จำเป็น
data-pw-strategyviewed, bestsellers_30d หรือ also_bought ค่าเริ่มต้นคือ bestsellers_30d
data-pw-fallbackกลยุทธ์ที่จะให้บริการเมื่อกลยุทธ์หลักไม่มีสิ่งใด: viewed, bestsellers_30d, also_bought หรือ none ค่าเริ่มต้นคือ bestsellers_30d
data-pw-limitจำนวนสินค้า ตั้งแต่ 1 ถึง 12 ค่าเริ่มต้นคือ 6
data-pw-product-idสินค้าที่แสดงบนหน้าจอ จำเป็นสำหรับ also_bought
data-pw-excludeID สินค้าที่ไม่ต้องการแสดง คั่นด้วยเครื่องหมายจุลภาค เช่น สินค้าที่อยู่ในตะกร้าแล้ว สูงสุด 50 รายการ
data-pw-blockชื่อบล็อก ชื่อนี้จะถูกเพิ่มลงในลิงก์สินค้าและ event การคลิก เพื่อให้คุณแยกแยะบล็อกได้ในการวิเคราะห์
data-pw-titleชื่อบล็อก
data-pw-fallback-titleชื่อที่จะแสดงเมื่อมีการให้บริการกลยุทธ์สำรอง เช่น “Popular right now” แทน “You viewed”
data-pw-min-heightพื้นที่ที่สงวนไว้ระหว่างที่บล็อกกำลังโหลด เพื่อหลีกเลี่ยงการเลื่อนของเลย์เอาต์ ตัวเลขจะถูกอ่านเป็นพิกเซล และใช้ความยาว CSS ใดก็ได้เช่นกัน

Widget จะแสดงรูปภาพ ชื่อ และราคาของสินค้าแต่ละรายการ และลิงก์ไปยังหน้าสินค้า ลิงก์สินค้ามี utm_medium=onsite การคลิกสินค้าจะส่ง event PW_RecommendationClick พร้อมชื่อบล็อก กลยุทธ์ และตำแหน่งของสินค้า

เมื่อคุณเปลี่ยนแอตทริบิวต์ data-pw-* ใดๆ บล็อกจะโหลดใหม่ ตัวอย่างเช่น อัปเดต data-pw-product-id เมื่อสินค้าบนหน้าจอเปลี่ยนไปโดยไม่มีการโหลดหน้าใหม่

บล็อกสำหรับหน้าทั่วไป

Anchor link to
หน้ากลยุทธ์แอตทริบิวต์ที่ต้องตั้งค่า
หน้าสินค้าalso_boughtdata-pw-product-id เป็นสินค้าบนหน้าจอ, data-pw-exclude เป็น ID เดียวกัน
ตะกร้าสินค้าalso_boughtdata-pw-product-id เป็นสินค้าในตะกร้า, data-pw-exclude เป็นสินค้าทั้งหมดในตะกร้า
หน้าแคตตาล็อกหรือหน้าแรกbestsellers_30d—
หน้า 404vieweddata-pw-fallback="bestsellers_30d" และ data-pw-fallback-title เพื่อให้ผู้เยี่ยมชมครั้งแรกเห็นสินค้ายอดนิยม

สถานะของบล็อก

Anchor link to

Widget จะตั้งค่าแอตทริบิวต์ data-pw-state บนองค์ประกอบของบล็อก:

  • loading: สินค้ากำลังโหลด
  • ready: แสดงสินค้าแล้ว
  • empty: ทั้งกลยุทธ์และกลยุทธ์สำรองไม่มีสินค้า บล็อกจะว่างเปล่า
  • error: สินค้าโหลดไม่สำเร็จ บล็อกจะว่างเปล่า

ใช้สถานะเพื่อซ่อนกรอบหรือหัวข้อของคุณเองที่อยู่รอบบล็อกที่ว่างเปล่า:

.recommendations-frame:has([data-pw-state="empty"], [data-pw-state="error"]) {
  display: none;
}

กำหนดสไตล์ของ widget

Anchor link to

Widget จะเรนเดอร์ภายใน shadow DOM ดังนั้น CSS ของเว็บไซต์คุณจะไม่ส่งผลต่อเนื้อหาภายใน ให้ตั้งค่า custom property เหล่านี้บนองค์ประกอบของบล็อกแทน:

Propertyคำอธิบายค่าเริ่มต้น
--pw-reco-fontตระกูลฟอนต์สืบทอดจากหน้าเว็บ
--pw-reco-accentสีของราคาสีข้อความปัจจุบัน
--pw-reco-radiusรัศมีมุมของรูปภาพสินค้า8px
--pw-reco-columnsจำนวนคอลัมน์ของกริด บนหน้าจอที่กว้างไม่เกิน 600px กริดจะมี 2 คอลัมน์เสมอมากที่สุดเท่าที่จะพอดี
[data-pw-recommendations] {
  --pw-reco-columns: 4;
  --pw-reco-radius: 0;
  --pw-reco-accent: #337ab7;
}

สำหรับการกำหนดสไตล์ที่ละเอียดขึ้น ชื่อบล็อก กริด และการ์ดสินค้าแต่ละใบจะถูกเปิดเผยเป็น CSS parts title, grid และ card เช่น [data-pw-recommendations]::part(card)

แอปพลิเคชันแบบหน้าเดียว

Anchor link to

โดยค่าเริ่มต้น SDK จะค้นหาบล็อกเพียงครั้งเดียวเมื่อพร้อมใช้งาน หากเว็บไซต์ของคุณเรนเดอร์บล็อกในภายหลัง เช่น เมื่อมีการนำทางในแอปพลิเคชันแบบหน้าเดียว ให้ตั้งค่า recommendations.spa เป็น true ในการเรียก init:

Pushwoosh.push(['init', {
  applicationCode: 'XXXXX-XXXXX',
  // other initialization parameters...
  recommendations: {
    spa: true,
  },
}]);

แทนที่ XXXXX-XXXXX ด้วยรหัสแอปพลิเคชันของคุณ

จากนั้น SDK จะคอยตรวจสอบหน้าเว็บและโหลด widget ทันทีที่บล็อกปรากฏ

หากต้องการปิด widget แม้ว่าหน้าเว็บจะมีองค์ประกอบ data-pw-recommendations ให้ตั้งค่า recommendations.widget เป็น false โดย Headless API จะยังคงทำงานต่อไป

เรนเดอร์บล็อกด้วย markup ของคุณเอง

Anchor link to

ใช้ headless API เมื่อเลย์เอาต์ของ widget ไม่เข้ากับการออกแบบของคุณ ขอข้อมูลสินค้าด้วย Pushwoosh.recommendations.fetch และรายงานการคลิกด้วย Pushwoosh.recommendations.trackClick:

Pushwoosh.push(async () => {
  const request = {
    strategy: 'also_bought',
    productId: 'SKU-123',
    exclude: ['SKU-123'],
    fallback: 'bestsellers_30d',
    limit: 4,
    block: 'pdp-also-bought',
  };
  const { items, strategy } = await Pushwoosh.recommendations.fetch(request);


  const title = strategy === request.strategy ? 'Bought together' : 'Popular right now';
  renderBlock(title, items, (item, index) => {
    Pushwoosh.recommendations.trackClick({
      block: request.block,
      strategy,
      productId: item.id,
      position: index + 1,
    });
  });
});

fetch รับพารามิเตอร์เดียวกับแอตทริบิวต์ของ widget ได้แก่ strategy, fallback, limit, productId, exclude และ block และส่งคืน:

  • items: รายการสินค้า แต่ละรายการมี id, title, description, image_url, url, price, price_formatted, old_price_formatted (เฉพาะสินค้าที่ลดราคา), currency, category และ sku
  • strategy: กลยุทธ์ที่ถูกให้บริการจริง ซึ่งจะแตกต่างจากกลยุทธ์ที่ขอเมื่อมีการให้บริการกลยุทธ์สำรอง และจะเป็น none เมื่อคำตอบว่างเปล่า

หากคำขอล้มเหลว fetch จะส่งข้อผิดพลาดออกมา ให้ดักจับข้อผิดพลาดนั้นและซ่อนบล็อก

trackClick จะส่ง event PW_RecommendationClick ซึ่งจะถูกส่งถึงแม้ว่าการคลิกจะเปิดหน้าอื่น position คือลำดับของสินค้าในบล็อก โดยเริ่มจาก 1

ลักษณะการทำงานเมื่อไม่ได้รับความยินยอมในการสื่อสาร

Anchor link to

หากการสื่อสารกับ Pushwoosh ถูกปิดใช้งานสำหรับผู้เยี่ยมชม เช่น ด้วย communicationEnabled: false ในการเรียก init (ดูจัดการความยินยอมของผู้ใช้สำหรับการแจ้งเตือนแบบ Web Push):

  • trackProductView และ trackClick จะไม่ส่งข้อมูลใดๆ
  • บล็อกจะยังคงแสดงสินค้า แต่คำขอจะไม่ระบุตัวตนของผู้เยี่ยมชม กลยุทธ์ viewed ไม่มีประวัติให้ใช้ ดังนั้นจึงมีการให้บริการกลยุทธ์สำรองแทน

เมื่อผู้เยี่ยมชมเปิดใช้งานการสื่อสาร การดูสินค้าและการคลิกจะถูกติดตามอีกครั้ง