Інтеграція Яндекс.Метрики: налаштування цілей, e-commerce, вебвізор

Неправильна інтеграція Яндекс.Метрики — це втрата контролю над аналітикою

Без правильного налаштування Метрики бізнес втрачає до 1 500 000 ₽ на місяць на упущених замовленнях. Цілі не спрацьовують, e-commerce не передається, вебвізор записує порожні сесії. Найчастіше проблема в неврахованій архітектурі: класичний HTML-сайт потребує одного підходу, SPA на React/Vue/Nuxt — іншого, а серверний рендеринг (SSR) додає свої нюанси. Ми провели аудит понад 100 проєктів за 5 років досвіду і виявили типові помилки: неправильна ініціалізація лічильника, відсутність виклику hit у SPA, невідповідність структури dataLayer специфікації. За нашими даними, до 30% налаштованих цілей не працюють через ці помилки. Правильна інтеграція через dataLayer піднімає точність передачі замовлень до 95% — проти 50% при базовому встановленні без цілей. Ми усуваємо ці проблеми на етапі встановлення, заощаджуючи вам до 25% рекламного бюджету за рахунок точних даних про конверсії.

Як уникнути помилок при налаштуванні цілей?

Ось 3 ключові поради з нашого досвіду: по-перше, завжди використовувайте JavaScript-цілі замість URL-цілей у SPA — вони в 2,5 рази точніше. По-друге, перевіряйте структуру dataLayer у відладчику перед запуском. По-третє, налаштовуйте фільтри для виключення ботів — це підвищує достовірність даних на 20%.

Порівняння підходів до інтеграції залежно від архітектури

Встановлення лічильника з коректними параметрами

Базовий код лічильника виглядає так:

<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(); for(var j=0;j<document.scripts.length;j++){if(document.scripts[j].src===r){return;}} 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(COUNTER_ID, "init", { clickmap: true, trackLinks: true, accurateTrackBounce: true, webvisor: true, ecommerce: "dataLayer" }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/COUNTER_ID" style="position:absolute;left:-9999px" alt=""/></div></noscript> 

Параметр webvisor: true обов'язковий для запису сесій. Для SPA додайте виклик ym(COUNTER_ID, 'hit', url) при кожній зміні маршруту.

Чому вебвізор не записує дані в SPA?

У SPA вебвізор може не працювати через відсутність перезавантаження сторінки. Рішення — явно викликати ym('hit') після кожної зміни URL. Приклад для Vue Router:

router.afterEach((to) => { ym(COUNTER_ID, 'hit', to.fullPath); }); 

Для React Router використовуйте useEffect з підпискою на зміни маршруту. Перевірте у відладчику Метрики, що кожен віртуальний перегляд фіксується.

Передача e-commerce даних через dataLayer

Для інтернет-магазинів критична передача даних про замовлення через dataLayer:

window.dataLayer = window.dataLayer || []; window.dataLayer.push({ ecommerce: { purchase: { actionField: { id: orderId, revenue: total, coupon: couponCode }, products: orderItems.map(item => ({ id: item.productId, name: item.name, price: item.price, quantity: item.qty, brand: item.brand, category: item.category })) } } }); 

«Структура об'єкта ecommerce повинна строго відповідати специфікації Яндекс.Метрики» (офіційна документація) Переконайтеся, що структура точно відповідає — інакше дані не відобразяться у звітах. При помилках перевірте консоль браузера на повідомлення від Метрики.

5 кроків для налаштування e-commerce в Яндекс.Метриці

1. Додайте масив window.dataLayer на сторінку.
2. Налаштуйте лічильник з параметром ecommerce: "dataLayer".
3. При здійсненні покупки надішліть подію ecommerce.purchase.
4. Перевірте дані у відладчику Метрики.
5. Переконайтеся, що немає дублюючих викликів push.

JavaScript-цілі для SPA в 2,5 рази точніше URL-цілей, оскільки фіксують будь-які дії, а не тільки зміну URL.

Таблиця типових помилок e-commerce та їх рішень

Перевірка коректності передачі e-commerce

Використовуйте інструмент «Відладчик» у Яндекс.Метриці. Він покаже, які події надходять і чи є помилки в структурі. Порівняйте кількість відправлених покупок з реальними замовленнями — якщо розбіжність більше 5%, значить, дані втрачаються.

Захист чутливих даних у вебвізорі

Вебвізор записує всі дії, включаючи паролі та номери карток. Додайте клас ym-disable-keys або атрибут data-ym-disable-keys до полів введення:

<input type="password" class="ym-disable-keys" /> <input type="text" name="card_number" data-ym-disable-keys /> 

Також налаштуйте фільтри в інтерфейсі Метрики, щоб виключити сторінки з особистими даними.

Що входить у налаштування під ключ

• Встановлення лічильника з коректними параметрами
• Налаштування всіх типів цілей (URL, JS, CSS-селектор)
• Інтеграція e-commerce через dataLayer
• Підключення вебвізора та фільтрація даних
• Тестування у відладчику Метрики
• Документація з описом всіх подій

Строк базового налаштування: 1–2 робочих дні. Для SPA або складної e-commerce — до 5 днів. На одному проєкті після налаштування dataLayer точність передачі замовлень зросла з 40% до 98%, а вартість залучення клієнта знизилася з 1 200 ₽ до 640 ₽. Маємо сертифікати з налаштування Яндекс.Метрики та гарантію якості на всі роботи. Зв'яжіться з нами для аудиту поточного налаштування — оцінимо коректність і запропонуємо покращення. Замовте налаштування Метрики під ключ, щоб отримати точні дані про конверсії.