Как настроить отслеживание событий в WordPress без плагинов

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

Почему стоит настроить отслеживание событий без плагинов

Плагины удобны, но имеют ряд недостатков:

• Нагрузка на сайт: некоторые плагины добавляют лишние скрипты и запросы.
• Ограниченная кастомизация: не всегда можно гибко настроить события под конкретные задачи.
• Безопасность и совместимость: плагины требуют регулярного обновления и могут конфликтовать.

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

Настройка Google Analytics 4 для событий

Если у вас ещё нет GA4, создайте аккаунт и добавьте сайт. Затем получите идентификатор измерения (measurement ID), он нужен для отправки событий.

Добавьте базовый код GA4 в файл header.php вашей темы (лучше дочерней) или через action-хук в functions.php так:

function wpskills_add_ga4_script() {
    ?><!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-XXXXXXXXXX');
    </script>
    <?php
}
add_action('wp_head', 'wpskills_add_ga4_script');

Замените G-XXXXXXXXXX на ваш measurement ID.

Создание функции для отправки событий

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

function wpskills_send_event_js($event_name, $params = []) {
    $params_json = json_encode($params);
    $js = "gtag('event', '{$event_name}', {$params_json});";
    echo "<script>{$js}</script>";
}

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

Отслеживание кликов на кнопки и ссылки

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

Например, отслеживаем клики на все кнопки с классом .track-btn:

function wpskills_add_click_tracking() {
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.track-btn').forEach(function(button) {
            button.addEventListener('click', function() {
                gtag('event', 'button_click', {
                    'event_category': 'Buttons',
                    'event_label': button.textContent.trim(),
                    'value': 1
                });
            });
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'wpskills_add_click_tracking');

Теперь в Google Analytics вы увидите эти события в разделе событий.

Отслеживание отправки форм без плагинов

Если вы используете стандартные HTML-формы или формы Contact Form 7, можно добавить JS-обработчик отправки.

Пример для простой формы с id contact-form:

function wpskills_add_form_tracking() {
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var form = document.getElementById('contact-form');
        if(form){
            form.addEventListener('submit', function() {
                gtag('event', 'form_submit', {
                    'event_category': 'Forms',
                    'event_label': 'Contact Form'
                });
            });
        }
    });
    </script>
    <?php
}
add_action('wp_footer', 'wpskills_add_form_tracking');

Если форма отправляется через AJAX, нужно запускать событие в callback отправки.

Пример интеграции с плагином Clearfy Pro для оптимизации

Clearfy Pro позволяет оптимизировать загрузку скриптов и повысить скорость. Вы можете отключить стандартные события плагинов и заменить их собственным кодом отслеживания.

Например, после деактивации стандартного трекинга у Clearfy, добавьте описанные выше скрипты, чтобы минимизировать нагрузку и получить более точные события.

Бонус: как создать шорткод для вызова события из контента

Чтобы удобно запускать события из редактора, сделаем шорткод:

function wpskills_event_shortcode($atts) {
    $atts = shortcode_atts([
        'name' => 'custom_event',
        'category' => '',
        'label' => '',
        'value' => 0
    ], $atts, 'wpskills_event');

    $params = array_filter([
        'event_category' => $atts['category'],
        'event_label' => $atts['label'],
        'value' => (int)$atts['value']
    ]);

    $params_json = json_encode($params);

    return "<script>gtag('event', '{$atts['name']}', {$params_json});</script>";
}
add_shortcode('wpskills_event', 'wpskills_event_shortcode');

Пример использования: [wpskills_event name="video_play" category="Videos" label="Intro Video"]

Итоги и рекомендации по отслеживанию событий в WordPress

Ручное отслеживание событий с помощью собственного кода и Google Analytics — мощный способ контролировать аналитику без лишних плагинов. Главное — аккуратно внедрять скрипты, соблюдать структуру и проверять данные в аккаунте Google Analytics.

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

Если хотите расширить возможности, обратите внимание на плагины как Clearfy Pro для оптимизации и настройки.