Skip to content
Learni
Voir tous les tutoriels
Tests et Expérimentation

Comment implémenter des tests A/B en JavaScript en 2026

12 minBEGINNER
OptimisationJavaScriptTest A/B
Read in English

Introduction

Les tests A/B permettent de comparer deux versions d'une page pour déterminer laquelle convertit le mieux. En 2026, ils restent essentiels pour toute stratégie d'optimisation web. Ce tutoriel vous apprend à implémenter un système A/B simple mais complet en JavaScript pur, sans bibliothèque externe. Vous allez créer une répartition aléatoire des visiteurs, afficher des variantes et mesurer les conversions. Chaque étape inclut du code directement utilisable.

Prérequis

  • Connaissances de base en HTML, CSS et JavaScript
  • Un navigateur moderne
  • Un éditeur de code (VS Code recommandé)
  • Optionnel : un compte Google Analytics pour le tracking réel

Structure HTML de base

index.html
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Test A/B - Bouton CTA</title>
</head>
<body>
  <h1>Bienvenue sur notre site</h1>
  <button id="cta-button">S'inscrire</button>
  <script src="ab-test.js"></script>
</body>
</html>

Ce fichier HTML de base contient un bouton dont le texte et la couleur vont varier selon la version A ou B. Il charge le script JavaScript qui gère toute la logique du test.

Logique de répartition A/B

ab-test.js
const variants = {
  A: { buttonText: "S'inscrire maintenant", buttonColor: "#007bff" },
  B: { buttonText: "Rejoindre gratuitement", buttonColor: "#28a745" }
};

function getVariant() {
  const stored = localStorage.getItem('abVariant');
  if (stored) return stored;
  const variant = Math.random() < 0.5 ? 'A' : 'B';
  localStorage.setItem('abVariant', variant);
  return variant;
}

const currentVariant = getVariant();
const config = variants[currentVariant];
const button = document.getElementById('cta-button');
button.textContent = config.buttonText;
button.style.backgroundColor = config.buttonColor;

Ce script assigne aléatoirement chaque visiteur à la variante A ou B et stocke le choix dans localStorage pour une expérience cohérente. Il applique ensuite les modifications visuelles correspondantes.

Ajout du tracking des conversions

ab-test.js
button.addEventListener('click', () => {
  console.log(`Conversion enregistrée pour la variante ${currentVariant}`);
  // En production : envoyer à Google Analytics ou votre backend
  // gtag('event', 'conversion', { variant: currentVariant });
  alert('Merci ! Votre conversion a été enregistrée.');
});

L'écouteur de clic enregistre la conversion. En production, remplacez le console.log par un appel à votre outil d'analytics pour mesurer précisément quel variant performe le mieux.

Variantes étendues avec CSS

styles.css
.variant-A { background-color: #007bff; }
.variant-B { background-color: #28a745; }
#cta-button { padding: 12px 24px; font-size: 18px; color: white; border: none; border-radius: 4px; cursor: pointer; }

Ajoutez ces styles pour rendre les variantes visuellement distinctes. Appliquez les classes dynamiquement dans le script JavaScript selon la variante choisie.

Script complet et final

ab-test-complete.js
const variants = {
  A: { buttonText: "S'inscrire maintenant", buttonColor: "#007bff", class: "variant-A" },
  B: { buttonText: "Rejoindre gratuitement", buttonColor: "#28a745", class: "variant-B" }
};

function getVariant() {
  const stored = localStorage.getItem('abVariant');
  if (stored) return stored;
  const variant = Math.random() < 0.5 ? 'A' : 'B';
  localStorage.setItem('abVariant', variant);
  return variant;
}

const currentVariant = getVariant();
const config = variants[currentVariant];
const button = document.getElementById('cta-button');
button.textContent = config.buttonText;
button.style.backgroundColor = config.buttonColor;
button.classList.add(config.class);
button.addEventListener('click', () => {
  console.log(`Conversion variante ${currentVariant}`);
  alert('Conversion enregistrée !');
});

Ce fichier réunit toute la logique : répartition, application de la variante et tracking. Copiez-collez-le directement pour obtenir un test A/B opérationnel.

Bonnes pratiques

  • Toujours stocker la variante dans localStorage pour éviter les changements de version pendant la session
  • Utiliser un ratio 50/50 pour des résultats statistiquement fiables
  • Définir clairement l'objectif de conversion avant de lancer le test
  • Exécuter le test sur une période suffisante (minimum 1-2 semaines)
  • Documenter chaque variante et ses hypothèses

Erreurs courantes à éviter

  • Oublier de persister la variante (changement à chaque rechargement)
  • Ne pas segmenter les résultats par source de trafic
  • Lancer plusieurs tests simultanés sur la même page
  • Ignorer la significativité statistique des résultats

Pour aller plus loin

Approfondissez vos compétences en optimisation avec nos formations Learni dédiées aux tests A/B avancés et à l'expérimentation produit.