UNPKG

yandex-metrika-vue3

Version:

**yandex-metrika-vue3** allows you to send data about visited pages to [Yandex Metrika]. ## Installation Install with [yarn]: ```bash $ yarn add yandex-metrika-vue3 ``` Install with [npm]: ```bash $ npm install yandex-metrika-vue3 --save ``` ## Ways to us

106 lines (82 loc) 2.07 kB
# Vue Yandex Metrika Plugin with TypeScript **yandex-metrika-vue3** allows you to send data about visited pages to [Yandex Metrika]. ## Installation Install with [yarn]: ```bash $ yarn add yandex-metrika-vue3 ``` Install with [npm]: ```bash $ npm install yandex-metrika-vue3 --save ``` ## Ways to use ### <a name="autotracking">Autotracking</a> Pass the `VueRouter` instance to the plugin and let it handle everything for you ([Metrika API] is also available): ```javascript // your main.js import { createApp } from 'vue'; import { createRouter } from "vue-router"; import { initYandexMetrika } from 'yandex-metrika-vue3'; const router = new VueRouter({...}) // your routes const app = createApp(App) app.use(initYandexMetrika, { id: XXXXXXXX, router: router, env: process.env.NODE_ENV // other options }) ``` ### <a name="manual">Manual tracking</a> Works without router: [Metrika API] ```javascript // your main.js import { createApp } from 'vue'; import { initYandexMetrika } from 'yandex-metrika-vue3'; const app = createApp(App) app.use(initYandexMetrika, { id: XXXXXXXX, env: process.env.NODE_ENV, // other options }); ``` --- Using in template ```html <template> <button @click="$yandexMetrika.hit(path)"></button> </template> ``` Using in script ```vue <script setup> import { useYandexMetrika } from 'yandex-metrika-vue3' const yandexMetrika = useYandexMetrika() const foo = () => { yandexMetrika.hit(path) } </script> ``` Options ```javascript /* If you want to override the default options, * then add this to the initialization function in main.js */ // default options options: { accurateTrackBounce: true, clickmap: true, defer: false, ecommerce: false, params: [], userParams: {}, trackHash: false, trackLinks: true, type: 0, webvisor: false, triggerEvent: false }, ``` [yandex metrika]: https://metrika.yandex.ru [yarn]: https://yarnpkg.com [npm]: https://npmjs.com [metrika api]: https://yandex.ru/support/metrika/objects/method-reference.html