Сучасні лендинги потребують постійного оновлення, щоб залишатися ефективними. Динамічні елементи, валідація номерів, актуальні дати та захист від спаму допомагають збільшити конверсію та знизити витрати на рекламу. У цьому матеріалі розглянемо кілька корисних JavaScript-скриптів, які можна впровадити вже сьогодні.
1. Актуалізація дат у коментарях
Щоб лендинг виглядав живим, можна оновлювати дати коментарів за допомогою JavaScript. Це створює ефект активності та підвищує довіру аудиторії.
Простий код для відображення поточної дати:
<span class="js-date">
<script type="text/javascript">
var d = new Date();
var day = d.getDate();
var month = d.getMonth() + 1;
var year = d.getFullYear();
document.write(day + "." + month + "." + year);
</script>
</span>Щоб вказати дату попереднього дня, використовуйте цей варіант:
<span class="js-date">
<script type="text/javascript">
var d = new Date();
d.setDate(d.getDate() - 1);
var day = d.getDate();
var month = d.getMonth() + 1;
var year = d.getFullYear();
document.write(day + "." + month + "." + year);
</script>
</span>Змінюючи -1 на -2, -3, можна відображати різні дати.
2. Валідація номерів телефонів для будь-якого гео
Помилка у номері телефону може коштувати вам потенційного клієнта. Щоб зменшити відсоток помилкових заявок, додайте універсальний валідатор номерів:
У
<head>додайте посилання:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.15/css/intlTelInput.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.15/js/intlTelInput.min.js"></script>Додайте скрипт для обробки номерів:
<script>
document.addEventListener('DOMContentLoaded', () => {
var phones = document.querySelectorAll('input[name=phone]');
phones.forEach(phone => {
var iti = window.intlTelInput(phone, {
initialCountry: 'UA',
nationalMode: true,
autoPlaceholder: 'aggressive',
utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.15/js/utils.min.js'
});
phone.addEventListener('input', () => {
phone.setCustomValidity(iti.isValidNumber() ? '' : 'Невірний номер телефону');
});
});
});
</script>Замініть initialCountry на код потрібної країни.
3. Встановлення пікселя через посилання
Щоб відстежувати дії користувачів, можна передавати піксель через URL:
У
index.phpдодайте:
<?php setcookie("pixel", $_GET["pixel"], time()+60*60*24); ?>На thank-you page вставте:
<img height="1" width="1" src="https://www.facebook.com/tr?id=<?=$_COOKIE["pixel"]?>&ev=Lead&noscript=1"/>Приклад URL:
https://test.com/111111?pixel=вашпіксель4. Аналіз поведінки користувачів через Clarity
Microsoft Clarity – безкоштовний інструмент для відстеження дій користувачів.
Зареєструйтеся в Clarity та створіть проєкт.
Встановіть скрипт на лендинг:
<script type="text/javascript">
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "ваш-ідентифікатор");
</script>Тепер можна аналізувати взаємодію користувачів із сайтом.
5. Захист від спаму та дублів заявок
Щоб виключити повторні заявки протягом 30 хвилин, використовуйте цей скрипт:
Створіть файл
antispam.jsз вмістом:
function setCookie(name, value, minutes) {
var date = new Date();
date.setTime(date.getTime() + (minutes * 60 * 1000));
document.cookie = name + "=" + value + "; expires=" + date.toUTCString() + "; path=/";
}
function getCookie(name) {
var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
return match ? match[2] : null;
}
document.addEventListener('DOMContentLoaded', () => {
if (getCookie('submitted')) {
document.querySelectorAll('form button').forEach(btn => btn.disabled = true);
}
});
document.querySelector('form').addEventListener('submit', () => {
setCookie('submitted', 'true', 30);
});Підключіть перед
</body>:
<script src="antispam.js"></script>Тепер кнопка надсилання заявки буде заблокована на 30 хвилин.
Висновок
Використання цих JavaScript-скриптів допоможе:
✅ Підвищити довіру до лендингу
✅ Зменшити кількість фейкових заявок
✅ Покращити користувацький досвід
✅ Захистити від спаму та повторних надсилань
✅ Відстежувати поведінку користувачів
Застосовуйте ці рішення та підвищуйте конверсію! 🚀
Приєднуйтесь до партнерської мережі Aila Lab – оффери без модерації та прибуткові вертикалі https://ailalab.com/
