ConverlayConverlay

빠른 시작

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

이후 진행 과정

  1. SDK가 영구적인 client_id를 생성하고 localStorage를 통해 30분 세션을 관리합니다
  2. UTM 파라미터와 클릭 ID(gclid, fbclid, ttclid)가 자동으로 수집됩니다
  3. 이벤트는 sendBeacon(fetch 폴백 지원)을 통해 Converlay 수집 엔드포인트로 전송됩니다
  4. Converlay가 연결된 연동 대상(GA4, Meta, TikTok 등)으로 이벤트를 서버 간 방식으로 전달합니다

다음 단계