Мультиязычная страница «Спасибо за заказ»

Создание эффективной страницы "Thank You" Полезные сервисы

Привет, друзья!

Сегодня мы поговорим о создании страницы «Thank You» для ваших лендингов. Эта страница важна для завершения взаимодействия с пользователем и может значительно облегчить вашу жизнь за счет установки различных скриптов.

Зачем нужна страница «Спасибо»?

Страница «Thank You» выполняет несколько важных функций:

  1. Подтверждение: Уведомляет пользователя о том, что его действие (заполнение формы, покупка и т.д.) было успешным.
  2. Доверие: Укрепляет доверие пользователя, показывая, что его данные были приняты и обработаны.
  3. Дополнительные Шаги: Помогает направить пользователя к следующим шагам (например, подписка, домонетизация и т.д.).
  4. Воспроизведение необходимых скриптов: Как правило пиксели, редиректы на витрины и прочее дерьмище.

Основные компоненты страницы «Thank You»

1. Подтверждение действия

Сообщите пользователю, что его действие было успешным. Это может быть простое сообщение типа «Спасибо за ваш заказ!» или «Ваш заказ принят!».

2. Дополнительная информация

Добавьте полезную информацию, такую как время ожидания ответа или график работы колл-центра CPA сети. Так же на эту страницу мы можем передать контактные данные клиента, для проверки. Что бы в случае ошибки, юзер смог вернуться на сайт и повторно отправить лид с корректными данными, позже покажу как это делать!

3. Призыв к кействию (CTA)

Направьте пользователя к следующим шагам: редирект на другой оффер, просмотр полезного контента, переход на витрину и т.д.

Пример HTML кода для страницы «Thank You»

Вот пример мультиязычной страницы «Спасибо за заказ», который вы можете адаптировать под свои нужды:

<!DOCTYPE html>
<html lang="ru">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Спасибо за ваш заказ</title>
        <style>
            body,
            html {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-family: 'Arial', sans-serif;
                background-color: #f2f2f2;
            }

            .container {
                text-align: center;
                padding: 20px;
                border-radius: 10px;
                background: white;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            }

            h1 {
                color: #333;
            }

            p {
                font-size: 18px;
                color: #666;
            }

            .home-button {
                display: inline-block;
                margin-top: 20px;
                padding: 10px 20px;
                background-color: #007bff;
                color: white;
                text-decoration: none;
                border-radius: 5px;
                transition: background-color 0.3s;
            }

            .home-button:hover {
                background-color: #0056b3;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <h1 id="title"></h1>
            <p id="message"></p>
            <a id="back-button" href="javascript:history.back()" class="home-button"></a>
        </div>

        <script>
            const translations = {
                en: {
                    lang: "en",
                    title: "Thank you for your order",
                    header: "Thank you for your order!",
                    message: "We will contact you as soon as possible.",
                    button: "Return to the main page"
                },
                zh: {
                    lang: "zh",
                    title: "感谢您的订单",
                    header: "感谢您的订单!",
                    message: "我们会尽快与您联系。",
                    button: "返回主页"
                },
                hi: {
                    lang: "hi",
                    title: "आपके ऑर्डर के लिए धन्यवाद",
                    header: "आपके ऑर्डर के लिए धन्यवाद!",
                    message: "हम आपसे जल्द से जल्द संपर्क करेंगे।",
                    button: "मुख्य पृष्ठ पर लौटें"
                },
                es: {
                    lang: "es",
                    title: "Gracias por su pedido",
                    header: "¡Gracias por su pedido!",
                    message: "Nos pondremos en contacto con usted lo antes posible.",
                    button: "Volver a la página principal"
                },
                fr: {
                    lang: "fr",
                    title: "Merci pour votre commande",
                    header: "Merci pour votre commande !",
                    message: "Nous vous contacterons dès que possible.",
                    button: "Retour à la page principale"
                },
                ar: {
                    lang: "ar",
                    title: "شكرا لطلبك",
                    header: "شكرا لطلبك!",
                    message: "سنتصل بك في أقرب وقت ممكن.",
                    button: "العودة إلى الصفحة الرئيسية"
                },
                bn: {
                    lang: "bn",
                    title: "আপনার অর্ডারের জন্য ধন্যবাদ",
                    header: "আপনার অর্ডারের জন্য ধন্যবাদ!",
                    message: "আমরা যত তাড়াতাড়ি সম্ভব আপনার সাথে যোগাযোগ করব।",
                    button: "প্রধান পৃষ্ঠায় ফিরে যান"
                },
                ru: {
                    lang: "ru",
                    title: "Спасибо за ваш заказ",
                    header: "Спасибо за ваш заказ!",
                    message: "Мы свяжемся с вами как можно скорее.",
                    button: "На главную"
                },
                kk: {
                    lang: "kk",
                    title: "Тапсырысыңыз үшін рахмет",
                    header: "Тапсырысыңыз үшін рахмет!",
                    message: "Біз сізбен мүмкіндігінше тезірек хабарласамыз.",
                    button: "Басты бетке оралу"
                },
                pt: {
                    lang: "pt",
                    title: "Obrigado pelo seu pedido",
                    header: "Obrigado pelo seu pedido!",
                    message: "Entraremos em contato com você o mais rápido possível.",
                    button: "Voltar à página principal"
                },
                ur: {
                    lang: "ur",
                    title: "آپ کے آرڈر کے لئے شکریہ",
                    header: "آپ کے آرڈر کے لئے شکریہ!",
                    message: "ہم جلد از جلد آپ سے رابطہ کریں گے۔",
                    button: "مرکزی صفحہ پر واپس جائیں"
                },
                id: {
                    lang: "id",
                    title: "Terima kasih atas pesanan Anda",
                    header: "Terima kasih atas pesanan Anda!",
                    message: "Kami akan menghubungi Anda sesegera mungkin.",
                    button: "Kembali ke halaman utama"
                },
                de: {
                    lang: "de",
                    title: "Vielen Dank für Ihre Bestellung",
                    header: "Vielen Dank für Ihre Bestellung!",
                    message: "Wir werden uns so schnell wie möglich mit Ihnen in Verbindung setzen.",
                    button: "Zurück zur Hauptseite"
                },
                ja: {
                    lang: "ja",
                    title: "ご注文ありがとうございます",
                    header: "ご注文ありがとうございます!",
                    message: "できるだけ早くご連絡いたします。",
                    button: "メインページに戻る"
                },
                pcm: {
                    lang: "pcm",
                    title: "Ténk yu for yu oda",
                    header: "Ténk yu for yu oda!",
                    message: "Wi go kontak yu as kwik as posibul.",
                    button: "Go bak to di main pēj"
                },
                mr: {
                    lang: "mr",
                    title: "आपल्या ऑर्डरसाठी धन्यवाद",
                    header: "आपल्या ऑर्डरसाठी धन्यवाद!",
                    message: "आम्ही शक्य तितक्या लवकर आपल्याशी संपर्क साधू.",
                    button: "मुख्य पृष्ठावर परत जा"
                },
                te: {
                    lang: "te",
                    title: "మీ ఆర్డర్‌కు ధన్యవాదాలు",
                    header: "మీ ఆర్డర్‌కు ధన్యవాదాలు!",
                    message: "మేము వీలైనంత త్వరగా మీతో సంప్రదించడానికి ప్రయత్నిస్తాము.",
                    button: "ప్రధాన పేజీకి తిరిగి వెళ్లండి"
                },
                tr: {
                    lang: "tr",
                    title: "Siparişiniz için teşekkürler",
                    header: "Siparişiniz için teşekkürler!",
                    message: "Sizinle en kısa sürede iletişime geçeceğiz.",
                    button: "Ana sayfaya dön"
                },
                ta: {
                    lang: "ta",
                    title: "உங்கள் ஆர்டருக்கு நன்றி",
                    header: "உங்கள் ஆர்டருக்கு நன்றி!",
                    message: "நாங்கள் உங்களை விரைவில் தொடர்பு கொள்கிறோம்.",
                    button: "முதன்மை பக்கத்திற்கு திரும்பு"
                },
                vi: {
                    lang: "vi",
                    title: "Cảm ơn bạn đã đặt hàng",
                    header: "Cảm ơn bạn đã đặt hàng!",
                    message: "Chúng tôi sẽ liên hệ với bạn sớm nhất có thể.",
                    button: "Quay lại trang chính"
                },
                it: {
                    lang: "it",
                    title: "Grazie per il tuo ordine",
                    header: "Grazie per il tuo ordine!",
                    message: "Ti contatteremo il prima possibile.",
                    button: "Torna alla pagina principale"
                },
                uz: {
                    lang: "uz",
                    title: "Buyurtmangiz uchun rahmat",
                    header: "Buyurtmangiz uchun rahmat!",
                    message: "Biz imkon qadar tezroq siz bilan bog'lanamiz.",
                    button: "Bosh sahifaga qaytish"
                },
                et: {
                    lang: "et",
                    title: "Aitäh tellimuse eest",
                    header: "Aitäh tellimuse eest!",
                    message: "Võtame teiega esimesel võimalusel ühendust.",
                    button: "Tagasi avalehele"
                },
                ka: {
                    lang: "ka",
                    title: "გმადლობთ შეკვეთისთვის",
                    header: "გმადლობთ შეკვეთისთვის!",
                    message: "ჩვენ შეგვეხმიანებით რაც შეიძლება მალე.",
                    button: "დაბრუნება მთავარ გვერდზე"
                },
                pl: {
                    lang: "pl",
                    title: "Dziękujemy za zamówienie",
                    header: "Dziękujemy za zamówienie!",
                    message: "Skontaktujemy się z Tobą jak najszybciej.",
                    button: "Wróć na stronę główną"
                },
                az: {
                    lang: "az",
                    title: "Sifarişiniz üçün təşəkkür edirik",
                    header: "Sifarişiniz üçün təşəkkür edirik!",
                    message: "Mümkün qədər tez sizinlə əlaqə saxlayacağıq.",
                    button: "Əsas səhifəyə qayıdın"
                },
                hu: {
                    lang: "hu",
                    title: "Köszönjük rendelését",
                    header: "Köszönjük rendelését!",
                    message: "A lehető leghamarabb kapcsolatba lépünk Önnel.",
                    button: "Vissza a főoldalra"
                },
                sq: {
                    lang: "sq",
                    title: "Faleminderit për porosinë tuaj",
                    header: "Faleminderit për porosinë tuaj!",
                    message: "Do të përpiqemi të kontaktojmë me ju sa më shpejt të jetë e mundur.",
                    button: "Kthehu te faqja kryesore"
                },
                lv: {
                    lang: "lv",
                    title: "Paldies par pasūtījumu",
                    header: "Paldies par pasūtījumu!",
                    message: "Mēs sazināsimies ar jums pēc iespējas ātrāk.",
                    button: "Atgriezties uz galveno lapu"
                },
                lt: {
                    lang: "lt",
                    title: "Ačiū už jūsų užsakymą",
                    header: "Ačiū už jūsų užsakymą!",
                    message: "Mes su jumis susisieksime kaip įmanoma greičiau.",
                    button: "Grįžti į pagrindinį puslapį"
                },
                ro: {
                    lang: "ro",
                    title: "Vă mulțumim pentru comandă",
                    header: "Vă mulțumim pentru comandă!",
                    message: "Vă vom contacta cât mai curând posibil.",
                    button: "Întoarceți-vă la pagina principală"
                }
            };

            const userLang = navigator.language || navigator.userLanguage;
            const lang = userLang.split('-')[0];

            const texts = translations[lang] || translations['en'];

            document.documentElement.lang = texts.lang;
            document.title = texts.title;
            document.getElementById('title').textContent = texts.header;
            document.getElementById('message').textContent = texts.message;
            document.getElementById('back-button').textContent = texts.button;
        </script>

        <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=<?php echo $_GET["pxl"]
            ?>&ev=Lead&noscript=1" />
    </body>

</html>

Смысла расписывать каждый пункт не вижу, т.к. это уже было сделано со страницой error. Работает абсолютно по тому же принципу, подробнее почитать можно на странице: Создание мультиязычной страницы ошибки

Единственное что тут добавилось нового, это код fb пикселя:

        <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=<?php echo $_GET["pxl"]
            ?>&ev=Lead&noscript=1" />

Если он вам не нужен, сносите эту штуку.

С дизайном и функционалом можете работать в нужную вам сторону, я предоставил основной и полностью работающий макет страницы, дальше можете с ним делать все что взбредет в голову) Этот код можно свободно использовать и адаптировать под свои нужды, чтобы создать эффективную и удобную для пользователя страницу «Thank You».

Ну и для самых торопящихся уже скорее затестить и залиться, прикрепляю страницу архивом.

Оцените статью
BoostClicks