Универсальная маска для поля с номером телефона в Кейтаро

универсальная маска для телефонов Скрипты и боты

Привет! Сегодня разберем, как сделать и настроить универсальную маску для номера телефона в трекере Кейтаро. Наша задача как вебмастеров — обеспечивать максимально качественный трафик. Все преимущества такой работы объяснять, думаю, не нужно, ведь результаты мы видим в Кейтаро и итоговых ROI.

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

Универсальная маска для телефонов в Keitaro

Этот JavaScript-код выполняет настройку и инициализацию ввода номера телефона с использованием библиотеки intl-tel-input, которая обеспечивает удобный способ ввода и форматирования международных телефонных номеров. Давайте разберем этот код поэтапно:

Основные функции кода?

  1. Скрытие флагов стран: Скрипт скрывает флаги стран в элементе ввода телефона.
  2. Подключение jQuery: Загружает и подключает библиотеку jQuery.
  3. Подключение intl-tel-input: Загружает и подключает библиотеку intl-tel-input.
  4. Инициализация intl-tel-input: Настраивает intl-tel-input для обработки ввода телефонных номеров на странице.

Детальный разбор кода

1. Скрытие флагов стран

const style = document.createElement('style');
style.textContent = `
        .iti__flag-container {
            display: none;
        }
        `;
document.head.append(style);
  • Создание элемента стиля: Создается элемент <style>.
  • Скрытие флагов: В элемент добавляется правило CSS, которое скрывает контейнеры с флагами стран, используя класс .iti__flag-container.
  • Добавление стиля в <head>: Элемент стиля добавляется в <head> документа.

2. Подключение jQuery

const scriptJQuery = document.createElement('script');
scriptJQuery.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js";
scriptJQuery.integrity = "sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==";
scriptJQuery.crossOrigin = "anonymous";
scriptJQuery.referrerPolicy = "no-referrer";
scriptJQuery.defer = true;
document.head.append(scriptJQuery);
  • Создание элемента скрипта: Создается элемент <script>.
  • Установка атрибутов: Устанавливаются атрибуты для загрузки jQuery из CDN с указанием src, integrity, crossOrigin и referrerPolicy.
  • Добавление скрипта в <head>: Скрипт добавляется в <head> документа.

3. Подключение и инициализация intl-tel-input

scriptJQuery.onload = function () {
    const scriptIntlTelInput = document.createElement('script');
    scriptIntlTelInput.src = "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js";
    document.head.append(scriptIntlTelInput);

    scriptIntlTelInput.onload = function () {
        window.addEventListener('load', () => {
            var countryInput = document.querySelector('input[name=country]');
            var countryCode = countryInput ? countryInput.value : null;

            var phones = document.querySelectorAll('input[name=phone]');
            phones.forEach(phone => {
                processInput(phone, countryCode);
            });
        });

        function processInput(phone, countryCode) {
            var itiOptions = {
                allowDropdown: true,
                nationalMode: true,
                autoPlaceholder: 'aggressive',
                formatOnDisplay: true,
                separateDialCode: true,
                utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/19.2.16/js/utils.js'
            };

            if (countryCode) {
                itiOptions.initialCountry = countryCode;
            }

            var iti = window.intlTelInput(phone, itiOptions);

            if (countryCode) {
                updateDialCode(phone, iti.getSelectedCountryData().dialCode);
            }

            phone.addEventListener('input', () => {
                phone.setCustomValidity('');
                if (!iti.isValidNumber()) {
                    phone.setCustomValidity('Invalid phone number format.');
                }
            });

            phone.addEventListener('countrychange', function () {
                updateDialCode(phone, iti.getSelectedCountryData().dialCode);
            });

            phone.addEventListener('focus', function () {
                if (!phone.value.trim() && countryCode) {
                    updateDialCode(phone, iti.getSelectedCountryData().dialCode);
                }
            });
        }

        function updateDialCode(phone, dialCode) {
            phone.value = `+${dialCode} `;
        }
    };
};

Загрузка intl-tel-input: После загрузки jQuery загружается скрипт intl-tel-input.Добавление обработчика загрузки страницы: После загрузки скрипта intl-tel-input добавляется обработчик события загрузки страницы (window.addEventListener('load', ...)).Получение значений страны и телефонов: Из документа выбираются элементы с name=country и name=phone.Инициализация intl-tel-input: Для каждого телефонного ввода вызывается processInput с настройками для intl-tel-input.Настройки intl-tel-input:

  • allowDropdown: Разрешает выпадающий список стран.
  • nationalMode: Включает национальный режим (без международного кода по умолчанию).
  • autoPlaceholder: Включает агрессивное автозаполнение плейсхолдера.
  • formatOnDisplay: Форматирует номер при отображении.
  • separateDialCode: Показывает международный код отдельно.
  • utilsScript: Ссылка на скрипт утилит для дополнительных функций форматирования и валидации.

Обработка ввода телефона:

  • Валидация номера: При вводе номера проверяется его валидность. Если номер недействителен, выводится сообщение об ошибке.
  • Изменение страны: При изменении страны обновляется код страны в поле ввода.
  • Фокусировка на поле: При фокусировке, если поле пустое, добавляется код страны.

Этот скрипт настраивает ввод телефонных номеров с помощью библиотеки intl-tel-input, скрывая при этом флаги стран. Он загружает необходимые библиотеки и инициализирует ввод телефонных номеров с валидацией и форматированием, обеспечивая удобство и правильность ввода номеров.

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

Не забывайте что скрипт берет значение страны из нашей формы, точнее инпута в ней:

<input type="hidden" name="country" value="RU">

Если вы льете 1 проклу на несколько ГЕО, можно сделать как показаноо на примере ниже, в макросс кейтаро автоматически подставит страну нашего юзера.

<input type="hidden" name="country" value="{country_code}">

Полный код универсальной маски Keitaro для ввода номера телефона:

const style = document.createElement('style');
style.textContent = `
        .iti__flag-container {
            display: none;
        }
        `;
document.head.append(style);

const scriptJQuery = document.createElement('script');
scriptJQuery.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js";
scriptJQuery.integrity = "sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==";
scriptJQuery.crossOrigin = "anonymous";
scriptJQuery.referrerPolicy = "no-referrer";
document.head.append(scriptJQuery);

scriptJQuery.onload = function () {
    const scriptIntlTelInput = document.createElement('script');
    scriptIntlTelInput.src = "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js";
    document.head.append(scriptIntlTelInput);

    scriptIntlTelInput.onload = function () {
        window.addEventListener('load', () => {
            // Получаем значение страны из скрытого инпута
            var countryInput = document.querySelector('input[name=country]');
            var countryCode = countryInput ? countryInput.value : null;

            var phones = document.querySelectorAll('input[name=phone]');
            phones.forEach(phone => {
                processInput(phone, countryCode);
            });
        });

        function processInput(phone, countryCode) {
            var itiOptions = {
                allowDropdown: true,
                nationalMode: true,
                autoPlaceholder: 'aggressive',
                formatOnDisplay: true,
                separateDialCode: true,
                utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/19.2.16/js/utils.js'
            };

            if (countryCode) {
                itiOptions.initialCountry = countryCode;
            }

            var iti = window.intlTelInput(phone, itiOptions);

            if (countryCode) {
                updateDialCode(phone, iti.getSelectedCountryData().dialCode);
            }

            phone.addEventListener('input', () => {
                phone.setCustomValidity('');
                if (!iti.isValidNumber()) {
                    phone.setCustomValidity('Invalid phone number format.');
                }
            });

            phone.addEventListener('countrychange', function () {
                updateDialCode(phone, iti.getSelectedCountryData().dialCode);
            });

            phone.addEventListener('focus', function () {
                if (!phone.value.trim() && countryCode) {
                    updateDialCode(phone, iti.getSelectedCountryData().dialCode);
                }
            });
        }

        function updateDialCode(phone, dialCode) {
            phone.value = `+${dialCode} `;
        }
    };
};

Так же данную маску можно подключить обычным внешним сриптом, разместив его перед закрывающим тегом /body:

<script src="https://leontev-e.github.io/my-scripts/boostclicks-script.js"></script>

На этом все. Увидимся в моем ТГ канале!

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