Ознакомился ли с лендингом

Как узнать, ознакомился ли пользователь с лендингом?

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

Определение критериев "ознакомления"

Прежде чем что-то отслеживать, необходимо договориться, что считается успешным ознакомлением с лендингом (landing page). Это могут быть комбинации следующих событий:

• Время на странице: Пользователь провел более N секунд (например, 30 или 60). Это базовый показатель.
• Прокрутка (scroll depth): Пользователь прокрутил страницу до определенной точки (например, 50%, 75% или до самого конца).
• Взаимодействие с ключевыми элементами: Клик по основной CTA (Call-To-Action — кнопке "Заказать", "Подробнее"), просмотр важного видео, взаимодействие с галереей или табами.
• Прочтение основного текста: Можно отследить, когда пользователь доскроллил до секции с основным текстовым контентом.

Чаще всего используется комбинация времени и глубины прокрутки.

Технические методы отслеживания на фронтенде

Для реализации отслеживания мы используем JavaScript и чаще всего интеграцию с системами аналитики, такие как Google Analytics 4 (GA4), Яндекс.Метрика или специализированные инструменты типа Hotjar.

1. Отслеживание глубины прокрутки (Scroll Depth)

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

// Функция для отслеживания прокрутки и отправки события в GA4
function trackScrollDepth() {
    const scrollThresholds = [25, 50, 75, 100]; // Пороги в процентах
    let firedThresholds = [];

    window.addEventListener('scroll', () => {
        const scrollPosition = window.scrollY + window.innerHeight;
        const pageHeight = document.documentElement.scrollHeight;

        const scrollPercentage = Math.round((scrollPosition / pageHeight) * 100);

        // Проверяем каждый порог
        scrollThresholds.forEach(threshold => {
            if (scrollPercentage >= threshold && !firedThresholds.includes(threshold)) {
                // Отправляем событие в Google Analytics 4
                if (window.gtag) {
                    window.gtag('event', 'scroll_depth', {
                        'value': threshold,
                        'page_title': document.title,
                        'page_path': window.location.pathname
                    });
                }
                // Также можно отправить событие в свою систему или Яндекс.Метрику
                console.log(`Пользователь прокрутил до ${threshold}%`);
                firedThresholds.push(threshold); // Помним, чтобы не отправлять повторно
            }
        });
    });
}

// Инициализация при загрузке страницы
document.addEventListener('DOMContentLoaded', trackScrollDepth);

2. Отслеживание времени на странице

Отслеживание чистого времени может быть сложным из-за таймаутов или переключения табов, но базовый вариант выглядит так:

let startTime = Date.now();
let minimumTimeForEngagement = 30000; // 30 секунд

window.addEventListener('beforeunload', () => {
    const timeSpent = Date.now() - startTime;
    if (timeSpent >= minimumTimeForEngagement) {
        // Пользователь провел достаточно времени — отправляем событие
        if (window.gtag) {
            window.gtag('event', 'page_engaged', {
                'engagement_time': Math.round(timeSpent / 1000), // в секундах
                'page_title': document.title
            });
        }
    }
});

3. Комбинированный подход: "Флаг ознакомления"

Наиболее надежный метод — создать внутренний флаг в состоянии фронтенда, который устанавливается в true только при выполнении нескольких условий.

class LandingPageTracker {
    constructor() {
        this.hasScrolledDeep = false;
        this.hasSpentTime = false;
        this.hasInteracted = false;
        this.isConsideredEngaged = false;

        this.initTracking();
    }

    initTracking() {
        // Трекер прокрутки (например, до 75%)
        this.setupScrollTracker(75);
        // Трекер времени (например, 20 секунд)
        this.setupTimeTracker(20000);
        // Трекер клика на основную CTA
        this.setupCTATracker('.primary-cta-button');
    }

    setupScrollTracker(thresholdPercent) {
        window.addEventListener('scroll', () => {
            const scrollPos = window.scrollY + window.innerHeight;
            const height = document.documentElement.scrollHeight;
            const percent = (scrollPos / height) * 100;

            if (percent >= thresholdPercent) {
                this.hasScrolledDeep = true;
                this.checkEngagement();
            }
        });
    }

    setupTimeTracker(timeMs) {
        setTimeout(() => {
            this.hasSpentTime = true;
            this.checkEngagement();
        }, timeMs);
    }

    setupCTATracker(selector) {
        document.querySelector(selector)?.addEventListener('click', () => {
            this.hasInteracted = true;
            this.checkEngagement();
        });
    }

    checkEngagement() {
        // Логика принятия решения: например, прокрутка + время
        if (this.hasScrolledDeep && this.hasSpentTime && !this.isConsideredEngaged) {
            this.isConsideredEngaged = true;
            this.sendEngagementEvent();
        }
    }

    sendEngagementEvent() {
        // Отправка события во все необходимые системы аналитики
        console.log('Пользователь ознакомился с лендингом!');
        if (window.gtag) {
            window.gtag('event', 'landing_page_engaged');
        }
        // Можно также отправить данные на свой backend для дальнейшего анализа
    }
}

// Использование
new LandingPageTracker();

Практическое применение данных

После того как мы технически реализовали отслеживание, данные можно использовать для:

• А/B тестирования: Сравнивать, на какой версии лендинга процент "ознакомления" выше.
• Оптимизации конверсии: Если пользователь ознакомился, но не совершил целевое действие (заявка, покупка), возможно, проблема в CTA или финальном предложении.
• Персонализации: Если в системе есть данные о пользователе, который ознакомился, но не конвертировался сразу, можно запустить ремаркетинг (например, показать ему специальное предложение через email или рекламу).
• Оценки качества трафика: Высокий процент ознакомления с лендинга может указывать на качественный трафик из определенного источника.

Вывод: Ответ на вопрос "ознакомился ли пользователь с лендингом" — это не бинарное "да/нет", а набор поведенческих метрик, которые фронтенд-разработчик может фиксировать с помощью событий JavaScript и отправлять в системы аналитики. Ключевая задача — правильно определить бизнес-критерии "ознакомления" и реализовать их отслеживание без ущерба для производительности и пользовательского опыта.