> ## Documentation Index > Fetch the complete documentation index at: https://docs.taap.it/llms.txt > Use this file to discover all available pages before exploring further. # Intégration côté client > Suivre les conversions depuis votre frontend avec le package NPM ou la balise script import { Steps, Step } from "fumadocs-ui/components/steps"; Suivez les leads et ventes directement depuis le navigateur. Cette méthode est simple à implémenter mais peut être bloquée par les bloqueurs de publicités. Le suivi côté client peut être **bloqué par les bloqueurs de publicités**. Pour une fiabilité maximale, nous recommandons fortement l'[Intégration côté serveur](/fr/conversions/manual/server-side). ## Prérequis **Important** : Pour que le suivi des conversions fonctionne, les utilisateurs doivent arriver sur votre site via un **deeplink Taapit**. C'est ainsi que l'ID de suivi (`ta_tid`) est généré et transmis à votre site. Avant de commencer : 1. **Créez un deeplink Taapit** pointant vers votre site ou landing page 2. **Activez le suivi des conversions** sur votre lien : * Allez dans les paramètres de votre lien dans le dashboard Taapit * Activez **Suivi des conversions** Ensuite, configurez votre workspace Taapit : 1. Dans votre dashboard Taapit, allez dans [Paramètres → Conversion](https://taap.it/dashboard/settings/conversion) 2. Dans le dropdown, sélectionnez **Intégration manuelle côté client** 1. Dans la section **Allowed Hostnames**, ajoutez les domaines de votre site (ex: `example.com`, `www.example.com`) 2. Cliquez sur **Enregistrer** Le SDK ne fonctionnera que sur les domaines listés dans vos hostnames autorisés. N'oubliez pas d'ajouter les versions `www` et non-`www` si nécessaire. 1. Copiez votre **Publishable Key** (commence par `taapit_pk_`) 2. Vous utiliserez cette clé dans les étapes suivantes Si vous n'avez pas encore de clé publique, cliquez sur **Generate Key** pour en créer une. ## Installation Choisissez votre méthode préférée : ```bash theme={null} npm install taapit-sdk ``` Ajoutez le composant `Analytics` à votre layout racine pour capturer automatiquement le `ta_tid` : ```tsx app/layout.tsx theme={null} import { Analytics } from 'taapit-sdk/react'; export default function RootLayout({ children }) { return ( {children} ); } ``` Obtenez votre clé publique depuis le [Dashboard Taapit](https://taap.it/dashboard/settings/analytics). Ajoutez ce script dans votre `` HTML ou avant `` : ```html theme={null} ``` Le script automatiquement : * Capture le `ta_tid` depuis l'URL quand les utilisateurs arrivent * Le stocke dans un cookie pendant 365 jours * Expose l'objet global `taapit` **Méthodes alternatives :** ```html theme={null} ``` ## Suivre un Lead Un **lead** est un client potentiel qui montre de l'intérêt (inscription, soumission de formulaire, démarrage d'essai). **`trackingId` pour les leads** : Le `trackingId` est **toujours requis** pour les événements lead. Il est automatiquement détecté depuis le cookie `ta_tid` défini quand l'utilisateur a cliqué sur un lien Taapit. ```tsx components/signup-form.tsx theme={null} 'use client'; import { useTaapitAnalytics } from 'taapit-sdk/react'; export function SignUpForm() { const { trackLead, isReady, trackingId } = useTaapitAnalytics(); const handleSubmit = async (formData: FormData) => { const email = formData.get('email') as string; const name = formData.get('name') as string; // Créer l'utilisateur dans votre système const user = await createUser({ email, name }); // Suivre le lead avec Taapit trackLead({ customer: { externalId: user.id, // Requis: votre ID utilisateur email: user.email, firstname: user.firstName, lastname: user.lastName, }, metadata: { source: 'signup-form', plan: 'free-trial', }, }); }; return ( ); } ``` ### Import direct (alternative) ```tsx theme={null} import { taapit } from 'taapit-sdk/react'; export function SignUpButton() { const handleClick = async () => { const user = await signUp(); taapit.trackLead({ customer: { externalId: user.id, email: user.email }, }); }; return ; } ``` ```html theme={null} ``` ## Suivre une Vente Une **vente** est une transaction complétée (achat, abonnement, paiement). **`trackingId` pour les ventes** : Si le customer a déjà été tracké via un **événement lead**, le `trackingId` est optionnel. Vous n'avez besoin que du `customerExternalId` pour lier la vente au customer existant. Si c'est un **nouveau customer** (pas de lead préalable), l'utilisateur doit avoir un cookie `ta_tid` valide (défini en cliquant sur un lien Taapit). ```tsx components/checkout.tsx theme={null} 'use client'; import { useTaapitAnalytics } from 'taapit-sdk/react'; export function CheckoutButton({ cart, user }) { const { trackSale } = useTaapitAnalytics(); const handlePurchase = async () => { // Traiter le paiement const order = await processPayment(cart); // Suivre la vente avec Taapit trackSale({ customer: { externalId: user.id, email: user.email, }, amount: cart.total, // ex: 49.99 (PAS en centimes) currency: 'eur', // Code ISO 4217 metadata: { orderId: order.id, items: cart.items.length, }, }); router.push(`/order/${order.id}`); }; return ( ); } ``` ```html theme={null} ``` Le `amount` doit être en **unités de devise**, pas en centimes. * ✅ `amount: 29.99` pour 29,99€ * ❌ `amount: 2999` (cela serait interprété comme 2999€) ## Méthodes disponibles ```javascript theme={null} // Obtenir l'ID de suivi actuel const trackingId = taapit.getTrackingId(); // Suivre un lead (trackingId est TOUJOURS requis - auto-détecté depuis le cookie) taapit.trackLead({ customer: { externalId: 'user_123', // Requis email: 'john@example.com', firstname: 'John', lastname: 'Doe', phoneNumber: '+33612345678', avatarUrl: 'https://example.com/avatar.jpg', }, metadata: { ... }, // Données personnalisées optionnelles }); // Suivre une vente // trackingId est optionnel si le customer a déjà été tracké via un événement lead taapit.trackSale({ customer: { externalId: 'user_123' }, // Requis - lie au customer existant amount: 99.99, // Requis currency: 'eur', // Requis (ISO 4217) metadata: { ... }, }); ``` ## Bonnes pratiques ### 1. Toujours suivre après confirmation ```typescript theme={null} // ✅ Bien - Suivre après que l'action est confirmée const user = await createUser(data); taapit.trackLead({ customer: { externalId: user.id } }); // ❌ Mal - Suivre avant confirmation taapit.trackLead({ customer: { externalId: 'pending' } }); const user = await createUser(data); // Pourrait échouer ! ``` ### 2. Gérer l'absence d'ID de suivi ```typescript theme={null} const trackingId = taapit.getTrackingId(); if (trackingId) { taapit.trackLead({...}); } // Continuez votre flux même sans tracking ``` ### 3. Utiliser des external IDs stables ```typescript theme={null} // ✅ Bien - Utiliser votre ID de base de données customer: { externalId: user.id } // ❌ Mal - N'utilisez pas de valeurs transitoires customer: { externalId: session.id } ``` ## Limitations * Les **bloqueurs de publicités** peuvent bloquer les requêtes de tracking * Les **restrictions du navigateur** peuvent empêcher la définition des cookies * La **fermeture de page** avant la fin du tracking perd l'événement Pour les conversions critiques comme les ventes, considérez l'[Intégration côté serveur](/fr/conversions/manual/server-side). ## Prochaines étapes Un suivi plus fiable depuis votre backend (recommandé). Documentation complète de l'API.