Фиксация события воронки на странице

В этом примере разберем, как можно отслеживать скролл страницы до середины, конца или определенного элемента и записывать событие для воронки.

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

// Добавляем обработчики событий на скролл
window.addEventListener('scroll', () => checkScrollToMiddle('eventCode'));
window.addEventListener('scroll', () => checkScrollToEnd('eventCode'));
window.addEventListener('scroll', () => checkScrollToElement('ltBlock2124054661', 'eventCode'));

// Фиксация события при достижении определенного места
function onScrollToMiddle(eventCode) {
    rfnl(eventCode);
}

function onScrollToEnd(eventCode) {
    rfnl(eventCode);
}

function onScrollToElement(elId, eventCode) {
    rfnl(eventCode);
}

let middleReached = false;
let endReached = false;
let elementReached = false;

// Функция для проверки скролла до середины страницы
function checkScrollToMiddle(eventCode) {
    if (middleReached) return;
    const middle = document.body.scrollHeight / 2;
    if (window.scrollY + window.innerHeight >= middle) {
        middleReached = true;
        // Фиксация события для воронки
        onScrollToMiddle(eventCode);
    }
}

// Функция для проверки скролла до конца страницы
function checkScrollToEnd(eventCode) {
    if (endReached) return;
    const end = document.body.scrollHeight;
    if (window.scrollY + window.innerHeight >= end) {
        endReached = true;
         // Фиксация события для воронки
        onScrollToEnd(eventCode);
    }
}

// Функция для проверки скролла до интересующего блока
function checkScrollToElement(elementId, eventCode) {
    if (elementReached) return;
    const element = document.getElementById(elementId);
    if (element) {
        const elementPosition = element.getBoundingClientRect().top + window.scrollY;
        if (window.scrollY + window.innerHeight >= elementPosition) {
            elementReached = true;
             // Фиксация события для воронки
            onScrollToElement(elementId, eventCode);
        }
    } else {
        console.error(`Element with id ${elementId} not found`);
    }
}

В воронках добавьте ноду "событие" и скопируйте оттуда идентификатор (можно создать разные ноды под каждый тип события)

Далее, в коде вам необходимо заменить идентификаторы событий и целевого блока (если он нужен)

На первых 4 строчках написаны подписки на событие страницы. Если вам не нужно замерять какой-либо из этих трех параметров, вы можете удалить соответствующую строчку.

Например, если не нужно отслеживать скролл до элемента страницы, удаляем полностью строчку 4 (с текстом checkScrollToElement).

-- ID целевого элемента можно найти через консоль разработчика.

Как работать с этим инструментом в вашем браузере можете спросить у нейросети или найти на просторах интернета.