Untitled
unknown
plain_text
3 days ago
10 kB
2
No Index
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kalkulator Budżetu Google Ads dla Ecommerce</title>
<!-- Google Fonts - Inter (as a fallback if parent page doesn't define a font) -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
/* Styles scoped to the Google Ads calculator app container */
#google-ads-calculator-app {
font-family: inherit; /* Inherit font from parent page */
background-color: #f0f2f5; /* Very light gray background for the calculator itself */
color: inherit; /* Inherit text color from parent page */
padding: 1rem;
border-radius: 1.5rem;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
max-width: 800px;
margin: 2rem auto;
box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
}
#google-ads-calculator-app h1 {
font-family: inherit;
color: inherit;
font-weight: inherit;
font-size: 2rem; /* Default size if inherited is too small */
line-height: inherit;
margin-bottom: 2rem;
text-align: center;
}
#google-ads-calculator-app h2 {
font-family: inherit;
font-weight: inherit;
color: inherit;
font-size: 1.5rem; /* Default size if inherited is too small */
line-height: inherit;
margin-bottom: 0.75rem;
}
#google-ads-calculator-app p {
font-family: inherit;
color: inherit;
font-size: inherit;
line-height: inherit;
}
#google-ads-calculator-app label {
color: #555;
font-weight: 600;
display: block;
font-size: 1.125rem;
margin-bottom: 0.5rem;
}
#google-ads-calculator-app input[type="number"] {
width: 100%;
padding: 0.75rem;
border: 1px solid #e0e0e0;
border-radius: 0.75rem;
background-color: #f9fafb;
color: #333;
box-sizing: border-box;
}
#google-ads-calculator-app input[type="number"]:focus {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
outline: none;
}
/* Styling for section backgrounds */
#google-ads-calculator-app .section-bg {
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 1rem;
padding: 1rem;
margin-bottom: 1.5rem;
}
/* Result box styling */
#google-ads-calculator-app .result-box {
background-color: #f0f4f8;
border: 1px solid #d1d5db;
border-radius: 1.5rem;
padding: 1.5rem;
margin-top: 2rem;
text-align: center;
}
#google-ads-calculator-app .result-item {
margin-bottom: 0.75rem;
font-size: 1.125rem;
color: #333;
}
#google-ads-calculator-app .result-value {
font-weight: 700;
color: #4f46e5;
}
#google-ads-calculator-app .result-comment {
color: #555;
font-size: 1rem;
line-height: 1.5;
margin-top: 1rem;
}
/* Button styling */
#google-ads-calculator-app .cta-button {
background-color: #fffb66;
color: #232d2a;
font-weight: 600;
padding: 0.75rem 2rem;
border-radius: 9999px; /* Fully rounded */
box-shadow: 0 4px 10px rgba(255, 251, 102, 0.3);
transition: all 0.2s ease-in-out;
display: inline-block;
margin-top: 2rem;
text-decoration: none; /* Remove underline for links */
}
#google-ads-calculator-app .cta-button:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 6px 15px rgba(255, 251, 102, 0.4);
}
</style>
</head>
<body>
<div id="google-ads-calculator-app">
<h1>Kalkulator Budżetu Kampanii Google Ads</h1>
<p style="margin-bottom: 1.5rem; text-align: center; color: #555;">
Ten kalkulator pomoże Ci oszacować potencjalne wyniki kampanii Google Ads dla Twojego sklepu internetowego na podstawie kluczowych danych wejściowych.
</p>
<!-- Dane wejściowe użytkownika -->
<div class="section-bg">
<label for="cpc">Średni koszt kliknięcia (CPC) w PLN:</label>
<input type="number" id="cpc" value="2.50" min="0.01" step="0.01">
</div>
<div class="section-bg">
<label for="conversionRate">Współczynnik konwersji (%):</label>
<input type="number" id="conversionRate" value="2" min="0.01" step="0.01">
</div>
<div class="section-bg">
<label for="basketValue">Średnia wartość koszyka (brutto) w PLN:</label>
<input type="number" id="basketValue" value="250" min="0.01" step="0.01">
</div>
<div class="section-bg">
<label for="adBudget">Budżet reklamowy w PLN:</label>
<input type="number" id="adBudget" value="15000" min="1" step="1">
</div>
<!-- Wyniki -->
<div class="result-box">
<h2>Szacowane wyniki kampanii:</h2>
<p class="result-item">Liczba kliknięć: <span id="clicks" class="result-value">0</span></p>
<p class="result-item">Liczba zamówień: <span id="orders" class="result-value">0</span></p>
<p class="result-item">Łączny przychód: <span id="revenue" class="result-value">0 PLN</span></p>
<p class="result-item">ROAS (przychód / budżet): <span id="roas" class="result-value">0</span></p>
<p id="interpretation" class="result-comment"></p>
</div>
<!-- Przycisk CTA -->
<div style="text-align: center;">
<a href="https://www.fallowdeer.pl/kontakt" id="googleAdsConsultationButton" class="cta-button">
Umów bezpłatną konsultację Google Ads
</a>
</div>
</div>
<script>
// Pobieranie elementów DOM
const cpcInput = document.getElementById('cpc');
const conversionRateInput = document.getElementById('conversionRate');
const basketValueInput = document.getElementById('basketValue');
const adBudgetInput = document.getElementById('adBudget');
const clicksDisplay = document.getElementById('clicks');
const ordersDisplay = document.getElementById('orders');
const revenueDisplay = document.getElementById('revenue');
const roasDisplay = document.getElementById('roas');
const interpretationDisplay = document.getElementById('interpretation');
const consultationButton = document.getElementById('googleAdsConsultationButton');
/**
* Funkcja formatująca liczbę jako walutę (PLN).
* @param {number} value - Wartość do sformatowania.
* @returns {string} Sformatowana wartość.
*/
function formatCurrency(value) {
return new Intl.NumberFormat('pl-PL', { style: 'currency', currency: 'PLN', minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(value);
}
/**
* Funkcja obliczająca i aktualizująca wyniki kampanii.
*/
function calculateResults() {
const cpc = parseFloat(cpcInput.value);
const conversionRate = parseFloat(conversionRateInput.value) / 100; // Convert percentage to decimal
const basketValue = parseFloat(basketValueInput.value);
const adBudget = parseFloat(adBudgetInput.value);
// Sprawdzenie, czy wszystkie dane są poprawne liczbowo
if (isNaN(cpc) || isNaN(conversionRate) || isNaN(basketValue) || isNaN(adBudget) || cpc <= 0 || conversionRate <= 0 || basketValue <= 0 || adBudget <= 0) {
clicksDisplay.textContent = 'N/A';
ordersDisplay.textContent = 'N/A';
revenueDisplay.textContent = 'N/A';
roasDisplay.textContent = 'N/A';
interpretationDisplay.textContent = 'Wprowadź poprawne dane wejściowe.';
return;
}
// Obliczenia
const clicks = adBudget / cpc;
const orders = clicks * conversionRate;
const revenue = orders * basketValue;
const roas = revenue / adBudget;
// Wyświetlanie wyników
clicksDisplay.textContent = Math.round(clicks);
ordersDisplay.textContent = Math.round(orders);
revenueDisplay.textContent = formatCurrency(revenue);
roasDisplay.textContent = roas.toFixed(2); // ROAS rounded to 2 decimal places
// Interpretacja wyników
let interpretationText = '';
if (roas < 2) {
interpretationText = 'ROAS poniżej 7.0 może oznaczać, że kampania nie jest wystarczająco rentowna. Warto zoptymalizować CPC, współczynnik konwersji lub wartość koszyka.';
} else if (roas >= 2 && roas < 4) {
interpretationText = 'ROAS na poziomie 7.0-10.0 to dobry punkt wyjścia. Możliwa jest dalsza optymalizacja w celu zwiększenia efektywności.';
} else {
interpretationText = 'ROAS powyżej 10.0 to bardzo dobry wynik, wskazujący na wysoką rentowność kampanii. Gratulacje!';
}
interpretationDisplay.textContent = interpretationText;
}
// Dodanie nasłuchiwaczy zdarzeń do pól wejściowych
cpcInput.addEventListener('input', calculateResults);
conversionRateInput.addEventListener('input', calculateResults);
basketValueInput.addEventListener('input', calculateResults);
adBudgetInput.addEventListener('input', calculateResults);
// Inicjalne wywołanie funkcji, aby wyświetlić początkowe wyniki po załadowaniu strony
document.addEventListener('DOMContentLoaded', calculateResults);
</script>
</body>
</html>
Editor is loading...
Leave a Comment