Інтеграція Яндекс.Метрики
Яндекс.Метрика — основний інструмент веб-аналітики для російських сайтів. Забезпечує карти кліків, вебвізор (запис сесій), воронки, сегменти та інтеграцію з Яндекс.Директ.
Встановлення
<!-- Метатег Яндекс.Вебмастера окремо, лічильник так: -->
<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.