Aller au contenu principal

Démarrage rapide

Passez de zéro à une configuration d'affiliation fonctionnelle en moins de 30 minutes. Ce guide vous explique comment ajouter le snippet de suivi Selgeo à votre site web, le connecter à Stripe, et vérifier votre première conversion de test.

Version API : v1

Prérequis​

  • Un compte marchand Selgeo
  • Accès au HTML de votre site web (ou à un gestionnaire de balises)
  • Un compte Stripe connecté à Selgeo (pour le suivi des conversions basé sur Stripe)

Étape 1 : Obtenir vos clés API​

Connectez-vous au tableau de bord marchand Selgeo et naviguez vers Paramètres > Clés API. Vous verrez deux paires de clés :

Type de cléFormatUtilité
Clé publique (test)pk_test_*Snippet JS sur votre site (mode test)
Clé publique (live)pk_live_*Snippet JS sur votre site (mode live)
Clé secrète (test)sk_test_*Appels API côté serveur (mode test)
Clé secrète (live)sk_live_*Appels API côté serveur (mode live)

Les clés publiques (pk_*) peuvent être intégrées en toute sécurité dans le code frontend. Elles ne peuvent qu'enregistrer des clics.

Les clés secrètes (sk_*) ne doivent jamais être exposées au navigateur. Utilisez-les uniquement sur votre serveur.

Commencez avec les clés de test

Utilisez pk_test_* et sk_test_* lors de l'intégration. Le mode test suit tout de la même manière mais ne crée pas de vraies commissions. Passez aux clés live lorsque vous êtes prêt à aller en production.

Étape 2 : Ajouter le snippet de suivi​

Ajoutez la balise <script> suivante à chaque page de votre site web, juste avant la balise </body> fermante :

<script
  async
  src="https://cdn.selgeo.com/v1/selgeo.js"
  data-merchant="pk_test_YOUR_KEY"
></script>

Remplacez pk_test_YOUR_KEY par votre clé publique réelle de l'étape 1.

Pour votre framework, consultez le guide dédié​

La balise <script> ci-dessus fonctionne sur n'importe quelle page HTML. Si vous développez sur une stack frontend moderne, l'intégration équivalente se trouve dans l'un des guides suivants :

  • HTML / script simple — sites statiques, gestionnaires de balises, pages personnalisées rendues côté serveur.
  • Next.js — next/script pour App Router et Pages Router.
  • React (Vite) — placement dans index.html, avec un repli useEffect.
  • WordPress — Éditeur du site, footer.php ou un plugin d'en-tête et pied de page.

Ce que fait le snippet :

  1. Lorsqu'un visiteur arrive via un lien de parrainage partenaire (ex. https://votre-site.com/?ref=abc123), le snippet enregistre le clic auprès de Selgeo et stocke un click_id dans le sessionStorage du navigateur.
  2. Si vous utilisez des Liens de paiement Stripe, le snippet ajoute automatiquement le click_id à ces liens comme client_reference_id — aucun travail backend requis.
  3. Le snippet est sans cookie. Il utilise uniquement sessionStorage, qui est effacé lorsque l'onglet du navigateur est fermé. Aucune bannière de consentement aux cookies n'est requise.

Étape 3 : Vérifier votre installation​

  1. Créez un lien de suivi dans le tableau de bord Selgeo sous Programmes > Liens de suivi.
  2. Ouvrez un nouvel onglet de navigateur et visitez votre site en utilisant le lien de suivi, par ex. : 
    https://votre-site.com/?ref=VOTRE_REF_SUIVI
  3. Ouvrez les Outils de développement de votre navigateur (F12) et vérifiez l'onglet Console. Si vous avez ajouté data-debug à votre balise script, vous verrez des messages de log du snippet : 
    [selgeo] ref detected VOTRE_REF_SUIVI
    [selgeo] click_id stored xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
  4. Pour activer temporairement le mode débogage, ajoutez l'attribut data-debug : 
    <script
      async
      src="https://cdn.selgeo.com/v1/selgeo.js"
      data-merchant="pk_test_YOUR_KEY"
      data-debug
    ></script>
  5. Vérifiez que le click_id est stocké en exécutant ceci dans la console du navigateur : 
    __selgeo.getClickId()
    Cela doit retourner une chaîne UUID. Si ça retourne null, le snippet n'a pas détecté de paramètre ?ref= dans l'URL.
  6. Vérifiez le tableau de bord Selgeo — le clic devrait apparaître dans Analytics en quelques secondes.
Supprimer data-debug avant de passer en production

L'attribut data-debug est uniquement pour le développement. Supprimez-le en production pour garder la console du navigateur propre.

Étape 4 : Suivre les conversions via Stripe​

Selgeo prend en charge trois chemins d'intégration Stripe. Choisissez celui qui correspond à votre configuration :

Si vous utilisez les Liens de paiement Stripe (URLs buy.stripe.com), le snippet gère tout automatiquement.

Fonctionnement : Le snippet détecte toutes les balises <a> pointant vers https://buy.stripe.com/... et ajoute ?client_reference_id=CLICK_ID. Lorsque le client effectue son paiement, Stripe inclut le client_reference_id dans la payload du webhook, et Selgeo l'associe au partenaire qui a référencé le clic.

Aucun code backend requis. Assurez-vous simplement que le snippet est chargé sur la page où le Lien de paiement apparaît.

<!-- Votre Lien de paiement existant — le snippet le réécrit automatiquement -->
<a href="https://buy.stripe.com/test_abc123">S'abonner maintenant</a>

Après l'exécution du snippet, le lien devient :

https://buy.stripe.com/test_abc123?client_reference_id=CLICK_ID

Pour un guide détaillé, voir le guide des Liens de paiement Stripe.

Option B : Stripe Checkout (une ligne de code frontend)​

Si vous créez des Sessions de paiement Stripe sur votre serveur, vous devez passer le click_id du navigateur à votre backend.

Frontend — lire l'ID de clic depuis le snippet :

const clickId = __selgeo.getClickId();

// L'envoyer à votre backend quand l'utilisateur initie le paiement
fetch('/api/create-checkout', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    priceId: 'price_xxx',
    clickId: clickId, // peut être null si pas de parrainage
  }),
});

Backend — le passer comme client_reference_id lors de la création de la Session de paiement :

const stripe = require('stripe')('sk_test_YOUR_STRIPE_KEY');

app.post('/api/create-checkout', async (req, res) => {
  const session = await stripe.checkout.sessions.create({
    mode: 'subscription',
    line_items: [{ price: req.body.priceId, quantity: 1 }],
    success_url: 'https://votre-site.com/success',
    cancel_url: 'https://votre-site.com/cancel',
    client_reference_id: req.body.clickId || undefined,
  });
  res.json({ url: session.url });
});

Selgeo lit automatiquement client_reference_id depuis le webhook Stripe. Pour le guide complet, voir le guide Stripe Checkout.

Option C : Conversions non-Stripe (API de conversion)​

Pour les conversions qui ne passent pas par Stripe (soumissions de formulaires, essais gratuits, événements personnalisés), utilisez l'API de conversion pour les signaler depuis votre serveur :

curl -X POST https://api.selgeo.com/api/v1/conversions \
  -H "Authorization: Bearer sk_test_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "click_id": "CLICK_ID_DU_FRONTEND",
    "external_transaction_id": "signup_12345",
    "event_type": "signup",
    "amount_cents": 0
  }'

Étape 5 : Tester une conversion de bout en bout​

Parcourez le cycle complet en mode test pour confirmer que tout fonctionne :

  1. Créez un programme de test dans le tableau de bord Selgeo avec au moins un partenaire et un lien de suivi.
  2. Cliquez sur le lien de suivi dans un nouvel onglet de navigateur. Cela enregistre un clic et stocke un click_id.
  3. Effectuez un achat en utilisant l'une des méthodes ci-dessus :
    • Liens de paiement : Cliquez sur un Lien de paiement Stripe sur votre site. Utilisez la carte de test Stripe 4242 4242 4242 4242.
    • Checkout : Déclenchez votre flux de paiement. Le click_id est passé comme client_reference_id.
    • API de conversion : Envoyez une requête POST /api/v1/conversions depuis votre serveur avec le click_id.
  4. Vérifiez le tableau de bord : Naviguez vers Analytics dans le tableau de bord Selgeo. Vous devriez voir :
    • Le clic enregistré sous le partenaire
    • La conversion attribuée au partenaire
    • Une commission calculée (si des règles de commission sont configurées)
Cartes de test Stripe

Utilisez les numéros de carte de test de Stripe pour simuler des paiements sans vrais frais. La plus courante est 4242 4242 4242 4242 avec n'importe quelle date d'expiration future et n'importe quel CVC.

Prochaines étapes​