Événements personnalisés et objectifs

Fonctionnement

Utilisez les événements pour des résultats terminés : inscription, formulaire envoyé ou checkout démarré. L’appel final à track() doit venir du navigateur après confirmation du serveur. N’enregistrez pas le premier clic : OAuth peut être annulé, la validation échouer ou le paiement être refusé.

1. Le visiteur commence l’action.
2. L’application la termine et confirme le succès au navigateur.
3. Le navigateur appelle track() une fois.
4. Vous créez un objectif portant exactement le même nom.

Helper réutilisable

export function trackRevenueUI(eventName) {
  const send = () => window.revenueUI?.track(eventName);
  if (window.revenueUI?.ready) return send();
  window.addEventListener("revenueui:ready", send, { once: true });
}

Les noms commencent par une lettre, utilisent minuscules, chiffres et _, et ne dépassent pas 32 caractères. page_view et page_engagement sont réservés. Aucune propriété personnalisée n’est acceptée ; n’incluez aucune donnée personnelle.

Intégration côté client

JavaScript, TypeScript, React, Vue, Nuxt, Angular et SvelteKit appellent le helper après une réponse réussie. Dans Next.js App Router, la Server Action renvoie un succès et un Client Component envoie l’événement. Évitez les effets au montage qui peuvent se répéter.

"use client";
export function SignupForm() {
  async function handleSubmit(formData: FormData) {
    const result = await createAccount(formData);
    if (result.success) trackRevenueUI("signup_completed");
  }
  return <form action={handleSubmit}>{/* champs */}</form>;
}

Express renvoie le résultat au navigateur. Laravel, Django et Rails peuvent stocker une valeur flash à usage unique, rediriger, puis l’envoyer depuis le navigateur avec un JSON sûr. Le code serveur seul ne porte pas automatiquement l’identité d’attribution.

Éviter les doublons

Choisissez un seul chemin de succès. Sur une route revisitable, stockez un jeton opaque et court dans sessionStorage, jamais un e-mail ou une donnée personnelle. La déduplication navigateur ne remplace pas l’idempotence serveur.

Créer et vérifier l’objectif

Dans le détail du site, ouvrez les visiteurs par objectif, choisissez Ajouter un objectif, saisissez un libellé lisible et l’événement exact, par exemple signup_completed. La casse compte et les réalisations sont comptées après création.

Testez un succès et un échec. Confirmez événement et visiteur, rechargez la page de succès pour vérifier l’absence de doublon et validez qu’une annulation n’envoie rien.