Создание мультиязычной страницы ошибки

Создание мультиязычной страницы ошибки Скрипты и боты

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

Сегодня мы поговорим о создании мультиязычной страницы с ошибкой. Я всегда считал, что такая страница должна быть на каждом лендинге. Она необходима, когда клиент оставляет повторную заявку. Мы проверяем по логам, был ли лид с такими данными, и если да, то отправляем пользователя на страницу ошибки.

Применение и создание страницы ошибки (error.php)

  • Повторная заявка: Если клиент оставил повторную заявку, мы проверяем это по логам. Если данные совпадают, перенаправляем пользователя на страницу ошибки.
  • Ошибка сервера партнерской программы: В случае ошибки со стороны сервера партнерской программы (ПП), мы также можем отправить пользователя на страницу ошибки по аналогии.

Чем качественнее и лучше мы будем делать лендинги, тем выше будут показатели команды в целом. Задача технического специалиста — проработать как можно больше, на первый взгляд, мелочей, чтобы команда росла вместе с разработчиком.

Задача

Создать универсальную страницу ошибки для лендингов, подходящую для любой CPA сети.

Для примера, я сделал простую страницу в плане дизайна, которую можно переделать под свои нужды. Ключевые моменты опишу ниже.

Как выглядит страница сейчас


Давайте подробно разберем HTML и JavaScript код нашей старницы error

HTML Часть

Структура HTML
<!DOCTYPE html>
<html lang="en">

Начинается с декларации типа документа, определяющей HTML5. Устанавливаем язык страницы по умолчанию — английский.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Error</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

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

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

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

В разделе <head> мы устанавливаем кодировку UTF-8 и мета-тег viewport для корректного отображения на мобильных устройствах. Внутри тега <style> добавлены стили для страницы:

  • body: стиль для всего тела страницы, устанавливаем шрифт Arial, серый фон, центрирование содержимого, высота 100% от видимой области экрана и убираем отступы.
  • .container: стиль для контейнера с белым фоном, внутренним отступом, закругленными углами, тенью и центрированием текста.
  • .button: стиль для кнопки с синей заливкой, белым текстом, внутренним отступом, без подчеркивания, закругленными углами и отступом сверху. Также добавлен эффект при наведении.
<body>
    <div class="container">
        <h1 id="title"></h1>
        <p id="message"></p>
        <a id="back-button" href="javascript:history.back()" class="button"></a>
    </div>

Внутри <body> у нас контейнер с тремя элементами:

  • <h1 id="title"></h1>: Заголовок страницы.
  • <p id="message"></p>: Сообщение об ошибке.
  • <a id="back-button" href="javascript:history.back()" class="button"></a>: Кнопка для возвращения на предыдущую страницу.

JavaScript Часть

Объявление переводов:

const translations = {
    en: {
        lang: "en",
        title: "Error",
        header: "Sorry!",
        message: "It looks like you have already submitted your request. Thank you for your patience. We will try to contact you as soon as possible. Please give us a little more time. Thank you!",
        button: "Return to the main page"
    },
    ru: {
        lang: "ru",
        title: "Ошибка",
        header: "Извините!",
        message: "Похоже, что вы уже отправили заявку. Благодарим вас за терпение. Мы постараемся связаться с вами как можно скорее. Пожалуйста, дайте нам еще немного времени. Спасибо!",
        button: "Вернуться на главную страницу"
    },
    // Другие переводы ...
};

Здесь мы создаем объект translations, содержащий переводы для разных языков. Для каждого языка определены ключи: lang, title, header, message, и button.

Определение языка пользователя:

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

Определяется язык пользователя из настроек браузера (navigator.language или navigator.userLanguage). Извлекается основной язык (до дефиса). Затем выбираются соответствующие переводы из объекта translations. Если язык пользователя не найден в translations, используется английский (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;

Устанавливаются значения атрибутов и текстовых содержимостей элементов на странице:

  • Атрибут lang для <html> элемента.
  • Текст заголовка страницы.
  • Текст для заголовка ошибки.
  • Сообщение об ошибке.
  • Текст кнопки возврата.

Этот скрипт делает страницу мультиязычной, автоматически подстраивая ее под язык пользователя, используя переводы из объекта translations.

Полный код страницы error выглядит следующим образом:

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

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Error</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                background-color: #f4f4f4;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                margin: 0;
            }

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

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

            .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="button"></a>
        </div>

        <script>
            const translations = {
                en: {
                    lang: "en",
                    title: "Error",
                    header: "Sorry!",
                    message: "It looks like you have already submitted your request. Thank you for your patience. We will try to contact you as soon as possible. Please give us a little more time. Thank you!",
                    button: "Return to the main page"
                },
                zh: {
                    lang: "zh",
                    title: "错误",
                    header: "对不起!",
                    message: "看起来您已经提交了请求。感谢您的耐心等待。我们会尽快与您联系。请再给我们一点时间。谢谢!",
                    button: "返回主页"
                },
                hi: {
                    lang: "hi",
                    title: "त्रुटि",
                    header: "माफ़ करना!",
                    message: "ऐसा लगता है कि आपने पहले ही अनुरोध भेज दिया है। आपके धैर्य के लिए धन्यवाद। हम यथाशीघ्र आपसे संपर्क करने की कोशिश करेंगे। कृपया हमें थोड़ा और समय दें। धन्यवाद!",
                    button: "मुख्य पृष्ठ पर लौटें"
                },
                es: {
                    lang: "es",
                    title: "Error",
                    header: "¡Lo siento!",
                    message: "Parece que ya ha enviado su solicitud. Gracias por su paciencia. Intentaremos ponernos en contacto con usted lo antes posible. Por favor, dénos un poco más de tiempo. ¡Gracias!",
                    button: "Volver a la página principal"
                },
                fr: {
                    lang: "fr",
                    title: "Erreur",
                    header: "Désolé!",
                    message: "Il semble que vous ayez déjà soumis votre demande. Merci pour votre patience. Nous essayerons de vous contacter dès que possible. Veuillez nous accorder un peu plus de temps. Merci!",
                    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: "Erro",
                    header: "Desculpe!",
                    message: "Parece que você já enviou sua solicitação. Obrigado pela sua paciência. Tentaremos entrar em contato com você o mais rápido possível. Por favor, dê-nos um pouco mais de tempo. Obrigado!",
                    button: "Voltar à página principal"
                },
                ur: {
                    lang: "ur",
                    title: "خرابی",
                    header: "معذرت!",
                    message: "ایسا لگتا ہے کہ آپ نے پہلے ہی درخواست بھیج دی ہے۔ آپ کے صبر کا شکریہ۔ ہم جلد از جلد آپ سے رابطہ کرنے کی کوشش کریں گے۔ براہ کرم ہمیں تھوڑا اور وقت دیں۔ شکریہ!",
                    button: "مرکزی صفحہ پر واپس جائیں"
                },
                id: {
                    lang: "id",
                    title: "Kesalahan",
                    header: "Maaf!",
                    message: "Sepertinya Anda sudah mengirimkan permintaan Anda. Terima kasih atas kesabaran Anda. Kami akan mencoba menghubungi Anda secepat mungkin. Mohon beri kami sedikit lebih banyak waktu. Terima kasih!",
                    button: "Kembali ke halaman utama"
                },
                de: {
                    lang: "de",
                    title: "Fehler",
                    header: "Entschuldigung!",
                    message: "Es sieht so aus, als hätten Sie Ihre Anfrage bereits gesendet. Vielen Dank für Ihre Geduld. Wir werden versuchen, so schnell wie möglich mit Ihnen in Kontakt zu treten. Bitte geben Sie uns noch etwas Zeit. Danke!",
                    button: "Zurück zur Hauptseite"
                },
                ja: {
                    lang: "ja",
                    title: "エラー",
                    header: "ごめんなさい!",
                    message: "リクエストは既に送信されているようです。ご辛抱いただきありがとうございます。できるだけ早くご連絡いたします。もう少しお時間をください。ありがとうございます!",
                    button: "メインページに戻る"
                },
                pcm: {
                    lang: "pcm",
                    title: "Erọ",
                    header: "Sọri!",
                    message: "E be like se yu don alredi send yu rikwést. Ténk yu for yu peshens. Wi go tray to kontak yu as kwik as posibul. Abeg giv us smọl mor taym. Ténk yu!",
                    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: "Hata",
                    header: "Üzgünüz!",
                    message: "Görünüşe göre isteğinizi zaten gönderdiniz. Sabırlı olduğunuz için teşekkür ederiz. Sizinle en kısa sürede iletişime geçmeye çalışacağız. Lütfen bize biraz daha zaman verin. Teşekkürler!",
                    button: "Ana sayfaya dön"
                },
                ta: {
                    lang: "ta",
                    title: "பிழை",
                    header: "மன்னிக்கவும்!",
                    message: "நீங்கள் ஏற்கனவே உங்கள் கோரிக்கையை சமர்ப்பித்துள்ளீர்கள் போல தெரிகிறது. உங்கள் பொறுமைக்கு நன்றி. எங்கள் விரைவில் உங்களை தொடர்புகொள்ள முயற்சிக்கிறோம். தயவுசெய்து எங்களுக்கு சிறிது நேரம் கொடுங்கள். நன்றி!",
                    button: "முதன்மை பக்கத்திற்கு திரும்பு"
                },
                vi: {
                    lang: "vi",
                    title: "Lỗi",
                    header: "Xin lỗi!",
                    message: "Có vẻ như bạn đã gửi yêu cầu của mình. Cảm ơn bạn đã kiên nhẫn. Chúng tôi sẽ cố gắng liên hệ với bạn sớm nhất có thể. Xin vui lòng cho chúng tôi thêm một chút thời gian. Cảm ơn bạn!",
                    button: "Quay lại trang chính"
                },
                it: {
                    lang: "it",
                    title: "Errore",
                    header: "Spiacenti!",
                    message: "Sembra che tu abbia già inviato la tua richiesta. Grazie per la tua pazienza. Cercheremo di contattarti il prima possibile. Per favore, dacci ancora un po' di tempo. Grazie!",
                    button: "Torna alla pagina principale"
                },
                uz: {
                    lang: "uz",
                    title: "Xato",
                    header: "Kechirasiz!",
                    message: "Siz allaqachon so'rovingizni yuborgansiz. Sabringiz uchun rahmat. Siz bilan imkon qadar tezroq bog'lanishga harakat qilamiz. Iltimos, bizga biroz vaqt bering. Rahmat!",
                    button: "Bosh sahifaga qaytish"
                },
                et: {
                    lang: "et",
                    title: "Viga",
                    header: "Vabandust!",
                    message: "Tundub, et olete oma taotluse juba esitanud. Täname teid kannatlikkuse eest. Püüame teiega võimalikult kiiresti ühendust võtta. Palun andke meile veel veidi aega. Aitäh!",
                    button: "Tagasi avalehele"
                },
                ka: {
                    lang: "ka",
                    title: "შეცდომა",
                    header: "ბოდიში!",
                    message: "ჩანს, რომ უკვე გაგზავნეთ თქვენი მოთხოვნა. გმადლობთ თქვენი მოთმინებისთვის. ჩვენ ვეცდებით დაგიკავშირდეთ რაც შეიძლება მალე. გთხოვთ მოგვცეთ ცოტა მეტი დრო. გმადლობთ!",
                    button: "დაბრუნება მთავარ გვერდზე"
                },
                pl: {
                    lang: "pl",
                    title: "Błąd",
                    header: "Przepraszamy!",
                    message: "Wygląda na to, że już przesłałeś swoje zgłoszenie. Dziękujemy za cierpliwość. Postaramy się skontaktować z Tobą tak szybko, jak to możliwe. Proszę, daj nam jeszcze trochę czasu. Dziękuję!",
                    button: "Wróć na stronę główną"
                },
                az: {
                    lang: "az",
                    title: "Səhv",
                    header: "Bağışlayın!",
                    message: "Görünür, artıq sorğunuzu göndərmisiniz. Səbriniz üçün təşəkkür edirik. Mümkün qədər tez sizinlə əlaqə saxlamağa çalışacağıq. Zəhmət olmasa, bizə bir az daha vaxt verin. Təşəkkür edirik!",
                    button: "Əsas səhifəyə qayıdın"
                },
                hu: {
                    lang: "hu",
                    title: "Hiba",
                    header: "Sajnáljuk!",
                    message: "Úgy tűnik, hogy már elküldte a kérését. Köszönjük a türelmét. Megpróbálunk a lehető leghamarabb kapcsolatba lépni Önnel. Kérjük, adjon nekünk még egy kis időt. Köszönjük!",
                    button: "Vissza a főoldalra"
                },
                sq: {
                    lang: "sq",
                    title: "Gabim",
                    header: "Më falni!",
                    message: "Duket se tashmë e keni dërguar kërkesën tuaj. Faleminderit për durimin tuaj. Ne do të përpiqemi të kontaktojmë me ju sa më shpejt të jetë e mundur. Ju lutemi na jepni pak më shumë kohë. Faleminderit!",
                    button: "Kthehu te faqja kryesore"
                },
                lv: {
                    lang: "lv",
                    title: "Kļūda",
                    header: "Atvainojiet!",
                    message: "Izskatās, ka jūs jau esat iesniedzis savu pieprasījumu. Paldies par jūsu pacietību. Mēs centīsimies sazināties ar jums pēc iespējas ātrāk. Lūdzu, dodiet mums mazliet vairāk laika. Paldies!",
                    button: "Atgriezties uz galveno lapu"
                },
                lt: {
                    lang: "lt",
                    title: "Klaida",
                    header: "Atsiprašome!",
                    message: "Panašu, kad jau pateikėte savo užklausą. Ačiū už jūsų kantrybę. Mes stengsimės kuo greičiau su jumis susisiekti. Prašome suteikti mums šiek tiek daugiau laiko. Ačiū!",
                    button: "Grįžti į pagrindinį puslapį"
                },
                ro: {
                    lang: "ro",
                    title: "Eroare",
                    header: "Ne pare rău!",
                    message: "Se pare că ați trimis deja solicitarea dvs. Vă mulțumim pentru răbdare. Vom încerca să vă contactăm cât mai curând posibil. Vă rugăm să ne acordați puțin mai mult timp. Mulțumim!",
                    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>
    </body>

</html>

Создание мультиязычной страницы ошибки — важный аспект для улучшения пользовательского опыта на вашем лендинге. Она позволяет правильно обработать повторные заявки или ошибки сервера, предоставляя пользователям понятные сообщения на их родном языке. Такой подход не только улучшает взаимодействие с пользователями, но и повышает конверт на дистанции.

Мы рассмотрели базовый пример реализации такой страницы, который легко адаптируется под любые нужды и CPA сети. Не забывайте прорабатывать все мелочи на вашем лендинге, ведь именно они могут существенно улучшить показатели вашей команды.

Не забывайте что нам еще нужна и важна правильная страница: Спасибо за заказ. Посмотреть и скачать ее можно тут: Мультиязычная страница «Спасибо за заказ»

Если у вас возникнут вопросы или предложения, мы всегда рады обсудить их в нашем Telegram-канале. Для самых ленивых булочек, ниже архивом прикрепил страницу ошибки…

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