Интеграция Яндекс.Метрики на сайт
Яндекс.Метрика — основной инструмент веб-аналитики для российских сайтов. Предоставляет карты кликов, вебвизор (запись сессий), воронки, сегменты и интеграцию с Яндекс.Директ.
Установка
<!-- Метатег Яндекс.Вебмастера отдельно, счётчик так: -->
<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>
Цели
Цели — конверсии, которые Метрика отслеживает. Типы целей:
-
URL — посещение страницы
/thank-you -
JavaScript — вызов
ym(ID, 'reachGoal', 'goal_name') - CSS-селектор — клик по элементу
- Количество просмотров
// Достижение цели
ym(COUNTER_ID, 'reachGoal', 'order_placed', {
order_id: orderId,
order_price: total
});
// Отправить параметр посетителя
ym(COUNTER_ID, 'params', { user_id: userId, user_plan: 'pro' });
E-commerce через 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
}))
}
}
});
SPA (React/Vue)
// При смене маршрута
router.afterEach((to) => {
ym(COUNTER_ID, 'hit', to.fullPath);
});
Вебвизор и чувствительные данные
Вебвизор записывает действия пользователей. Поля с паролями, номерами карт и персональными данными нужно исключить:
<input type="password" class="ym-disable-keys" />
<input type="text" name="card_number" data-ym-disable-keys />
Срок установки: несколько часов для базовой интеграции с целями и e-commerce.