Untitled
unknown
plain_text
3 days ago
11 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 Kampanii Google Ads dla B2B</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 B2B calculator app container */
#google-ads-b2b-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-b2b-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-b2b-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-b2b-calculator-app p {
font-family: inherit;
color: inherit;
font-size: inherit;
line-height: inherit;
}
#google-ads-b2b-calculator-app label {
color: #555;
font-weight: 600;
display: block;
font-size: 1.125rem;
margin-bottom: 0.5rem;
}
#google-ads-b2b-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-b2b-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-b2b-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-b2b-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-b2b-calculator-app .result-item {
margin-bottom: 0.75rem;
font-size: 1.125rem;
color: #333;
}
#google-ads-b2b-calculator-app .result-value {
font-weight: 700;
color: #4f46e5;
}
#google-ads-b2b-calculator-app .result-comment {
color: #555;
font-size: 1rem;
line-height: 1.5;
margin-top: 1rem;
}
/* Button styling */
#google-ads-b2b-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-b2b-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-b2b-calculator-app">
<h1>Kalkulator Budżetu Kampanii Google Ads B2B</h1>
<p style="margin-bottom: 1.5rem; text-align: center; color: #555;">
Ten kalkulator pomoże Ci oszacować potencjalne wyniki kampanii Google Ads dla Twojej firmy B2B, koncentrując się na pozyskiwaniu leadów.
</p>
<!-- Dane wejściowe użytkownika -->
<div class="section-bg">
<label for="b2b_cpc">Średni koszt kliknięcia (CPC) w PLN:</label>
<input type="number" id="b2b_cpc" value="8.00" min="0.01" step="0.01">
</div>
<div class="section-bg">
<label for="b2b_conversionRate">Współczynnik konwersji (kliknięcia na leada) w %:</label>
<input type="number" id="b2b_conversionRate" value="1" min="0.01" step="0.01">
</div>
<div class="section-bg">
<label for="b2b_targetCPL">Docelowy CPL (koszt pozyskania leada) w PLN:</label>
<input type="number" id="b2b_targetCPL" value="300" min="0.01" step="0.01">
</div>
<div class="section-bg">
<label for="b2b_adBudget">Budżet reklamowy w PLN:</label>
<input type="number" id="b2b_adBudget" value="20000" min="1" step="1">
</div>
<!-- Wyniki -->
<div class="result-box">
<h2>Szacowane wyniki kampanii:</h2>
<p class="result-item">Liczba kliknięć: <span id="b2b_clicks" class="result-value">0</span></p>
<p class="result-item">Liczba leadów: <span id="b2b_leads" class="result-value">0</span></p>
<p class="result-item">Finalny CPL (koszt pozyskania leada): <span id="b2b_finalCPL" class="result-value">0 PLN</span></p>
<p id="b2b_interpretation" class="result-comment"></p>
</div>
<!-- Przycisk CTA -->
<div style="text-align: center;">
<a href="https://www.fallowdeer.pl/kontakt" id="b2b_consultationButton" class="cta-button">
Umów bezpłatną konsultację Google Ads B2B
</a>
</div>
</div>
<script>
// Pobieranie elementów DOM
const b2b_cpcInput = document.getElementById('b2b_cpc');
const b2b_conversionRateInput = document.getElementById('b2b_conversionRate');
const b2b_targetCPLInput = document.getElementById('b2b_targetCPL');
const b2b_adBudgetInput = document.getElementById('b2b_adBudget');
const b2b_clicksDisplay = document.getElementById('b2b_clicks');
const b2b_leadsDisplay = document.getElementById('b2b_leads');
const b2b_finalCPLDisplay = document.getElementById('b2b_finalCPL');
const b2b_interpretationDisplay = document.getElementById('b2b_interpretation');
const b2b_consultationButton = document.getElementById('b2b_consultationButton');
/**
* 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 B2B.
*/
function calculateB2BResults() {
const cpc = parseFloat(b2b_cpcInput.value);
const conversionRate = parseFloat(b2b_conversionRateInput.value) / 100; // Convert percentage to decimal
const targetCPL = parseFloat(b2b_targetCPLInput.value);
const adBudget = parseFloat(b2b_adBudgetInput.value);
// Sprawdzenie, czy wszystkie dane są poprawne liczbowo
if (isNaN(cpc) || isNaN(conversionRate) || isNaN(targetCPL) || isNaN(adBudget) || cpc <= 0 || conversionRate <= 0 || adBudget <= 0) {
b2b_clicksDisplay.textContent = 'N/A';
b2b_leadsDisplay.textContent = 'N/A';
b2b_finalCPLDisplay.textContent = 'N/A';
b2b_interpretationDisplay.textContent = 'Wprowadź poprawne dane wejściowe.';
return;
}
// Obliczenia
const clicks = adBudget / cpc;
const leads = clicks * conversionRate;
let finalCPL = 0;
if (leads > 0) {
finalCPL = adBudget / leads;
} else {
finalCPL = Infinity; // Handle case where no leads are generated
}
// Wyświetlanie wyników
b2b_clicksDisplay.textContent = Math.round(clicks);
b2b_leadsDisplay.textContent = Math.round(leads);
b2b_finalCPLDisplay.textContent = finalCPL === Infinity ? 'N/A (brak leadów)' : formatCurrency(finalCPL);
// Interpretacja wyników
let interpretationText = '';
if (finalCPL === Infinity) {
interpretationText = 'Brak przewidywanych leadów przy obecnych danych. Zwiększ budżet, popraw CPC lub współczynnik konwersji.';
} else if (finalCPL > targetCPL) {
interpretationText = `Finalny CPL (${formatCurrency(finalCPL)}) jest wyższy niż docelowy (${formatCurrency(targetCPL)}). Warto zoptymalizować kampanię, aby obniżyć koszt leada.`;
} else if (finalCPL <= targetCPL && finalCPL > (targetCPL * 0.7)) {
interpretationText = `Finalny CPL (${formatCurrency(finalCPL)}) jest zbliżony do docelowego (${formatCurrency(targetCPL)}). Dobry wynik, ale zawsze jest miejsce na optymalizację.`;
} else {
interpretationText = `Finalny CPL (${formatCurrency(finalCPL)}) jest niższy niż docelowy (${formatCurrency(targetCPL)}). Bardzo dobry wynik, kampania jest efektywna!`;
}
b2b_interpretationDisplay.textContent = interpretationText;
}
// Dodanie nasłuchiwaczy zdarzeń do pól wejściowych
b2b_cpcInput.addEventListener('input', calculateB2BResults);
b2b_conversionRateInput.addEventListener('input', calculateB2BResults);
b2b_targetCPLInput.addEventListener('input', calculateB2BResults);
b2b_adBudgetInput.addEventListener('input', calculateB2BResults);
// Inicjalne wywołanie funkcji, aby wyświetlić początkowe wyniki po załadowaniu strony
document.addEventListener('DOMContentLoaded', calculateB2BResults);
</script>
</body>
</html>
Editor is loading...
Leave a Comment