Cara Mengirim Event Pembeli ke Shoply AI dari Toko Shopify Headless

Shoply AI melacak perilaku pembeli (menambahkan ke keranjang, checkout, melihat produk, dan lain-lain) untuk meningkatkan peringkat pencarian dan rekomendasi. Pada storefront Shopify standar, hal ini terjadi secara otomatis melalui ekstensi Web Pixel kami. Namun, Shopify Web Pixels tidak berjalan pada storefront headless karena bergantung pada mesin rendering storefront Shopify untuk menyisipkan sandbox pixel.

Jika Anda menjalankan toko Shopify headless (misalnya dengan Next.js, Hydrogen, atau frontend khusus), Anda perlu mengirimkan event ini langsung dari kode frontend Anda.

Prasyarat

Anda telah menginstal Shoply AI dan skrip Shoply AI telah dimuat di storefront Anda.

Mengirim Event

Setelah skrip Shoply AI dimuat, skrip tersebut otomatis menyediakan window.shoplyLogEvent. Panggil secara langsung—Anda tidak perlu mengelola ID sesi, kunci toko, atau endpoint API sendiri:


window.shoplyLogEvent(eventName, data)

Bentuk objek data bergantung pada jenis event (lihat di bawah).

Event yang Wajib Ada untuk Mendukung Pelacakan Konversi

`product_added_to_cart`

Jalankan event ini saat pembeli menambahkan varian produk ke keranjang mereka.


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`

Jika Anda menggunakan checkout native Shopify, biasanya Anda tidak memerlukan event ini karena kami menggunakan event web pixel untuk melacak penyelesaian checkout secara otomatis. Namun, jika Anda memiliki alur checkout sendiri, jalankan event ini saat pembeli menyelesaikan checkout (misalnya di halaman konfirmasi pesanan Anda).


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"
})

Butuh Bantuan?

Silakan jadwalkan pertemuan dengan kami , dan kami akan membantu Anda mengintegrasikan pelacakan event ke storefront headless Anda.