Привет! Сегодня разберем, как сделать и настроить универсальную маску для номера телефона в трекере Кейтаро. Наша задача как вебмастеров — обеспечивать максимально качественный трафик. Все преимущества такой работы объяснять, думаю, не нужно, ведь результаты мы видим в Кейтаро и итоговых ROI.
Сегодня перед нами стоит задача сделать универсальную маску для наших лендингов, подходящую под любое гео. Исходный код до улучшений был взят у «Желтого».
Универсальная маска для телефонов в Keitaro
Этот JavaScript-код выполняет настройку и инициализацию ввода номера телефона с использованием библиотеки intl-tel-input, которая обеспечивает удобный способ ввода и форматирования международных телефонных номеров. Давайте разберем этот код поэтапно:

Основные функции кода?
- Скрытие флагов стран: Скрипт скрывает флаги стран в элементе ввода телефона.
- Подключение jQuery: Загружает и подключает библиотеку jQuery.
- Подключение intl-tel-input: Загружает и подключает библиотеку intl-tel-input.
- Инициализация 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>
На этом все. Увидимся в моем ТГ канале!