如何计算和优化广告支出回报率 (ROAS) 以最大化您的广告活动效果

/** * Logique du Calculateur ROAS * Aucune API externe n’est requise pour ce calcul mathématique simple. * Cela garantit une performance maximale et une confidentialité totale des données. */ function calculateROAS() { // 1. Récupération des valeurs const budgetInput = document.getElementById(‘ad-budget’); const revenueInput = document.getElementById(‘ad-revenue’); const budget = parseFloat(budgetInput.value); const revenue = parseFloat(revenueInput.value); // Éléments du DOM à mettre à jour const displayRatio = document.getElementById(‘result-ratio’); const displayPercent = document.getElementById(‘result-percentage’); const displayVerdict = document.getElementById(‘verdict-text’); const displayInterpretation = document.getElementById(‘interpretation’); const progressBar = document.getElementById(‘progress-bar’); // 2. Validation basique if (isNaN(budget) || isNaN(revenue) || budget <= 0) { // État par défaut si incomplet ou division par zéro impossible if(budgetInput.value === "" &amp;& revenueInput.value === "") { resetVisuals(); } return; } // 3. Calculs // Formule : Revenu / Budget const roasValue = revenue / budget; const roasPercent = roasValue * 100; // 4. Mise à jour de l'affichage // Affichage Ratio (ex: 4.50) displayRatio.innerText = roasValue.toFixed(2); // Affichage Pourcentage (ex: 450%) displayPercent.innerText = Math.round(roasPercent).toLocaleString('fr-FR') + '%'; // 5. Logique de Verdict (Interprétation Créative) let verdict = ""; let colorClass = ""; let interpretationText = ""; let progressWidth = 0; if (roasValue < 1) { verdict = "Déficitaire "; colorClass = "bg-red-500"; interpretationText = `Attention ! Pour chaque 1€ investi, vous récupérez seulement ${roasValue.toFixed(2)}€. Vous perdez de l’argent.`; progressWidth = 20; // Barre rouge courte } else if (roasValue >= 1 && roasValue < 2) { verdict = "Faible / À l'équilibre"; colorClass = "bg-yellow-500"; interpretationText = `C'est un début. Vous ne perdez pas d'argent, mais la marge est faible. 1€ investi = ${roasValue.toFixed(2)}€ de revenu.`; progressWidth = 40; } else if (roasValue >= 2 && roasValue < 4) { verdict = "Rentable "; colorClass = "bg-blue-500"; interpretationText = `Bon travail. Vos campagnes sont saines. Pour 1€ dépensé, vous générez ${roasValue.toFixed(2)}€.`; progressWidth = 70; } else { verdict = “Excellent “; colorClass = “bg-gradient-to-r from-green-400 to-emerald-600”; interpretationText = `Performance exceptionnelle ! Votre machine à vendre tourne à plein régime. 1€ investi = ${roasValue.toFixed(2)}€ générés.`; progressWidth = 100; } // Mise à jour textes et couleurs displayVerdict.innerText = verdict; displayInterpretation.innerHTML = interpretationText; // Animation de la barre progressBar.className = `h-full transition-all duration-700 ease-out shadow-lg ${roasValue >= 4 ? colorClass : ‘bg-‘ + colorClass.split(‘-‘)[1] + ‘-500’}`; // On force le style inline pour la largeur dynamique pour plus de fluidité progressBar.style.width = `${progressWidth}%`; // Si c’est un gradient (cas excellent), on réapplique la classe complète if(roasValue >= 4) { progressBar.className = `h-full transition-all duration-700 ease-out shadow-lg bg-gradient-to-r from-green-400 to-emerald-600`; } else if (roasValue = 1 && roasValue < 2) { progressBar.className = `h-full transition-all duration-700 ease-out shadow-lg bg-yellow-500`; } else { progressBar.className = `h-full transition-all duration-700 ease-out shadow-lg bg-indigo-500`; } } function resetCalculator() { document.getElementById('ad-budget').value = ''; document.getElementById('ad-revenue').value = ''; resetVisuals(); } function resetVisuals() { document.getElementById('result-ratio').innerText = '0.00'; document.getElementById('result-percentage').innerText = '0%'; document.getElementById('verdict-text').innerText = 'En attente…'; document.getElementById('interpretation').innerText = 'Entrez vos données pour voir combien vous gagnez pour chaque euro investi.'; document.getElementById('progress-bar').style.width = '0%'; }