Як підвищити ефективність лендингів за допомогою JavaScript-скриптів

Сучасні лендинги потребують постійного оновлення, щоб залишатися ефективними. Динамічні елементи, валідація номерів, актуальні дати та захист від спаму допомагають збільшити конверсію та знизити витрати на рекламу. У цьому матеріалі розглянемо кілька корисних 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. Валідація номерів телефонів для будь-якого гео

Помилка у номері телефону може коштувати вам потенційного клієнта. Щоб зменшити відсоток помилкових заявок, додайте універсальний валідатор номерів:

1. У <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>

2. Додайте скрипт для обробки номерів:

<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:

1. У index.php додайте:

<?php setcookie("pixel", $_GET["pixel"], time()+60*60*24); ?>

2. На thank-you page вставте:

<img height="1" width="1" src="https://www.facebook.com/tr?id=<?=$_COOKIE["pixel"]?>&ev=Lead&noscript=1"/>

3. Приклад URL:

https://test.com/111111?pixel=вашпіксель

4. Аналіз поведінки користувачів через Clarity

Microsoft Clarity – безкоштовний інструмент для відстеження дій користувачів.

1. Зареєструйтеся в Clarity та створіть проєкт.

2. Встановіть скрипт на лендинг:

<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 хвилин, використовуйте цей скрипт:

1. Створіть файл 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);
});

2. Підключіть перед </body>:

<script src="antispam.js"></script>

Тепер кнопка надсилання заявки буде заблокована на 30 хвилин.

Висновок

Використання цих JavaScript-скриптів допоможе:

✅ Підвищити довіру до лендингу

✅ Зменшити кількість фейкових заявок

✅ Покращити користувацький досвід

✅ Захистити від спаму та повторних надсилань

✅ Відстежувати поведінку користувачів

Застосовуйте ці рішення та підвищуйте конверсію! 🚀

Приєднуйтесь до партнерської мережі Aila Lab – оффери без модерації та прибуткові вертикалі https://ailalab.com/