Shoply AI
เดโม
กรณีศึกษา
ราคา
บล็อก
คำถามที่พบบ่อย
วิดีโอ
พาร์ทเนอร์ชิพ
เกี่ยวกับเรา
เดโม
กรณีศึกษา
ราคา
ติดตั้งบน Shopify
ติดตั้งบนเว็บไซต์ของคุณ
บล็อก
คำถามที่พบบ่อย
วิดีโอ
พาร์ทเนอร์ชิพ
เกี่ยวกับเรา
ภาษา

วิธีส่งเหตุการณ์ของผู้ซื้อไปยัง Shoply AI จากร้านค้า Shopify แบบ Headless

Shoply AI ติดตามพฤติกรรมของผู้ซื้อ (เพิ่มลงตะกร้า ชำระเงิน การดูสินค้า และอื่น ๆ) เพื่อปรับปรุงการจัดอันดับผลการค้นหาและคำแนะนำ บนหน้าร้าน Shopify มาตรฐาน การทำงานนี้เกิดขึ้นโดยอัตโนมัติผ่านส่วนขยาย Web Pixel  ของเรา อย่างไรก็ตาม Shopify Web Pixels จะไม่ทำงานบนหน้าร้านแบบ headless เนื่องจากต้องอาศัยเอนจินการแสดงผลหน้าร้านของ Shopify เพื่อแทรก pixel sandbox

หากคุณใช้ร้านค้า Shopify แบบ headless (เช่น ใช้ Next.js, Hydrogen หรือฟรอนต์เอนด์แบบกำหนดเอง) คุณต้องส่งเหตุการณ์เหล่านี้โดยตรงจากโค้ดฟรอนต์เอนด์ของคุณ

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

  • คุณได้ติดตั้ง Shoply AI และโหลดสคริปต์ Shoply AI บนหน้าร้านของคุณแล้ว

การส่งเหตุการณ์

เมื่อโหลดสคริปต์ Shoply AI แล้ว สคริปต์จะเปิดใช้ window.shoplyLogEvent โดยอัตโนมัติ ให้เรียกใช้โดยตรง — ไม่จำเป็นต้องจัดการรหัสเซสชัน คีย์ร้านค้า หรือปลายทาง API ด้วยตนเอง:

js
window.shoplyLogEvent(eventName, data)

โครงสร้างออบเจ็กต์ data จะขึ้นอยู่กับประเภทเหตุการณ์ (ดูด้านล่าง)

เหตุการณ์ที่ต้องมีเพื่อรองรับการติดตามคอนเวอร์ชัน

product_added_to_cart

เรียกใช้เมื่อผู้ซื้อเพิ่มสินค้ารูปแบบหนึ่งลงในตะกร้า

js
await window.shoplyLogEvent('product_added_to_cart', {
  "cartLine": {
    "cost": {
      "totalAmount": {
        "amount": 769,
        "currencyCode": "USD"
      }
    },
    "merchandise": {
      "id": "42553607094387",  // Variant ID
      "title": "25.5 Mondo",
      "price": {
        "amount": 769,
        "currencyCode": "USD"
      },
      "product": {
        "id": "7834124058739"  // Product ID
      }
    },
    "quantity": 1
  },
  "clientId": "35214700-144e-4022-974e-fe008736e973",  // Not used
  "referrer": "https://demo.shoplyai.ai/collections/all"
})

checkout_completed

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

js
await window.shoplyLogEvent('checkout_completed', {
  "token": "8cea7db9ce551f0a8c9113a0f7f2dce0",  // Not used
  "order": {
    "id": "7251060916339",  // Shopify Order ID
    "customer": {
      "id": "9903183265907",  // Shopify Customer ID
      "isFirstOrder": true
    }
  },
  "lineItems": [
    {
      "finalLinePrice": {
        "amount": 1538,
        "currencyCode": "USD"
      },
      "quantity": 2,
      "variant": {
        "id": "42553607094387",  // Variant ID
        "title": "25.5 Mondo",
        "price": {
          "amount": 769,
          "currencyCode": "USD"
        },
        "product": {
          "id": "7834124058739"  // Product ID
        }
      }
    },
    {
      "finalLinePrice": {
        "amount": 384.93,
        "currencyCode": "USD"
      },
      "quantity": 1,
      "variant": {
        "id": "42553643958387",
        "title": "157 CM",
        "price": {
          "amount": 384.93,
          "currencyCode": "USD"
        },
        "product": {
          "id": "7834140180595"
        }
      }
    }
  ],
  "clientId": "35214700-144e-4022-974e-fe008736e973",  // Not used
  "referrer": "https://demo.shoplyai.ai/cart"
})

ต้องการความช่วยเหลือ?

โปรด จองการประชุมกับเรา  ได้เสมอ แล้วเราจะช่วยคุณผสานรวมการติดตามเหตุการณ์เข้ากับหน้าร้านแบบ headless ของคุณ