Настроить счётчик — это полдела. Настроить цели, которые действительно работают на аналитику, — задача, требующая технического подхода. Ниже — мой подход как веб-разработчика: от простых кликов до кастомных событий с JavaScript и jQuery.
🔧 Шаг 1. Установка счётчика
Вставьте в <head> вашего сайта (или используйте плагин «Insert Headers and Footers») следующий код:
<script type="text/javascript">
(function(m,e,t,r,i,k,a){
m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();
k=e.createElement(t),a=e.getElementsByTagName(t)[0],
k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
})(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(XXXXXXX, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true,
webvisor:true
});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/XXXXXXX" style="position:absolute; left:-9999px;" alt="🧠 Профессиональная настройка целей в Яндекс Метрике: взгляд веб-разработчика" /></div></noscript>
Замените XXXXXXX на ID вашего счётчика.
🎯 Шаг 2. Добавляем цель через JavaScript
Допустим, у вас на сайте есть кнопка:
<button id="call-order">Заказать звонок</button>
Добавьте скрипт (можно вставить в футер через редактор темы или плагин):
document.getElementById('call-order').addEventListener('click', function() {
ym(XXXXXXX, 'reachGoal', 'call_order');
});
📸 [Скриншот: создание цели в интерфейсе Яндекс Метрики → тип «JavaScript-событие», название: call_order]
⚙️ Пример на jQuery
Если на сайте используется jQuery:
$('#call-order').on('click', function() {
ym(XXXXXXX, 'reachGoal', 'call_order');
});
Для динамических кнопок — используем делегирование:
$(document).on('click', '.track-goal', function() {
const goal = $(this).data('goal');
if (goal) {
ym(XXXXXXX, 'reachGoal', goal);
}
});
HTML пример:
<button class="track-goal" data-goal="download_pdf">Скачать PDF</button>
📌 Совет: Подключите jQuery, если его нет, через functions.php:
function enqueue_jquery_script() {
wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'enqueue_jquery_script');
📩 Отслеживание отправки формы (AJAX)
$('#contact-form').on('submit', function(e) {
e.preventDefault();
$.ajax({
url: '/send.php',
method: 'POST',
data: $(this).serialize(),
success: function() {
ym(XXXXXXX, 'reachGoal', 'form_sent');
}
});
});
📸 [Скриншот: цель в Метрике с именем form_sent]
🧩 Составные цели
Чтобы построить полноценную воронку, используйте составные цели:
- Просмотр карточки →
product_view - Клик «Добавить в корзину» →
add_to_cart - Переход к оплате →
checkout
Каждое действие — отдельный reachGoal:
ym(XXXXXXX, 'reachGoal', 'product_view');
📸 [Скриншот: составная цель с тремя шагами]
🛠 Отладка
Используйте расширение Yandex Metrica Debugger или смотрите события в вебвизоре.
✅ Заключение
Цели в Метрике — это не просто галочка для аналитики. Это инструмент, который напрямую влияет на понимание пользователя и эффективность сайта. Используйте JavaScript или jQuery, интегрируйте цели в логику проекта — и аналитика начнёт приносить реальные инсайты.
