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