3

Пытаюсь написать скрипт, который будет измерять глубину просмотра одностраничных сайтов.

Идея следующая: одностраничный сайт разделен на секции. При просмотре любой из секций больше 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.

введите сюда описание изображения

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

3 ответа 3

4

А что если считать сколько % поверхности какого элемента пользователь видел в сумме?

например за 1 секунду просмотра 100% площади элемента для этого элемента счетчик увеличивается на 1, а если было видно только 20% элемента - то 0.2

let handle = s => {
  let b = s.getBoundingClientRect();
  s.square = b.bottom > 0 ? (Math.min(b.bottom, window.innerHeight)-Math.max(0, b.top))/b.height : 0;
  s.style.background = `linear-gradient(to right, #d77 ${s.square*100}%, wheat ${s.square*100}%)`
}

let sections = [...document.querySelectorAll('section')]

window.onscroll = e => sections.forEach(handle)
window.onscroll()

setInterval(i => {

  sections.forEach(s => s.textContent = +s.textContent + Math.max(0, s.square)*0.1)
  document.querySelector('span').textContent = sections.map(s => (+s.textContent).toFixed(1))

},100)
section {
  width: calc(100vw - 35px);
  margin-bottom: 8px
}

span {
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  border:solid;
  font-size:30px;
  padding:3px;
}
<span></span>
<section style="height:100px"> </section>
<section style="height:150px"> </section>
<section style="height:300px"> </section>
<section style="height:200px"> </section>
<section style="height:100px"> </section>
<section style="height:200px"> </section>
<section style="height:300px"> </section>
<section style="height:400px"> </section>
<section style="height:100px"> </section>
<section style="height:130px"> </section>
<section style="height:150px"> </section>
<section style="height:400px"> </section>

Блок красится в зависимости от того на сколько % он виден, это для наглядности и отладки..

Можно еще для верности добавить порог, например процентов в 20...

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

3
  • Отличная идея по поводу процентов, но я не могу понять как в таком случае останавливать и обновлять таймер. Пример: пользователь просмотрел секцию X больше 15 секунд – значит нужно выполнить if(). Плюс, таймер должен возобновить отсчет в случае, если секция X полностью исчезла из поля зрения. То есть, не продолжать отсчет с того же время, а начинать заново. 5 июн 2019 в 13:27
  • сбрасывать значение при отправке 5 июн 2019 в 13:29
  • а таймер пусть всегда работает один 5 июн 2019 в 13:29
2

Можно реализовать через таймауты, задав переменную viewTimeouts, которая будет хранить таймаут для каждого элемента. Ну и задаем граничные условия.

var elements = document.querySelectorAll('section'),
    viewTimeouts = {},
    secondsLimit = 4, // сколько секунд ждем, чтобы среагировать на просмотр
    viewPercentLimit = 80; // Минимальный процент видимости элемента

Также сделал метод VisibleElements, который будет бежать по всем элементам и сравнивать позицию. Его еще стоит запустить при старте, чтобы анализ был сразу после загрузки страницы а не только после скролла.

var VisibleElements = function(elements){
    for(var i=0; i<elements.length; i++) {
        var element = elements[i];
        // надо как-то идентифицировать элементы
        if(!element.dataset['id']) {
            element.dataset['id'] = genElementId();
        }
        var elementId = element.dataset['id'],
            isVisible = Visible(element);
        if (isVisible) {
            if (!viewTimeouts[elementId]) {
                // если человек видит элемент и таймаут еще не запущен - запускаем таймаут
                viewTimeouts[elementId] = setTimeout(deepViewed(element), secondsLimit * 1000);
            }
        } else {
            // если элемент не виден - чистим таймаут
            clearTimeout(viewTimeouts[elementId]);
            viewTimeouts[elementId] = null;
        }
    }
};

Поправил метод Visible, чтобы он возвращал true если элемент просмотрен с учетом минимального процента.

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) { // Если позиция верхней части элемента меньше позиции нижней чайти окна, то элемент виден снизу
        // Если элемент полностью видно, то запускаем следующий код
        var targetSize = targetPosition.bottom - targetPosition.top,
            targetVisibleTop = targetPosition.top > windowPosition.top ? targetPosition.top : windowPosition.top,
            targetVisibleBottom = targetPosition.bottom < windowPosition.bottom ? targetPosition.bottom : windowPosition.bottom,
            viewSize = targetVisibleBottom - targetVisibleTop,
            percent = 100 * viewSize / targetSize;
        return percent > viewPercentLimit;
    } else {
        // Если элемент не видно, то запускаем этот код
    };

};

https://jsfiddle.net/skywave/6vacfyL0/75/

2
  • Как в данном примере перечислить элементы по id, а не просто "section"? Плюс, таймер должен возобновить отсчет в случае, если секция X полностью исчезла из поля зрения. То есть, не продолжать отсчет с того же время, а начинать заново. 5 июн 2019 в 13:26
  • На счет таймера отбой, не доглядел. 5 июн 2019 в 13:54
1

Вариант с использованием IntersectionObserver. Схема реализации следующая:

  • выбираем список элементов по css селектору;
  • создаём виртуальную таблицу секций, куда пишем id и видимую высоту;
  • при изменении пересечения секции с областью видимости, переписываем видимую высоту элемента в таблице;
  • по максимальному значению высот из таблицы определяем лидирующую секцию;
  • если новая лидирующая секция отличается от предыдущей, то запускаем таймер;
  • по окончанию отсчета таймера в демки выводится сообщение с id лидирующей секции.

// Количество секунд, когда будет определен лидер.
const REMAINING_TIME = 8;

// Параметры для наблюдателя.
const OPTIONS = {
  // Корневой элемент для пересечения видимости.
  // По умолчанию `viewport` документа.
  root: null,
  // Порог срабатывания наблюдателя за пересечением видимости.
  threshold: [0, .2, .4, .6, .8, 1]
}

// Выбираем секции, за которыми будем устанавливать наблюдения.
const SECTIONS = document.querySelectorAll('.intersection');

// Секции, как участники детской игры "Царь горы".
let conquerors = [];
// Текущий победитель.
let winner;
// Идентификатор таймера.
let timerId;
// Счетчик для таймера.
let remaining;

function decrement() {
  // Очищаем предыдущий таймер, чтобы не было зацикливаний.
  clearTimeout(timerId);

  if (remaining > 0) {
    timerId = setTimeout(decrement, 1000);
  } else {
    alert(`Прошло ${REMAINING_TIME} сек просмотра. Победитель: + ${winner.id}`);
  }

  // Распечатка результатов для демки.
  printResult();

  // Минусуем счетчик для таймера.
  remaining--;
}

// Обновление данных о секции в таблице секций.
function update(id, ratio, height) {
  // Текущая секция из таблицы секций.
  let conqueror = conquerors.find(i => id === i.id);

  conqueror.ratio = ratio.toFixed(4);
  conqueror.height = height.toFixed(4);

  // Обновим данные о победителе.
  // Победитель определяется по
  // максимально видимой высоте элемента.
  winner = conquerors.reduce(function(prev, curr) {
    return parseFloat(curr.height) > parseFloat(prev.height) ? curr : prev;
  });
}

// Функция обратного вызова для наблюдателя. Будет вызываться, когда
// каждый элемент из набора `entries`
// появляется и исчезает из области видимости.
function computedTimeOut(entries, observer) {
  entries.forEach(function(entry, index) {
    // Элемент, видимость которого изменилась.
    let element = entry.target;

    // Коэффициент пересечения текущего элемента с `viewport`.
    let ratio = entry.intersectionRatio;

    // Видимая высота элемента.
    let height = entry.intersectionRect.height;

    // Сохраним `id` текущего победителя до того, как обновим таблицу.
    let winner_id = winner ? winner.id : winner;

    // Обновим данные о секции в таблице секций.
    update(element.id, ratio, height);

    // Если секция попала в поле видимости.
    if (entry.isIntersecting) {
      // Визуализируем стиль секции.
      visualize(element, ratio);

      // Если победитель еще не был определен либо он сменился.
      if (!winner_id || winner.id !== winner_id) {
        // Сбрасываем счетчик на значение,
        // заданное в качестве шаблонного.
        remaining = REMAINING_TIME;

        // Запускаем таймер.
        decrement();
      }
    }
  });
}

// Создаем экземпляр наблюдателя за пересечением видимости элементов.
let visibleDetails = new IntersectionObserver(computedTimeOut, OPTIONS);

// Перебираем все секции.
SECTIONS.forEach(function(section, index) {
  // Устанавливаем наблюдателя за секцией.
  visibleDetails.observe(section);

  // Заполняем таблицу секций.
  // Используем атрибут `id` для идентификации элемента.
  conquerors.push({
    id: section.id,
    ratio: 0,
    height: 0
  });

  // Для демки добавим разную высоту секциям: < 1440px.
  section.style.height = Math.random() * 1440 + 'px';
})

/**
 * Дальше идут константы и функции, которые используются для демки.
 */

// Спаны для вывода коэффициентов пересечения.
const RATIO_SPANS = document.querySelectorAll('.intersection__ratio');

// Спан для вывода времени пересечения.
const TIMING_SPAN = document.querySelector('#intersection__timing');

// Спан для вывода таблицы секций.
const CONQUERORS_SPAN = document.querySelector('#intersection__conquerors');

// Спан для вывода победителя.
const WINNER_SPAN = document.querySelector('#intersection__winner');

// Визуализация наблюдений.
// Вызывается при изменении пересечений
// областей видимости секции с `vieport`.
function visualize(element, ratio) {
  let span = element.querySelector(".intersection__ratio");
  span.textContent = element.id + ' ' + (Math.floor(ratio * 100)) + "%";
  element.style.color = ratio > 0.5 ? '#fff' : '#bbb';
  element.style.backgroundColor = `rgba(195, 195, 195, ${ratio})`;
}

// Распечатка результатов для демки.
// Вызывается при изменении счетчика и таймера.
// Все переменные глобальные.
function printResult() {
  TIMING_SPAN.textContent = remaining > 0 ? remaining : 'Таймер остановлен.';
  CONQUERORS_SPAN.textContent = JSON.stringify(conquerors, null, 2);
  WINNER_SPAN.textContent = JSON.stringify(winner, null, 2);
}
body {
  margin: 0;
}

#app {
  max-width: 280px;
  margin: 0 auto;
}

#intersection__timing {
  position: fixed;
  top: 8px;
  left: 16px;
}

#intersection__winner {
  position: fixed;
  bottom: 8px;
  left: 16px;
  color: red;
  font-size: 18px;
}

#intersection__conquerors {
  position: fixed;
  top: 8px;
  right: 16px;
}

.intersection {
  height: 220px;
  border: 1px solid #ccc;
  text-align: center;
  font-family: cursive;
}

.intersection__ratio {
  position: sticky;
  top: 0;
}
<div id="app">
  <section id="first" class="intersection"><span class="intersection__ratio"></span><span class="intersection__timing"></span></section>
  <section id="second" class="intersection"><span class="intersection__ratio"></span><span class="intersection__timing"></span></section>
  <section id="third" class="intersection"><span class="intersection__ratio"></span><span class="intersection__timing"></span></section>
  <section id="fourth" class="intersection"><span class="intersection__ratio"></span><span class="intersection__timing"></span></section>
  <section id="fifth" class="intersection"><span class="intersection__ratio"></span><span class="intersection__timing"></span></section>
  <section id="sixth" class="intersection"><span class="intersection__ratio"></span><span class="intersection__timing"></span></section>
  <section id="seventh" class="intersection"><span class="intersection__ratio"></span><span class="intersection__timing"></span></section>
  <section id="eighth" class="intersection"><span class="intersection__ratio"></span><span class="intersection__timing"></span></section>

  <div id="intersection__timing"></div>
  <pre id="intersection__winner"></pre>
  <pre id="intersection__conquerors"></pre>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.