如何使用关键词排除功能来优化广告活动

(function() { // Configuration & Sélection des éléments du DOM const elements = { inputs: { budget: document.getElementById(‘budgetInput’), cpc: document.getElementById(‘cpcInput’), waste: document.getElementById(‘wasteInput’) }, displays: { budget: document.getElementById(‘budgetDisplay’), cpc: document.getElementById(‘cpcDisplay’), waste: document.getElementById(‘wasteDisplay’), wasteBar: document.getElementById(‘wasteBarBg’) }, results: { wastedMoney: document.getElementById(‘wastedMoney’), wastedYearly: document.getElementById(‘wastedYearly’), gainedClicks: document.getElementById(‘gainedClicks’), barEfficient: document.getElementById(‘barEfficient’), barWaste: document.getElementById(‘barWaste’), efficiencyScore: document.getElementById(‘efficiencyScore’) } }; // Formatteur de monnaie (Euro Français) const currencyFormatter = new Intl.NumberFormat(‘fr-FR’, { style: ‘currency’, currency: ‘EUR’, maximumFractionDigits: 0 }); // Formatteur pour le CPC (avec centimes) const cpcFormatter = new Intl.NumberFormat(‘fr-FR’, { style: ‘currency’, currency: ‘EUR’, minimumFractionDigits: 2 }); /** * Fonction principale de calcul * Ne nécessite pas d’API externe (Calcul mathématique pur) */ function calculate() { // Récupération des valeurs const budget = parseFloat(elements.inputs.budget.value); const cpc = parseFloat(elements.inputs.cpc.value); const wasteRate = parseFloat(elements.inputs.waste.value); // Logique métier // 1. Calcul du montant gaspillé (Budget * % inutile) const wastedAmount = budget * (wasteRate / 100); // 2. Calcul annuel const wastedYearlyAmount = wastedAmount * 12; // 3. Calcul du coût d’opportunité (Combien de “vrais” clics on perd ?) // Si on récupérait cet argent pour le mettre sur des bons mots clés const potentialClicksGained = Math.floor(wastedAmount / cpc); // 4. Calcul d’efficacité const efficiency = 100 – wasteRate; // Mise à jour de l’UI updateUI({ budget, cpc, wasteRate, wastedAmount, wastedYearlyAmount, potentialClicksGained, efficiency }); } /** * Mise à jour du DOM */ function updateUI(data) { // Mise à jour des labels d’inputs elements.displays.budget.textContent = currencyFormatter.format(data.budget); elements.displays.cpc.textContent = cpcFormatter.format(data.cpc); elements.displays.waste.textContent = data.wasteRate + ‘%’; elements.displays.wasteBar.style.width = data.wasteRate + ‘%’; // Mise à jour des résultats chiffrés // Animation simple des nombres (pour l’effet waouh) animateValue(elements.results.wastedMoney, data.wastedAmount, ‘€’); elements.results.wastedYearly.textContent = currencyFormatter.format(data.wastedYearlyAmount); elements.results.gainedClicks.textContent = `+${data.potentialClicksGained}`; // Mise à jour des barres visuelles elements.results.barEfficient.style.width = `${data.efficiency}%`; elements.results.barWaste.style.width = `${data.wasteRate}%`; elements.results.efficiencyScore.textContent = `Efficacité Budgétaire: ${data.efficiency}%`; // Changement de couleur dynamique pour le score d’efficacité if (data.wasteRate > 30) { elements.results.efficiencyScore.classList.add(‘text-red-500’); elements.results.efficiencyScore.classList.remove(‘text-emerald-600’); } else { elements.results.efficiencyScore.classList.remove(‘text-red-500’); elements.results.efficiencyScore.classList.add(‘text-emerald-600’); } } /** * Utilitaire d’animation de nombre légère */ function animateValue(obj, end, suffix) { // Mise à jour directe pour performance, formattage monétaire obj.textContent = currencyFormatter.format(end); } // Écouteurs d’événements // Utilisation de ‘input’ pour une réaction en temps réel au glissement Object.values(elements.inputs).forEach(input => { input.addEventListener(‘input’, calculate); }); // Initialisation au chargement calculate(); })();