SDK React

Utilisez @convertmax/react lorsque vous voulez des bindings spécifiques à React au-dessus du SDK JavaScript de base. ConvertmaxProvider est l’export de provider canonique, et createConvertmax depuis @convertmax/js est la fonction de fabrique client canonique.

Installer les packages

Installez le package React avec le SDK de base :

npm install @convertmax/react @convertmax/js

ConvertmaxProvider initialise le client navigateur au montage, donc les comportements automatiques du navigateur démarrent sans attendre le premier appel manuel à track().

Envelopper votre application

Configurez le provider avec le point de terminaison d’événements Convertmax :

import { ConvertmaxProvider, useConvertmax } from "@convertmax/react";

function SignupButton() {
  const convertmax = useConvertmax();

  return (
    <button
      onClick={() =>
        void convertmax.track("click", {
          target: "hero_cta",
          page: "https://example.com/pricing"
        })
      }
    >
      Start free
    </button>
  );
}

export function App() {
  return (
    <ConvertmaxProvider
      options={{
        host: "https://event.convertmax.io",
        apiKey: "YOUR_API_KEY",
        autoPage: true
      }}
    >
      <SignupButton />
    </ConvertmaxProvider>
  );
}

autoPage

Lorsque autoPage: true est activé, le client navigateur émet automatiquement page_view :

• au chargement initial de la page après l’initialisation
• après history.pushState et history.replaceState
• lors de la navigation avant/arrière via popstate
• lorsque seule la chaîne de requête change

Les changements de hash seul sont ignorés par défaut.

Utilisez autoPage pour le suivi des routes navigateur. Utilisez usePageTracking() lorsque vous voulez un événement de type page-view manuel depuis un composant spécifique.

Comportements automatiques du navigateur

Le client JS publié sous-jacent peut aussi automatiquement :

• détecter les identifiants de clic publicitaire comme gclid, msclkid, ttclid, fbclid, et les identifiants de campagne associés, puis émettre un événement cpc
• classifier les référents organiques et émettre organic
• classifier les référents sociaux et émettre social
• classifier les référents de moteurs de recherche et émettre search lorsqu’un terme de recherche est disponible
• remplir les champs de formulaire cachés nommés cm_visitor et cm_session
• capturer optionnellement le cf_uvid Clickfunnels depuis le stockage du navigateur lorsque captureCfUvid: true
• détecter les navigateurs mobiles et inclure cet état dans les événements automatiques du navigateur
• respecter l’état d’opt-out local

Aides React disponibles

Le package inclut ces exports spécifiques à React :

• ConvertmaxProvider
• useConvertmax()
• usePageTracking(name?, properties?)

Si vous devez créer un client hors de React, utilisez createConvertmax() depuis @convertmax/js.

Envoyer les événements de base

Une fois le provider monté, suivez au moins un affichage de page et un événement de conversion :

import { useConvertmax } from "@convertmax/react";

function Example() {
  const convertmax = useConvertmax();

  return (
    <button
      onClick={() => void convertmax.track("page_view", {})}
    >
      Track page view
    </button>
  );
}

Vérifier l’installation

Après le chargement de votre application React :

1. confirmez que le provider s’initialise correctement
2. confirmez qu’un événement page_view est émis
3. déclenchez un événement suivi comme click, add_cart, ou convert
4. confirmez que les requêtes sont envoyées vers https://event.convertmax.io

Utilisez la Convertmax Chrome Extension pour inspecter les signaux runtime et les requêtes capturées.