Как поставить цель для Яндекс.Метрики на скролл мышью и пальцем для слайдера?

Рейтинг: 0Ответов: 1Опубликовано: 13.06.2023

Стоит цель на слайдере, которая фиксирует перелистывание слайда по кнопкам за 1 сессию. Вот код:

        if (!sessionStorage.getItem('buttonClicked')) {
            $(".v-prev, .v-next").one('click', function () {
                yaCounterXXXXXXX.reachGoal('SLIDERBUTTON');
                sessionStorage.setItem('buttonClicked', 'true');
            });
        }

Но, если слайдер скролить мышкой или пальцем на мобилке, то цель соответственно не срабатывает. Какое может быть решение? Да, еще такой момент, что сайт на Тильде, но слайдер в зероблоке - самописный.

javascript jquery яндекс-метрика
Источник: Stack Overflow на русском

Ответы

▲ 0

Для отслеживания скролла мышью и пальцем на мобильных устройствах потребуется использовать события, чтобы определить, когда происходит скролл в слайдере. Вот пример кода:

// Функция для отслеживания скролла в слайдере
function trackSliderScroll() {
  // Проверяем, если цель еще не была достигнута
  if (!sessionStorage.getItem('scrollTracked')) {
    // Проверяем, если пользователь прокручивает слайдер
    var slider = $(".your-slider-element");
    slider.on('scroll', function () {
      // Достигнута цель при скролле
      yaCounterXXXXXXX.reachGoal('SLIDERSCROLL');
      sessionStorage.setItem('scrollTracked', 'true');
      // Удаляем обработчик события, так как цель достигнута
      slider.off('scroll');
    });
  }
}

// Вызываем функцию отслеживания скролла при загрузке страницы
$(document).ready(function() {
  trackSliderScroll();
});

В этом примере добавляем обработчик события scroll к элементу слайдера (вместо кнопок прокрутки), чтобы отслеживать скролл мышью или пальцем на мобильных устройствах. Когда происходит скролл в слайдере, срабатывает цель "SLIDERSCROLL" в Яндекс.Метрике. Использование sessionStorage для проверки, была ли уже достигнута цель, чтобы избежать повторного срабатывания цели в рамках одной сессии.

Важно убедиться, что ты заменишь $(".your-slider-element") на правильный селектор для вашего слайдера. Также убедись, что идентификатор yaCounterXXXXXXX соответствует реальному идентификатору счетчика Яндекс.Метрики.

Помимо этого кода, также потребуется добавить цель "SLIDERSCROLL" в Яндекс.Метрику и настроить ее соответствующим образом для отслеживания достижения цели при скролле слайдера.