Yandex.Metrica Integration

Yandex.Metrica Integration

Yandex.Metrica is the primary web analytics tool for Russian websites. It provides clickmaps, webvisor (session recording), funnels, segments, and integration with Yandex.Direct.

Installation

<!-- Yandex.Webmaster meta tag separately, counter like this: -->
<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>

Goals

Goals are conversions that Metrica tracks. Goal types:

• URL — visiting a page like /thank-you
• JavaScript — calling ym(ID, 'reachGoal', 'goal_name')
• CSS selector — clicking an element
• Page view count

// Trigger a goal
ym(COUNTER_ID, 'reachGoal', 'order_placed', {
    order_id:    orderId,
    order_price: total
});

// Send user parameters
ym(COUNTER_ID, 'params', { user_id: userId, user_plan: 'pro' });

E-commerce via 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)

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

Webvisor and Sensitive Data

Webvisor records user actions. Fields with passwords, card numbers, and personal data should be excluded:

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

Setup time: a few hours for basic integration with goals and e-commerce.