Untitled

 avatar
unknown
plain_text
3 days ago
11 kB
0
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