빠른 시작
2분 이내에 트래킹을 시작할 수 있습니다. 아래에서 방식을 선택하세요.
Vanilla JavaScript
createConverlay를 임포트하고 초기화한 다음, 각 이벤트마다 track()을 호출합니다.
tracking.ts
import { createConverlay } from '@converlay/sdk'
const converlay = createConverlay({
shopDomain: 'my-store.myshopify.com',
autoPageView: true,
debug: true,
})
// Track a product view
converlay.track('view_item', {
ecommerce: {
items: [{
item_id: 'SKU-001',
item_name: 'Classic Tee',
price: 29.99,
quantity: 1,
}],
},
})
// Track a purchase
converlay.track('purchase', {
ecommerce: {
transaction_id: 'ORD-5678',
value: 59.98,
currency: 'USD',
items: [
{ item_id: 'SKU-001', item_name: 'Classic Tee', price: 29.99, quantity: 2 },
],
},
userData: {
email: 'customer@example.com',
},
})React
앱을 ConverlayProvider로 감싸고 원하는 컴포넌트에서 useConverlay() 훅을 사용합니다.
App.tsx
'use client'
import { ConverlayProvider, useConverlay } from '@converlay/sdk/react'
// Wrap your app
export default function App({ children }) {
return (
<ConverlayProvider
shopDomain="my-store.myshopify.com"
autoPageView={true}
>
{children}
</ConverlayProvider>
)
}
// Use in any component
function AddToCartButton({ product }) {
const { track } = useConverlay()
return (
<button onClick={() => {
track('add_to_cart', {
ecommerce: {
items: [{
item_id: product.id,
item_name: product.title,
price: product.price,
quantity: 1,
}],
},
})
}}>
Add to Cart
</button>
)
}이후 진행 과정
- SDK가 영구적인
client_id를 생성하고 localStorage를 통해 30분 세션을 관리합니다 - UTM 파라미터와 클릭 ID(
gclid,fbclid,ttclid)가 자동으로 수집됩니다 - 이벤트는
sendBeacon(fetch폴백 지원)을 통해 Converlay 수집 엔드포인트로 전송됩니다 - Converlay가 연결된 연동 대상(GA4, Meta, TikTok 등)으로 이벤트를 서버 간 방식으로 전달합니다