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
},