Yandex Metrika for modern frameworks like React, Vue, Svelte, etc.
👨💻 Dev environment support
🤖 SSR support
🚀 3 Init strategy by delay options for better SEO metrics
😎 Self hosted option for bypass blocks
✨ Easy init:
import { initMetrika } from 'Modern-Yandex-Metrika'
initMetrika(111222333);Init script in your Main Layout, default options are presented:
import { initMetrika } from 'Modern-Yandex-Metrika'
let options = {
src: 'yandex', // Metrika library source: yandex, cdn, yours
delay: true, // Load Library: onLoad, timer, and immediately
dev: false, // Prevent load Library and send events in dev env
counters: [{ // Pass counter options via object: [{…},{…}]
id: ['string'],
trackLinks : true,
accurateTrackBounce: true,
clickmap: false,
['rest options'] // See more on ##Counter options
}],
}
initMetrika(options);It's official recommendation by Yandex1 but not necessary.
Create ym function inside <head> tag of your main html template.
<script>
window.ym=function(){(ym.a=ym.a||[]).push(arguments)};
ym.l = 1 * new Date();
</script>Default options are presented
-
src: 'yandex'
yandex
Use default Metrika JS library url.cdn
Use the official CDN.url string
It's better option for bypassing adBlock or Sanctions and Censors.
Download last Metrika JS Library, rename, host on your side and pass url to:initMetrika({src:'/static/metrika.js', counter:222333444});
-
dev: false
In dev mode:- All counters will be disabled.
- JS Library will not be loaded.
But also:
- All method will be works.
- Methods will show results in console without send any data.
- You'll see all init and methods errors.
-
counter
-
delay
Just pass counter id for default options:
initMetrika(111222333);
// Or more id's for several counters:
initMetrika(111222333, 222333444);
// Or even pass additional options:
initMetrika(
111222333,
{ name: 'dev', id: 222333444, webvisor: true }
);
// Or pass init options:
initMetrika({
delay: 3000,
counters: [
111111222,
{ disable: isDev(), name: 'dev', id: 222333444 }
]
});Default options are presented
-
disable: false
If all counters is activated, the Metrika JS Library will not be loaded.
💡 You can use this to separate dev and production Metrika accounts. -
id: number
Metrika counter id. You can find it here in first column -
name: number or string
Custom counter name. By this name you can call the counter in Methods of Yandex Metrika -
accurateTrackBounce: true
Register non-bounce eventtrue: non-bounce event registered after 15000 ms.number: non-bounce events are recorded after the ms.false: disable.
-
childIframe: false
Record iframe contents without a tag in a child window -
clickmap: false
Collect data for a Click map -
defer: false
Disable automatically sending data to Metrika.
⚠️ Danger zone: if istrueyou must trigger all events by yourself, or app metrics will be empty. -
ecommerce: false
Collect data for Ecommerce.true: transmit data via global object:window.dataLayer.string: custom name for global object.array: transmit data in the array.false: disable.
-
params: undefined
Transmit session params during initialization.
To transmit session parameters at any other time, use the Params method -
userParams: undefined
Transmit user params during initialization.
To transmit user parameters at any other time, use the Params method
Footnotes
-
By official guides we must init
ymfunction on top level inside the<head>tag. You may have noticed the timestampym.l? They don't say how it used. Instead, they can useperfomans.now()for get page live time. I think it need for better time tracking 🤷♂️ Actually Metrika is a Black Box, and we don't know how they used it. ↩