Intégration React

Le point d'entrée @converlay/sdk/react fournit un composant ConverlayProvider et un hook useConverlay() pour les applications React. Nécessite React 18 ou ultérieur.

ConverlayProvider

Enveloppez votre application avec le provider pour rendre l'instance Converlay disponible dans tout votre arbre de composants.

ConverlayProvider props

<ConverlayProvider
  shopDomain="my-store.myshopify.com"  // Required
  autoPageView={true}                   // Auto page_view on mount
  debug={false}                         // Console logging
  endpoint="..."                        // Custom endpoint
  consent={{ analytics: true, marketing: true }}
>
  {children}
</ConverlayProvider>

useConverlay()

Accédez à l'instance Converlay depuis n'importe quel composant enfant.

useConverlay() hook

'use client'

import { useConverlay } from '@converlay/sdk/react'

function ProductPage({ product }) {
  const { track, identify, setConsent, flush, destroy } = useConverlay()

  useEffect(() => {
    track('view_item', {
      ecommerce: {
        items: [{
          item_id: product.id,
          item_name: product.title,
          price: product.price,
          quantity: 1,
        }],
      },
    })
  }, [product.id])

  return <div>{/* ... */}</div>
}

Le hook retourne l'intégralité de l'objet ConverlayInstance :

track(eventName, properties?)
identify(data)
setConsent(consent)
flush()
destroy()

Configuration par framework

Next.js App Router

Composant client requis

Le provider doit être dans un composant client ('use client'). Créez un composant Providers séparé et importez-le dans votre layout racine.

Next.js App Router

// app/providers.tsx
'use client'

import { ConverlayProvider } from '@converlay/sdk/react'

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ConverlayProvider
      shopDomain="my-store.myshopify.com"
      autoPageView={true}
    >
      {children}
    </ConverlayProvider>
  )
}

// app/layout.tsx
import { Providers } from './providers'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

Next.js Pages Router

// pages/_app.tsx
import { ConverlayProvider } from '@converlay/sdk/react'

export default function App({ Component, pageProps }) {
  return (
    <ConverlayProvider
      shopDomain="my-store.myshopify.com"
      autoPageView={true}
    >
      <Component {...pageProps} />
    </ConverlayProvider>
  )
}

Shopify Hydrogen

Hydrogen (Remix)

// app/root.tsx
import { ConverlayProvider } from '@converlay/sdk/react'

export default function App() {
  return (
    <ConverlayProvider
      shopDomain="my-store.myshopify.com"
      autoPageView={true}
    >
      <Outlet />
    </ConverlayProvider>
  )
}

Suivi des changements de route

Si autoPageView est true, le SDK déclenche un page_view une seule fois au montage. Pour les navigations côté client (SPA), ajoutez un traqueur de route :

Route tracker

'use client'

import { usePathname } from 'next/navigation'
import { useConverlay } from '@converlay/sdk/react'
import { useEffect } from 'react'

export function RouteTracker() {
  const pathname = usePathname()
  const { track } = useConverlay()

  useEffect(() => {
    track('page_view')
  }, [pathname])

  return null
}

Précédent← Consentement et confidentialité SuivantRéférence API →