|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Dropshipping ROAS Calculator</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #6b73ff 0%, #000dff 100%); |
|
|
} |
|
|
.result-card { |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 13, 255, 0.1), 0 4px 6px -2px rgba(0, 13, 255, 0.05); |
|
|
} |
|
|
input[type="range"]::-webkit-slider-thumb { |
|
|
-webkit-appearance: none; |
|
|
height: 20px; |
|
|
width: 20px; |
|
|
border-radius: 50%; |
|
|
background: #4f46e5; |
|
|
cursor: pointer; |
|
|
box-shadow: 0 0 2px 0 #555; |
|
|
} |
|
|
.tooltip { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
} |
|
|
.tooltip .tooltiptext { |
|
|
visibility: hidden; |
|
|
width: 200px; |
|
|
background-color: #555; |
|
|
color: #fff; |
|
|
text-align: center; |
|
|
border-radius: 6px; |
|
|
padding: 5px; |
|
|
position: absolute; |
|
|
z-index: 1; |
|
|
bottom: 125%; |
|
|
left: 50%; |
|
|
margin-left: -100px; |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s; |
|
|
} |
|
|
.tooltip:hover .tooltiptext { |
|
|
visibility: visible; |
|
|
opacity: 1; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-12"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
|
|
|
<div class="text-center mb-12"> |
|
|
<h1 class="text-4xl font-bold text-gray-800 mb-3">Dropshipping ROAS Calculator</h1> |
|
|
<p class="text-lg text-gray-600 max-w-2xl mx-auto"> |
|
|
Determine your breakeven and target ROAS to optimize your ad spend profitability |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="gradient-bg p-6 text-white"> |
|
|
<h2 class="text-2xl font-semibold flex items-center"> |
|
|
<i class="fas fa-calculator mr-3"></i> Calculate Your ROAS |
|
|
</h2> |
|
|
<p class="opacity-90 mt-1">Enter your product details below</p> |
|
|
</div> |
|
|
|
|
|
<div class="p-6 md:p-8 grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
|
|
|
<div> |
|
|
<div class="mb-6"> |
|
|
<label for="productPrice" class="block text-sm font-medium text-gray-700 mb-1"> |
|
|
Product Price ($) |
|
|
<span class="tooltip"> |
|
|
<i class="fas fa-info-circle text-blue-500 ml-1"></i> |
|
|
<span class="tooltiptext text-sm">The price you sell the product to customers</span> |
|
|
</span> |
|
|
</label> |
|
|
<div class="relative"> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<span class="text-gray-500">$</span> |
|
|
</div> |
|
|
<input type="number" id="productPrice" class="pl-7 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" value="39.99" min="0" step="0.01"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="productCost" class="block text-sm font-medium text-gray-700 mb-1"> |
|
|
Product Cost ($) |
|
|
<span class="tooltip"> |
|
|
<i class="fas fa-info-circle text-blue-500 ml-1"></i> |
|
|
<span class="tooltiptext text-sm">The cost you pay to your supplier for the product</span> |
|
|
</span> |
|
|
</label> |
|
|
<div class="relative"> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<span class="text-gray-500">$</span> |
|
|
</div> |
|
|
<input type="number" id="productCost" class="pl-7 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" value="12.50" min="0" step="0.01"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="shippingCost" class="block text-sm font-medium text-gray-700 mb-1"> |
|
|
Shipping Cost ($) |
|
|
<span class="tooltip"> |
|
|
<i class="fas fa-info-circle text-blue-500 ml-1"></i> |
|
|
<span class="tooltiptext text-sm">Cost to ship the product to your customer</span> |
|
|
</span> |
|
|
</label> |
|
|
<div class="relative"> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<span class="text-gray-500">$</span> |
|
|
</div> |
|
|
<input type="number" id="shippingCost" class="pl-7 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" value="4.99" min="0" step="0.01"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="transactionFee" class="block text-sm font-medium text-gray-700 mb-1"> |
|
|
Transaction Fee (%) |
|
|
<span class="tooltip"> |
|
|
<i class="fas fa-info-circle text-blue-500 ml-1"></i> |
|
|
<span class="tooltiptext text-sm">Payment processor fees (e.g., Shopify, PayPal)</span> |
|
|
</span> |
|
|
</label> |
|
|
<div class="relative"> |
|
|
<input type="number" id="transactionFee" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" value="3" min="0" max="100" step="0.1"> |
|
|
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"> |
|
|
<span class="text-gray-500">%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="targetProfit" class="block text-sm font-medium text-gray-700 mb-1"> |
|
|
Target Profit Margin (%) |
|
|
<span class="tooltip"> |
|
|
<i class="fas fa-info-circle text-blue-500 ml-1"></i> |
|
|
<span class="tooltiptext text-sm">Your desired profit percentage after all costs</span> |
|
|
</span> |
|
|
</label> |
|
|
<div class="relative"> |
|
|
<input type="range" id="targetProfitRange" min="0" max="100" value="20" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer mb-2"> |
|
|
<div class="flex justify-between text-xs text-gray-500"> |
|
|
<span>0%</span> |
|
|
<span>50%</span> |
|
|
<span>100%</span> |
|
|
</div> |
|
|
<div class="relative mt-2"> |
|
|
<input type="number" id="targetProfit" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" value="20" min="0" max="100" step="1"> |
|
|
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"> |
|
|
<span class="text-gray-500">%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button id="calculateBtn" class="w-full gradient-bg text-white py-3 px-4 rounded-md font-medium hover:opacity-90 transition duration-300 flex items-center justify-center"> |
|
|
<i class="fas fa-calculator mr-2"></i> Calculate ROAS |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="bg-gray-50 p-6 rounded-lg border border-gray-200"> |
|
|
<h3 class="text-lg font-medium text-gray-800 mb-4 flex items-center"> |
|
|
<i class="fas fa-chart-line mr-2 text-blue-500"></i> Your ROAS Results |
|
|
</h3> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
|
|
|
<div class="result-card bg-white p-4 rounded-lg border border-gray-200"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-700">Breakeven ROAS</h4> |
|
|
<p class="text-sm text-gray-500">Minimum ROAS to cover costs</p> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<span id="breakevenROAS" class="text-2xl font-bold text-blue-600">1.75</span> |
|
|
<span class="text-blue-600 font-medium">x</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-2 text-xs text-gray-500"> |
|
|
<i class="fas fa-info-circle mr-1"></i> You need $1.75 in revenue for every $1 spent on ads |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="result-card bg-white p-4 rounded-lg border border-gray-200"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-700">Target ROAS</h4> |
|
|
<p class="text-sm text-gray-500">To achieve <span id="targetProfitDisplay">20</span>% profit</p> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<span id="targetROAS" class="text-2xl font-bold text-green-600">2.19</span> |
|
|
<span class="text-green-600 font-medium">x</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-2 text-xs text-gray-500"> |
|
|
<i class="fas fa-info-circle mr-1"></i> You need $2.19 in revenue for every $1 spent on ads |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="result-card bg-white p-4 rounded-lg border border-gray-200"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-700">Profit per Sale</h4> |
|
|
<p class="text-sm text-gray-500">At target ROAS</p> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<span id="profitPerSale" class="text-2xl font-bold text-purple-600">8.75</span> |
|
|
<span class="text-purple-600 font-medium">$</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-2 text-xs text-gray-500"> |
|
|
<i class="fas fa-info-circle mr-1"></i> You make $8.75 profit per sale at your target |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 bg-yellow-50 border border-yellow-200 rounded-lg p-4"> |
|
|
<h4 class="font-medium text-yellow-800 flex items-center"> |
|
|
<i class="fas fa-lightbulb mr-2"></i> ROAS Tips |
|
|
</h4> |
|
|
<ul class="mt-2 space-y-2 text-sm text-yellow-700"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle mr-2 mt-1 text-yellow-500"></i> |
|
|
<span>ROAS below breakeven means you're losing money</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle mr-2 mt-1 text-yellow-500"></i> |
|
|
<span>Aim for ROAS above your target for sustainable growth</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle mr-2 mt-1 text-yellow-500"></i> |
|
|
<span>Test different ad creatives to improve your ROAS</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-16"> |
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-6 text-center flex items-center justify-center"> |
|
|
<i class="fas fa-question-circle mr-3 text-blue-500"></i> How ROAS Calculation Works |
|
|
</h2> |
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden"> |
|
|
<div class="p-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="w-10 h-10 gradient-bg rounded-full flex items-center justify-center text-white mb-3"> |
|
|
<i class="fas fa-dollar-sign"></i> |
|
|
</div> |
|
|
<h3 class="font-medium text-gray-800 mb-2">Breakeven ROAS Formula</h3> |
|
|
<p class="text-sm text-gray-600"> |
|
|
Breakeven ROAS = 1 / (Product Price - Product Cost - Shipping Cost - Transaction Fees) × Product Price |
|
|
</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="w-10 h-10 gradient-bg rounded-full flex items-center justify-center text-white mb-3"> |
|
|
<i class="fas fa-bullseye"></i> |
|
|
</div> |
|
|
<h3 class="font-medium text-gray-800 mb-2">Target ROAS Formula</h3> |
|
|
<p class="text-sm text-gray-600"> |
|
|
Target ROAS = Breakeven ROAS / (1 - (Target Profit % / 100)) |
|
|
</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="w-10 h-10 gradient-bg rounded-full flex items-center justify-center text-white mb-3"> |
|
|
<i class="fas fa-chart-pie"></i> |
|
|
</div> |
|
|
<h3 class="font-medium text-gray-800 mb-2">Profit Calculation</h3> |
|
|
<p class="text-sm text-gray-600"> |
|
|
Profit = (Product Price - Costs) - (Product Price × (Target Profit % / 100)) |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const targetProfitRange = document.getElementById('targetProfitRange'); |
|
|
const targetProfit = document.getElementById('targetProfit'); |
|
|
|
|
|
targetProfitRange.addEventListener('input', function() { |
|
|
targetProfit.value = this.value; |
|
|
document.getElementById('targetProfitDisplay').textContent = this.value; |
|
|
calculateROAS(); |
|
|
}); |
|
|
|
|
|
targetProfit.addEventListener('input', function() { |
|
|
if (this.value > 100) this.value = 100; |
|
|
if (this.value < 0) this.value = 0; |
|
|
targetProfitRange.value = this.value; |
|
|
document.getElementById('targetProfitDisplay').textContent = this.value; |
|
|
calculateROAS(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('calculateBtn').addEventListener('click', calculateROAS); |
|
|
document.querySelectorAll('input').forEach(input => { |
|
|
input.addEventListener('input', calculateROAS); |
|
|
}); |
|
|
|
|
|
|
|
|
calculateROAS(); |
|
|
}); |
|
|
|
|
|
function calculateROAS() { |
|
|
|
|
|
const productPrice = parseFloat(document.getElementById('productPrice').value) || 0; |
|
|
const productCost = parseFloat(document.getElementById('productCost').value) || 0; |
|
|
const shippingCost = parseFloat(document.getElementById('shippingCost').value) || 0; |
|
|
const transactionFeePercent = parseFloat(document.getElementById('transactionFee').value) || 0; |
|
|
const targetProfitPercent = parseFloat(document.getElementById('targetProfit').value) || 0; |
|
|
|
|
|
|
|
|
const transactionFeeAmount = productPrice * (transactionFeePercent / 100); |
|
|
|
|
|
|
|
|
const totalCosts = productCost + shippingCost + transactionFeeAmount; |
|
|
|
|
|
|
|
|
const profitPerSale = productPrice - totalCosts; |
|
|
const breakevenROAS = profitPerSale > 0 ? (productPrice / profitPerSale).toFixed(2) : '∞'; |
|
|
|
|
|
|
|
|
const targetProfitAmount = productPrice * (targetProfitPercent / 100); |
|
|
const targetProfitPerSale = profitPerSale - targetProfitAmount; |
|
|
let targetROAS = '∞'; |
|
|
|
|
|
if (targetProfitPerSale > 0) { |
|
|
targetROAS = (productPrice / targetProfitPerSale).toFixed(2); |
|
|
} |
|
|
|
|
|
|
|
|
const profitAtTarget = (productPrice - totalCosts) - (productPrice * (targetProfitPercent / 100)); |
|
|
|
|
|
|
|
|
document.getElementById('breakevenROAS').textContent = breakevenROAS; |
|
|
document.getElementById('targetROAS').textContent = targetROAS; |
|
|
document.getElementById('profitPerSale').textContent = profitAtTarget.toFixed(2); |
|
|
document.getElementById('targetProfitDisplay').textContent = targetProfitPercent; |
|
|
} |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jamesx007/roas-v1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
