Пытаюсь написать скрипт, который будет измерять глубину просмотра одностраничных сайтов.
Идея следующая: одностраничный сайт разделен на секции. При просмотре любой из секций больше 15 секунд срабатывает цель Яндекс.Метрики.
Пример секций.
<section id=""></section>
<section id=""></section>
<section id=""></section>
Определение конкретной секции.
// Получаем нужный элемент
var element = document.querySelector('target');
var Visible = function (target) {
// Все позиции элемента
var targetPosition = {
top: window.pageYOffset + target.getBoundingClientRect().top,
bottom: window.pageYOffset + target.getBoundingClientRect().bottom
},
// Получаем позиции окна
windowPosition = {
top: window.pageYOffset,
bottom: window.pageYOffset + document.documentElement.clientHeight
};
if (targetPosition.bottom > windowPosition.top && // Если позиция нижней части элемента больше позиции верхней чайти окна, то элемент виден сверху
targetPosition.top < windowPosition.bottom) { // Если позиция верхней части элемента меньше позиции нижней чайти окна, то элемент виден снизу
// Если элемент полностью видно, то запускаем следующий код
console.clear();
console.log('Вы видите элемент!');
} else {
// Если элемент не видно, то запускаем этот код
console.clear();
};
};
// Запускаем функцию при прокрутке страницы
window.addEventListener('scroll', function() {
Visible (element);
});
У меня не получается решить две задачи, без которых скрип нельзя считать рабочим:
1.) Секции больше, чем одна. Не пойму как реализовать удобный способ перечисления требуемых секций и механизм активации таймера, если пользователь остановился на определенной секции.
2.) Самая большая проблема в том, что в поле зрения одного пользователя может попасть 2 или 3 секции одновременно. Пример: пользователю видна секция 1 на 100% и секция 2 на 20%. Или, пользователю видна секция 2 на 20%, секция 3 на 100% и секция 4 на 20%. Не пойму как активировать таймер для секции, которая больше всего в поле зрения пользователя, а при прокрутки на другую секцию перезапустить таймер. Пример: в поле зрения пользователя секция 1 на 100% и секция 2 на 20%. Для секции 1 таймер посчитал 14 секунд, но тут пользователь пролистал страницу и теперь получилось что секция 2 видна на 20%, секция 3 на 100% и секция 4 на 20%, а значит нужно обновить таймер и начать новый отчет для секции 3.
Две проблемы связаны между собой и если первую проблему я могу решить самостоятельно с помощью определённых костылей, то связать их вместе у меня не получается на протяжении нескольких дней. Есть идеи по поводу решения данной задачи?