Slide Captcha - Демонстрация защиты от ботов

Как работает капча

Капча активируется автоматически при наличии UTM параметра ?bot_check=yes в URL (по умолчанию).

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

✨ Открыть с капчей

Скачать исходный код

Весь код капчи находится в одном файле - просто скачайте и подключите к вашему сайту:

📄

slide-captcha.js

Самодостаточный JavaScript файл (12 KB)

📥 Скачать JS

Пример подключения

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Моя страница</title>
</head>
<body>
    <h1>Добро пожаловать!</h1>

    <!-- Подключаем капчу перед закрывающим тегом body -->
    <script src="slide-captcha.js"></script>
</body>
</html>

Установка

Вариант 1: Параметры по умолчанию

Капча активируется при ?bot_check=yes

<!-- Добавьте скрипт перед закрывающим тегом </body> -->
<script src="slide-captcha.js"></script>

Вариант 2: Капча на весь трафик

Для активации капчи для всех посетителей без параметров в URL:

<!-- Капча будет показываться всегда -->
<script src="slide-captcha.js"
        data-captcha-param="always"
        data-captcha-key=""></script>

Вариант 3: Кастомные параметры

Используйте data-атрибуты для настройки:

<!-- Капча активируется при ?verify=true -->
<script src="slide-captcha.js"
        data-captcha-param="verify"
        data-captcha-key="true"></script>

<!-- Капча активируется при ?utm_source=ads -->
<script src="slide-captcha.js"
        data-captcha-param="utm_source"
        data-captcha-key="ads"></script>

Параметры конфигурации

data-captcha-param - название параметра в URL (по умолчанию: bot_check)
data-captcha-key - значение параметра для активации (по умолчанию: yes)
data-ym-counter - ID счетчика Яндекс.Метрики (опционально, для внешнего подключения)

Примеры URL для активации

https://example.com/?bot_check=yes (по умолчанию)
https://example.com/page?bot_check=yes&utm_source=google
https://example.com/?verify=true (с кастомными параметрами)

Особенности

🎨 Минималистичный дизайн

📱 Поддержка мыши и тач-устройств

📐 Адаптивная верстка

✨ Плавные анимации

🔧 Легкая настройка через конфиг

⚡ Не требует зависимостей

📊 Интеграция с Яндекс.Метрикой

💾 Сохранение состояния в сессии

Интеграция с Яндекс.Метрикой

Капча автоматически отправляет события в Яндекс.Метрику (если она установлена):

captcha_shown - капча показана пользователю
captcha_passed - пользователь успешно прошел капчу

Автоматическое определение счетчика

Скрипт автоматически находит ID счетчика на странице клиента. Не требует настройки.

Указание ID счетчика (для внешнего подключения)

Если скрипт подключается с внешнего домена, укажите ID счетчика явно:

<!-- Подключение с внешнего домена -->
<script src="https://yoursite.com/slide-captcha.js"
        data-ym-counter="12345678"></script>

<!-- С дополнительными параметрами -->
<script src="https://yoursite.com/slide-captcha.js"
        data-captcha-param="bot_check"
        data-captcha-key="yes"
        data-ym-counter="12345678"></script>

Где найти ID счетчика: Яндекс.Метрика → Выберите сайт → ID в URL: metrika.yandex.ru/dashboard?id=12345678

Создайте цели captcha_shown и captcha_passed в интерфейсе Яндекс.Метрики для отслеживания статистики.