1.3.0 • Published 6 days ago
yandex-metrika-vue3 v1.3.0
Vue Yandex Metrika Plugin with TypeScript
yandex-metrika-vue3 allows you to send data about visited pages to Yandex Metrika.
Installation
Install with yarn:
$ yarn add yandex-metrika-vue3
Install with npm:
$ npm install yandex-metrika-vue3 --save
Ways to use
Autotracking
Pass the VueRouter
instance to the plugin and let it handle everything for you (Metrika API is also available):
// 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
})
Manual tracking
Works without router: Metrika API
// 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
<template>
<button @click="$yandexMetrika.hit(path)"></button>
</template>
Using in script
<script setup>
import { useYandexMetrika } from 'yandex-metrika-vue3'
const yandexMetrika = useYandexMetrika()
const foo = () => {
yandexMetrika.hit(path)
}
</script>
Options
/* 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
},