ConverlayConverlay

Démarrage rapide

Mettez le suivi en service en moins de 2 minutes. Choisissez votre approche ci-dessous.

JavaScript Vanilla

Importez et initialisez createConverlay, puis appelez track() pour chaque événement.

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

Enveloppez votre application avec ConverlayProvider et utilisez le hook useConverlay() dans n'importe quel composant.

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

Que se passe-t-il ensuite

  1. Le SDK génère un client_id persistant et gère des sessions de 30 minutes via localStorage
  2. Les paramètres UTM et les Click ID (gclid, fbclid, ttclid) sont capturés automatiquement
  3. Les événements sont envoyés au point de collecte Converlay via sendBeacon (avec fetch en secours)
  4. Converlay transfère les événements de serveur à serveur vers vos destinations connectées (GA4, Meta, TikTok, etc.)

Étapes suivantes