Нужно ли менять телефонные ссылки на сайте?

Нет. Достаточно, чтобы ссылки на номера были размечены в формате tel:+79991234567. Скрипт сам заменит прямой переход на подтверждение со слайдером.

Можно ли использовать свой счётчик Метрики?

Да. Введите нужный номер счётчика в поле генератора, и код будет сформирован с ним.

Скрипт считает фактический разговор?

Нет. Он фиксирует подтверждённый переход к набору номера. Для учёта состоявшихся разговоров нужна коллтрекинг-система или данные оператора.

Обучение

Антибот-слайдер для звонков

Онлайн генератор JS-скрипта для отслеживания реальных кликов по телефону в Яндекс Метрике.

Сервис формирует готовый код для ссылок tel: на сайте. Скрипт перехватывает клик по номеру телефона, показывает короткое подтверждение со слайдером и отправляет цели в Яндекс Метрику только после действия пользователя.

Превью звонка

+7 999 123-45-67

Кнопка имитирует клик по ссылке tel:+79991234567.

Подтвердите звонок

Проведите ползунок вправо, чтобы открыть набор номера

→

Проведите вправо

Защита от ботов

Готовый код

Вставьте код перед закрывающим тегом body или в HTML-блок сайта.

<!-- Антибот-слайдер для звонков — GAIPHUTDINOV.RU -->
<script>
/**
 * Антибот-слайдер для звонков.
 * Отслеживает реальные клики по tel:-ссылкам и отправляет цели Яндекс Метрики
 * только после подтверждения слайдером.
 */
(function () {
  var COUNTER_ID = 12345678;
  var OVERLAY_ID = 'gaiphutdinov-phone-slider';
  var lastTriggerTs = 0;

  function sendGoal(goal) {
    if (typeof window.ym !== 'function') return;
    try {
      window.ym(COUNTER_ID, 'reachGoal', goal);
    } catch (err) {}
  }

  function hardStop(event) {
    if (!event) return;
    event.preventDefault();
    event.stopPropagation();
    if (typeof event.stopImmediatePropagation === 'function') {
      event.stopImmediatePropagation();
    }
    event.cancelBubble = true;
  }

  function normalizePhoneUrl(value) {
    if (!value) return '';
    var phoneUrl = String(value).trim();
    if (phoneUrl.toLowerCase().indexOf('tel:') === 0) return phoneUrl;
    var digits = phoneUrl.replace(/[^0-9+]/g, '');
    return digits ? 'tel:' + digits : '';
  }

  function patchLink(link) {
    if (!link || link.nodeType !== 1) return null;
    if (link.getAttribute('data-phone-patched') === '1') return link;

    var href = link.getAttribute('href');
    var phoneUrl = normalizePhoneUrl(href);
    if (!phoneUrl) return null;

    var clone = link.cloneNode(true);
    clone.setAttribute('data-phone-patched', '1');
    clone.setAttribute('data-phone-href', phoneUrl);
    clone.setAttribute('href', '#');
    clone.removeAttribute('target');
    clone.removeAttribute('onclick');
    clone.onclick = null;

    if (link.parentNode) {
      link.parentNode.replaceChild(clone, link);
    }

    return clone;
  }

  function patchAll(root) {
    var scope = root && root.querySelectorAll ? root : document;
    if (scope.matches && scope.matches('a[href^="tel:"]')) patchLink(scope);

    var links = scope.querySelectorAll ? scope.querySelectorAll('a[href^="tel:"]') : [];
    for (var index = 0; index < links.length; index += 1) {
      patchLink(links[index]);
    }
  }

  function closeOverlay() {
    var overlay = document.getElementById(OVERLAY_ID);
    if (overlay && overlay.parentNode) {
      overlay.parentNode.removeChild(overlay);
    }
  }

  function showSliderAndRedirect(phoneUrl) {
    if (document.getElementById(OVERLAY_ID)) return;

    var overlay = document.createElement('div');
    overlay.id = OVERLAY_ID;
    overlay.style.cssText = 'position:fixed;inset:0;background:rgba(15,23,42,.62);z-index:2147483647;display:flex;align-items:center;justify-content:center;padding:18px;cursor:pointer;';

    var box = document.createElement('div');
    box.style.cssText = 'position:relative;width:min(360px,100%);border-radius:18px;background:#fff;padding:28px 24px 24px;text-align:center;box-shadow:0 18px 60px rgba(15,23,42,.3);font-family:Arial,sans-serif;cursor:default;';
    box.innerHTML =
      '<button id="phone-close" type="button" aria-label="Закрыть" style="position:absolute;top:10px;right:10px;width:30px;height:30px;border:0;border-radius:50%;background:#f1f5f9;color:#475569;font-size:19px;line-height:30px;cursor:pointer;">×</button>' +
      '<div style="font-size:20px;font-weight:700;color:#111827;margin-bottom:10px;">Подтвердите звонок</div>' +
      '<div style="font-size:14px;line-height:1.45;color:#475569;margin-bottom:18px;">Проведите ползунок вправо, чтобы открыть набор номера</div>' +
      '<div id="phone-slider" style="position:relative;height:52px;border-radius:999px;background:#e5e7eb;overflow:hidden;touch-action:none;">' +
        '<div id="phone-track" style="position:absolute;inset:0 auto 0 0;width:0;background:#bfdbfe;"></div>' +
        '<div id="phone-handle" style="position:absolute;left:6px;top:6px;width:40px;height:40px;border-radius:50%;background:#2563eb;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;cursor:grab;touch-action:none;user-select:none;">→</div>' +
        '<div style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:14px;color:#64748b;pointer-events:none;">Проведите вправо</div>' +
      '</div>' +
      '<div style="margin-top:10px;font-size:12px;color:#94a3b8;">Защита от ботов</div>';

    overlay.appendChild(box);
    document.body.appendChild(overlay);
    sendGoal('phone_slider_open');

    var slider = box.querySelector('#phone-slider');
    var handle = box.querySelector('#phone-handle');
    var track = box.querySelector('#phone-track');
    var closeBtn = box.querySelector('#phone-close');
    var dragging = false;
    var startX = 0;
    var startLeft = 6;
    var maxLeft = 0;

    function updateMaxLeft() {
      maxLeft = slider.offsetWidth - handle.offsetWidth - 12;
    }

    function getEventX(event) {
      if (event.touches && event.touches[0]) return event.touches[0].clientX;
      if (event.changedTouches && event.changedTouches[0]) return event.changedTouches[0].clientX;
      return event.clientX;
    }

    function updatePosition(left) {
      var nextLeft = Math.max(6, Math.min(left, maxLeft || 6));
      var progress = maxLeft > 6 ? (nextLeft - 6) / (maxLeft - 6) : 0;
      handle.style.left = nextLeft + 'px';
      track.style.width = Math.max(0, Math.min(progress * 100, 100)) + '%';
      return nextLeft;
    }

    function resetSlider() {
      handle.style.transition = 'left .2s ease';
      track.style.transition = 'width .2s ease';
      updatePosition(6);
      setTimeout(function () {
        handle.style.transition = '';
        track.style.transition = '';
      }, 220);
    }

    function cleanup() {
      document.removeEventListener('mousemove', handleMove);
      document.removeEventListener('touchmove', handleMove);
      document.removeEventListener('mouseup', handleEnd);
      document.removeEventListener('touchend', handleEnd);
      window.removeEventListener('resize', updateMaxLeft);
      window.removeEventListener('pageshow', handlePageShow);
      handle.removeEventListener('mousedown', handleStart);
      handle.removeEventListener('touchstart', handleStart);
      if (closeBtn) {
        closeBtn.removeEventListener('click', handleClose);
        closeBtn.removeEventListener('touchstart', handleClose);
      }
    }

    function handleStart(event) {
      updateMaxLeft();
      dragging = true;
      startX = getEventX(event);
      startLeft = parseInt(handle.style.left, 10) || 6;
      handle.style.cursor = 'grabbing';
      hardStop(event);
    }

    function handleMove(event) {
      if (!dragging) return;
      updatePosition(startLeft + getEventX(event) - startX);
      hardStop(event);
    }

    function handleEnd(event) {
      if (!dragging) return;
      dragging = false;
      handle.style.cursor = 'grab';

      var position = parseInt(handle.style.left, 10) || 6;
      if (position >= maxLeft - 2) {
        sendGoal('phone_slider_success');
        sendGoal('phone_redirect');
        cleanup();
        closeOverlay();
        window.location.href = phoneUrl;
      } else {
        resetSlider();
      }

      hardStop(event);
    }

    function handleClose(event) {
      sendGoal('phone_slider_close');
      cleanup();
      closeOverlay();
      hardStop(event);
    }

    function handlePageShow() {
      closeOverlay();
      window.removeEventListener('pageshow', handlePageShow);
    }

    overlay.addEventListener('click', function (event) {
      if (event.target === overlay) {
        handleClose(event);
      }
    }, true);
    handle.addEventListener('mousedown', handleStart);
    handle.addEventListener('touchstart', handleStart, { passive: false });
    if (closeBtn) closeBtn.addEventListener('click', handleClose);
    if (closeBtn) closeBtn.addEventListener('touchstart', handleClose, { passive: false });
    document.addEventListener('mousemove', handleMove, { passive: false });
    document.addEventListener('touchmove', handleMove, { passive: false });
    document.addEventListener('mouseup', handleEnd, { passive: false });
    document.addEventListener('touchend', handleEnd, { passive: false });
    window.addEventListener('resize', updateMaxLeft);
    window.addEventListener('pageshow', handlePageShow);
    updateMaxLeft();
  }

  function findPatchedPhoneLink(target) {
    if (!target || !target.closest) return null;
    return target.closest('a[data-phone-patched="1"][data-phone-href]');
  }

  function handlePhoneClick(event) {
    var link = findPatchedPhoneLink(event.target);
    if (!link) return;

    hardStop(event);
    if (event.type !== 'click' && event.type !== 'touchend' && event.type !== 'pointerup') return;

    var now = Date.now();
    if (now - lastTriggerTs < 400) return;
    lastTriggerTs = now;

    var phoneUrl = link.getAttribute('data-phone-href');
    if (!phoneUrl) return;

    sendGoal('phone_click_try');
    showSliderAndRedirect(phoneUrl);
  }

  patchAll(document);

  var observer = new MutationObserver(function (mutations) {
    for (var mutationIndex = 0; mutationIndex < mutations.length; mutationIndex += 1) {
      var nodes = mutations[mutationIndex].addedNodes;
      for (var nodeIndex = 0; nodeIndex < nodes.length; nodeIndex += 1) {
        var node = nodes[nodeIndex];
        if (node && node.nodeType === 1) {
          patchAll(node);
        }
      }
    }
  });
  observer.observe(document.documentElement, { childList: true, subtree: true });

  ['pointerdown', 'mousedown', 'touchstart', 'click', 'auxclick', 'touchend', 'pointerup'].forEach(function (eventName) {
    window.addEventListener(eventName, handlePhoneClick, { capture: true, passive: false });
  });
})();
</script>

Что делает сервис

Генератор подставляет номер счётчика Метрики и создаёт скрипт для телефонных ссылок. Такой сценарий помогает отделить реальные клики по телефону от случайных касаний и части автоматических переходов.

Какие цели отправляет скрипт

Создайте в Метрике JavaScript-события с этими идентификаторами. Каждый ID можно скопировать отдельно или одним списком.

ЗвонкиКлик по телефону

phone_click_try

Пользователь нажал на ссылку с номером телефона.

ЗвонкиСлайдер открыт

phone_slider_open

После клика по телефону показано окно подтверждения.

ЗвонкиСлайдер пройден

phone_slider_success

Пользователь довёл ползунок до конца.

ЗвонкиПереход к звонку

phone_redirect

Открыт набор номера после успешного жеста.

ЗвонкиСлайдер закрыт

phone_slider_close

Пользователь закрыл подтверждение без перехода к звонку.

Как установить

Введите номер счётчика Яндекс Метрики.
Сгенерируйте код и скопируйте его.
Добавьте код перед закрывающим тегом body или в HTML-блок сайта.
Создайте JavaScript-события в Метрике и проверьте клик по тестовой ссылке tel:+79991234567.

Что скрипт считает звонком

Скрипт обрабатывает ссылки с href, начинающимся на tel:. Новые телефонные ссылки, которые появляются после загрузки страницы, тоже подхватываются через MutationObserver.

Приватность

Генерация работает в браузере. Введённый номер счётчика и готовый код не отправляются на сервер.

FAQ

Частые вопросы

Нужно ли менять телефонные ссылки на сайте?
Нет. Достаточно, чтобы ссылки на номера были размечены в формате tel:+79991234567. Скрипт сам заменит прямой переход на подтверждение со слайдером.
Можно ли использовать свой счётчик Метрики?
Да. Введите нужный номер счётчика в поле генератора, и код будет сформирован с ним.
Скрипт считает фактический разговор?
Нет. Он фиксирует подтверждённый переход к набору номера. Для учёта состоявшихся разговоров нужна коллтрекинг-система или данные оператора.

Нужна консультация

Подскажу, как подготовить данные и запустить аудитории

Разберем задачу, формат данных и следующий шаг.

Получить консультацию