N° 022 · ●●○

Ad budget calculator

A budget, a cost per click, a conversion rate: how many sales to expect, and at what cost. The right exercise to turn a rule of three into a decision tool.

What you'll learn

Chain calculations from sliders
Format euros with Intl.NumberFormat
Avoid division by zero

Why this language

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.

How it works

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();

Pitfalls

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

Pitfall

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

Pitfall

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

Pitfall

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.

Comments

Loading comments…