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