Как создать отслеживание пользовательских действий в WordPress с помощью AJAX и REST API

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

Зачем нужно отслеживать пользовательские действия?

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

• Отслеживание кликов по важным элементам (кнопкам, ссылкам).
• Фиксация заполнения форм и их успешная отправка.
• Слежение за просмотрами определённых разделов или товаров.
• Анализ пользовательского пути для улучшения UX.

Хотя для этих целей существуют готовые системы аналитики, иногда требуется собрать уникальные данные, которые не покрывает стандартный функционал Google Analytics или Яндекс.Метрики.

Настройка REST API маршрута для приёма данных

Первый шаг — создать собственный endpoint REST API, который будет принимать данные с клиента. Для этого в functions.php темы или в собственном плагине добавим следующий код:

add_action('rest_api_init', function () {
    register_rest_route('wpbest/v1', '/track-action', array(
        'methods' => 'POST',
        'callback' => 'wpbest_track_user_action',
        'permission_callback' => '__return_true',
    ));
});

function wpbest_track_user_action(WP_REST_Request $request) {
    $params = $request->get_json_params();
    $action = sanitize_text_field($params['action'] ?? '');
    $details = sanitize_textarea_field($params['details'] ?? '');
    $user_id = get_current_user_id();

    if (empty($action)) {
        return new WP_REST_Response(['error' => 'Action is required'], 400);
    }

    global $wpdb;
    $table_name = $wpdb->prefix . 'wpbest_user_actions';

    $result = $wpdb->insert($table_name, [
        'user_id' => $user_id,
        'action' => $action,
        'details' => $details,
        'created_at' => current_time('mysql', 1),
    ]);

    if ($result === false) {
        return new WP_REST_Response(['error' => 'Database insert failed'], 500);
    }

    return ['success' => true];
}

В этом коде мы регистрируем маршрут /wpbest/v1/track-action, который принимает POST-запрос с JSON, содержащим поля action и details. Данные сохраняются в отдельную таблицу базы данных.

Создание таблицы в базе данных для хранения действий

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

function wpbest_create_actions_table() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'wpbest_user_actions';
    $charset_collate = $wpdb->get_charset_collate();

    $sql = "CREATE TABLE $table_name (
        id BIGINT(20) UNSIGNED NOT NULL AUTO_INCREMENT,
        user_id BIGINT(20) UNSIGNED NOT NULL,
        action VARCHAR(255) NOT NULL,
        details TEXT,
        created_at DATETIME NOT NULL,
        PRIMARY KEY (id),
        KEY user_id (user_id),
        KEY action (action),
        KEY created_at (created_at)
    ) $charset_collate;";

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

register_activation_hook(__FILE__, 'wpbest_create_actions_table');

Этот код создаст таблицу wp_wpbest_user_actions (префикс может отличаться) с полями для ID, ID пользователя, действия, деталей и даты.

Отправка данных с клиента с помощью AJAX

Теперь нужно отправлять данные о действиях с фронтенда на наш REST API. В WordPress удобно использовать fetch API с nonce для безопасности.

Добавляем скрипт и локализацию

В functions.php добавим:

function wpbest_enqueue_scripts() {
    wp_enqueue_script('wpbest-tracker', get_template_directory_uri() . '/js/wpbest-tracker.js', array('jquery'), null, true);
    wp_localize_script('wpbest-tracker', 'wpbestData', array(
        'restUrl' => esc_url_raw(rest_url('wpbest/v1/track-action')),
        'nonce' => wp_create_nonce('wp_rest'),
    ));
}
add_action('wp_enqueue_scripts', 'wpbest_enqueue_scripts');

Пример js-файла wpbest-tracker.js

document.addEventListener('DOMContentLoaded', function () {
    // Пример: отслеживаем клики по кнопкам с классом .track-action
    document.querySelectorAll('.track-action').forEach(function (button) {
        button.addEventListener('click', function () {
            const actionName = button.getAttribute('data-action') || 'button_click';
            const details = button.getAttribute('data-details') || '';

            fetch(wpbestData.restUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-WP-Nonce': wpbestData.nonce
                },
                body: JSON.stringify({
                    action: actionName,
                    details: details
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    console.log('Действие успешно зафиксировано');
                } else {
                    console.error('Ошибка при фиксации действия');
                }
            })
            .catch(error => console.error('Ошибка сети', error));
        });
    });
});

С помощью такого скрипта можно на любые кнопки добавить класс track-action и атрибуты data-action и data-details для описания события.

Обработка и использование собранных данных

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

Пример выборки последних 10 действий пользователя:

function wpbest_get_last_user_actions($user_id, $limit = 10) {
    global $wpdb;
    $table_name = $wpdb->prefix . 'wpbest_user_actions';

    return $wpdb->get_results($wpdb->prepare(
        "SELECT * FROM $table_name WHERE user_id = %d ORDER BY created_at DESC LIMIT %d",
        $user_id,
        $limit
    ));
}

Такую функцию можно вызвать в админке, в шаблонах или использовать для построения аналитики.

Дополнительные советы по безопасности и производительности

При реализации отслеживания важно учитывать нагрузку на сервер и безопасность:

• Используйте nonce для защиты REST API от CSRF.
• Ограничивайте частоту отправки событий с клиента.
• Группируйте данные или используйте очередь для записи в базу, если трафик большой.
• Проводите валидацию и санитизацию входящих данных.
• Регулярно анализируйте и очищайте старые данные, чтобы база не разрасталась.

Интеграция с плагинами WPShop для расширенного анализа

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

Также можно использовать ABC Pagination для удобного вывода и навигации по большим объёмам собранных данных в админке.

Выводы

Реализация собственного отслеживания пользовательских действий в WordPress через AJAX и REST API — гибкое решение для проектов, где требуется сбор уникальной информации о поведении посетителей. Используя приведённые примеры, вы сможете быстро внедрить такую систему и адаптировать её под свои задачи.