N° 022 · ●●○

Calculateur de budget pub

Un budget, un coût par clic, un taux de conversion : combien de ventes espérer, et à quel prix. Le bon exercice pour transformer une règle de trois en outil de décision.

Ce qu'on apprend

Enchaîner des calculs à partir de curseurs
Formater des euros avec Intl.NumberFormat
Éviter la division par zéro

Pourquoi ce langage

Pourquoi un calculateur de budget pub ? Avant de lancer une campagne Meta ou Google, la question est toujours la même : combien de ventes pour combien d'euros ? Avec quatre chiffres, on peut l'estimer en dix secondes.

Budget divisé par le coût par clic donne les clics. Les clics multipliés par le taux de conversion donnent les ventes. Le reste en découle : le coût par vente et le ROAS, ce que rapporte chaque euro dépensé.

Pourquoi en JavaScript simple ? Quatre curseurs, cinq lignes de calcul, et l'API Intl pour afficher des euros propres. C'est un tableur, en mieux.

Comment ça marche

LE HTML

Un curseur par donnée, avec sa valeur affichée à côté.

<label for="budget">Budget</label> <output id="o-budget"></output>
<input type="range" id="budget" min="50" max="5000" step="50" value="500">

LIRE LES VALEURS

const v = id => Number(document.getElementById(id).value);
const eur = new Intl.NumberFormat('fr-BE', { style: 'currency', currency: 'EUR' });

LE CALCUL

Tout part du budget. Le taux est saisi en pourcentage, on le divise par 100.

function calculer() {
  const budget = v('budget'), cpc = v('cpc'), taux = v('taux') / 100, panier = v('panier');
  const clics = budget / cpc;
  const ventes = clics * taux;
  const chiffre = ventes * panier;
  const cpa = ventes > 0 ? budget / ventes : Infinity;   // coût par vente
  const roas = chiffre / budget;                          // ce que rapporte 1 euro
  return { clics, ventes, cpa, roas };
}

AFFICHER

function afficher() {
  const r = calculer();
  document.getElementById('ventes').textContent = Math.floor(r.ventes);
  document.getElementById('cpa').textContent = isFinite(r.cpa) ? eur.format(r.cpa) : '-';
  document.getElementById('roas').textContent = r.roas.toFixed(1) + ' ×';
}

RECALCULER À CHAQUE MOUVEMENT

document.querySelectorAll('input').forEach(i => i.addEventListener('input', afficher));
afficher();

Pièges

PIÈGE 1 : Confondre ROAS et bénéfice

Piège

Mauvais : se réjouir d'un ROAS de 2. Avec 60 % de coûts sur chaque vente, on perd de l'argent.

Fix

Correct : comparer le ROAS à la marge. Le seuil de rentabilité vaut 1 divisé par le taux de marge.

PIÈGE 2 : Arrondir trop tôt

Piège

Mauvais : arrondir les clics avant de calculer les ventes. Les erreurs s'additionnent d'une étape à l'autre.

Fix

Correct : calculer avec les valeurs exactes, et n'arrondir qu'à l'affichage.

PIÈGE 3 : Des euros mal écrits

Piège

Mauvais : valeur.toFixed(2) + '€'. On obtient « 1250.00€ » au lieu de « 1 250,00 € ».

Fix

Correct : Intl.NumberFormat('fr-BE', { style: 'currency', currency: 'EUR' }).

PERSONNALISER

Ajoutez la marge en pourcentage pour afficher le vrai bénéfice net.
Un mode inverse : on donne le nombre de ventes visé, l'outil calcule le budget nécessaire.
Des préréglages par réseau, avec des coûts par clic moyens pour Meta, Google ou TikTok.

OPTIMISATION

Mettez les valeurs dans l'URL avec URLSearchParams pour partager une simulation par lien.
Affichez une petite courbe du ROAS selon le budget, pour voir où les rendements baissent.

VERS REACT

Les quatre valeurs vont dans un seul useState sous forme d'objet.

Le calcul se fait pendant le rendu, sans état supplémentaire : ce sont des valeurs dérivées.

Le formateur Intl se crée une fois, en dehors du composant.

Commentaires

Chargement des commentaires…