Как сделать отслеживание скролла в WordPress с помощью кода

Автор: Владимир Панин | Опубликовано: 12.12.2025

Отслеживание скролла страницы — важный инструмент для анализа взаимодействия пользователей с контентом сайта. Особенно в WordPress, где каждый сайт индивидуален, полезно уметь реализовывать кастомные решения без излишнего использования плагинов, которые могут замедлять загрузку. В этой статье разберём, как сделать отслеживание скролла в WordPress с помощью чистого кода, а также рассмотрим интеграцию с Google Analytics и предложим варианты плагинов для расширенного анализа.

Почему важно отслеживать скролл в WordPress

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

Оптимизации структуры контента.
Улучшения пользовательского опыта.
Повышения конверсий за счёт понимания поведения аудитории.

В WordPress, где часто применяются длинные статьи или лендинги, отслеживание скролла позволяет подтвердить или опровергнуть гипотезы о вовлечённости.

Как реализовать отслеживание скролла на чистом JavaScript в WordPress

Реализуем базовое отслеживание с помощью JavaScript, которое будет фиксировать, когда пользователь прокрутил страницу на определённые проценты: 25%, 50%, 75% и 100%. Для этого создадим пользовательский скрипт и добавим его в тему или через отдельный плагин.

Добавление скрипта в WordPress

Лучший способ добавить скрипт — зарегистрировать и подключить его через functions.php вашей темы или дочерней темы:

function wpcat_enqueue_scroll_tracking_script() {
    wp_enqueue_script('wpcat-scroll-tracking', get_template_directory_uri() . '/js/scroll-tracking.js', array('jquery'), '1.0', true);
    wp_localize_script('wpcat-scroll-tracking', 'wpcatScrollData', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}
add_action('wp_enqueue_scripts', 'wpcat_enqueue_scroll_tracking_script');

Создайте файл scroll-tracking.js в папке js вашей темы.

Код отслеживания скролла в JavaScript

jQuery(document).ready(function($) {
    var scrollPoints = [25, 50, 75, 100];
    var reachedPoints = [];

    function wpcat_send_scroll_event(percent) {
        // Например, отправляем событие в Google Analytics
        if (typeof gtag === 'function') {
            gtag('event', 'scroll', {
                'event_category': 'Scroll Depth',
                'event_label': percent + '%',
                'value': percent
            });
        }
        // Можно добавить AJAX-запрос для собственной аналитики
        /*
        $.post(wpcatScrollData.ajax_url, {
            action: 'wpcat_track_scroll',
            percent: percent
        });
        */
    }

    $(window).on('scroll', function() {
        var scrollTop = $(window).scrollTop();
        var docHeight = $(document).height() - $(window).height();
        var scrollPercent = Math.floor((scrollTop / docHeight) * 100);

        scrollPoints.forEach(function(point) {
            if (scrollPercent >= point && !reachedPoints.includes(point)) {
                reachedPoints.push(point);
                wpcat_send_scroll_event(point);
            }
        });
    });
});

Этот код фиксирует, когда пользователь достигает заданных порогов прокрутки и отправляет событие в Google Analytics через gtag. Если вы не используете GA, раскомментируйте AJAX-запрос и реализуйте серверную часть для записи данных в базу.

Обработка AJAX-запроса для собственной аналитики

Если хотите хранить данные о скролле на сервере, добавьте в functions.php обработчик:

function wpcat_handle_scroll_tracking() {
    if (!isset($_POST['percent'])) {
        wp_send_json_error('No percent data');
    }
    $percent = intval($_POST['percent']);
    $user_ip = $_SERVER['REMOTE_ADDR'];
    $time = current_time('mysql');

    global $wpdb;
    $table = $wpdb->prefix . 'wpcat_scroll_tracking';

    $wpdb->insert($table, array(
        'percent' => $percent,
        'ip' => $user_ip,
        'time' => $time
    ));
    wp_send_json_success('Tracked');
}
add_action('wp_ajax_wpcat_track_scroll', 'wpcat_handle_scroll_tracking');
add_action('wp_ajax_nopriv_wpcat_track_scroll', 'wpcat_handle_scroll_tracking');

Для этого создайте таблицу в базе данных при активации темы или плагина:

function wpcat_create_scroll_tracking_table() {
    global $wpdb;
    $table = $wpdb->prefix . 'wpcat_scroll_tracking';
    $charset_collate = $wpdb->get_charset_collate();

    $sql = "CREATE TABLE $table (
        id mediumint(9) NOT NULL AUTO_INCREMENT,
        percent int NOT NULL,
        ip varchar(100) NOT NULL,
        time datetime DEFAULT '0000-00-00 00:00:00' NOT NULL,
        PRIMARY KEY  (id)
    ) $charset_collate;";

    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
    dbDelta($sql);
}
register_activation_hook(__FILE__, 'wpcat_create_scroll_tracking_table');

Использование плагинов для отслеживания скролла в WordPress

Если не хотите писать код, рассмотрите плагины, которые могут помочь:

WP Scroll Depth — простой плагин, который интегрируется с Google Analytics и отслеживает глубину прокрутки.
MonsterInsights — популярный плагин для аналитики с опцией отслеживания скролла и других событий.
Clearfy Pro — универсальный оптимизатор, который включает инструменты для улучшения аналитики и отслеживания пользовательского поведения.

В случае использования плагина Clearfy Pro можно настроить расширенные параметры отслеживания и оптимизации, минимизируя нагрузку на сайт.

Практические рекомендации по оптимизации отслеживания скролла

Чтобы отслеживание не замедляло сайт и было полезным, учитывайте:

Используйте throttle или debounce для ограничений частоты срабатывания события scroll.
Отправляйте события только при достижении значимых порогов, чтобы не перегружать аналитику.
При записи через AJAX учитывайте безопасность и защиту от спама.
Проверяйте совместимость с другими скриптами и плагинами на сайте.

Пример добавления throttle для оптимизации

function wpcat_throttle(func, limit) {
    var lastFunc;
    var lastRan;
    return function() {
        var context = this;
        var args = arguments;
        if (!lastRan) {
            func.apply(context, args);
            lastRan = Date.now();
        } else {
            clearTimeout(lastFunc);
            lastFunc = setTimeout(function() {
                if ((Date.now() - lastRan) >= limit) {
                    func.apply(context, args);
                    lastRan = Date.now();
                }
            }, limit - (Date.now() - lastRan));
        }
    }
}

$(window).on('scroll', wpcat_throttle(function() {
    // код обработки скролла
}, 200));

Этот приём значительно снижает нагрузку на браузер при частом скролле.

Выводы по теме

Отслеживание скролла — мощный инструмент для понимания поведения пользователей на сайте WordPress. Реализовать его можно как с помощью собственного кода, так и используя готовые плагины. Вариант с кодом даёт максимальный контроль и позволяет интегрировать аналитику под конкретные задачи.

Если хотите получить простой старт, подключите Google Analytics и добавьте JS-скрипт из примера. Для более сложных проектов рассмотрите Clearfy Pro или другие специализированные плагины. Главное — анализируйте полученные данные и улучшайте сайт на основе реального поведения посетителей.