Untitled

 avatar
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