Vue Yandex Metrika Plugin with TypeScript

vue-yandex-metrika-ts allows you to send data about visited pages to Yandex Metrika.

Installation

Install with yarn:

$ yarn add vue-yandex-metrika-ts

Install with npm:

$ npm install vue-yandex-metrika-ts --save

Ways to use

Vue 2

Root import is Vue 2 compatible (same as v1.x):

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueYandexMetrika from 'vue-yandex-metrika-ts'

const router = new VueRouter({...})

Vue.use(VueYandexMetrika, {
  id: XXXXXXXX,
  router,
  env: process.env.NODE_ENV,
})

Explicit Vue 2 subpath (optional):

import VueYandexMetrika from 'vue-yandex-metrika-ts/vue2'

Vue 3

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import VueYandexMetrika from 'vue-yandex-metrika-ts/vue3'

const app = createApp(App)
const router = createRouter({ history: createWebHistory(), routes: [] })

app.use(router)
app.use(VueYandexMetrika, {
  id: XXXXXXXX,
  router,
  env: import.meta.env.MODE,
})

app.mount('#app')

import { useMetrika } from 'vue-yandex-metrika-ts/vue3'

// in <script setup>
const metrika = useMetrika()
metrika.reachGoal('SIGNUP')

Helpers API

import {
  loadMetrikaScript,
  createMetrika,
  startTracking,
} from 'vue-yandex-metrika-ts/helpers'

Autotracking

Pass the VueRouter instance to the plugin and let it handle everything for you (Metrika API is also available):

// Vue 2
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueYandexMetrika from 'vue-yandex-metrika-ts'

const router = new VueRouter({...})

Vue.use(VueYandexMetrika, {
  id: XXXXXXXX,
  router,
  env: process.env.NODE_ENV,
})

Manual tracking

Works without router. Full Metrika API is available on $metrika / getCurrentInstance()?.appContext.config.globalProperties.$metrika.

Vue.use(VueYandexMetrika, {
  id: XXXXXXXX,
  env: 'production',
  options: {
    // initial visit/visitor params
    params: { section: 'landing' },
    userParams: { UserID: 42 },
    // defer: true — disable auto pageview; call hit() manually on start
    // trackHash: true — track hash changes without vue-router
  },
})

// page view with visit params
this.$metrika.hit('/checkout', {
  title: document.title,
  referer: '/cart',
  params: {
    order_price: 1990,
    currency: 'RUB',
    step: 'payment',
  },
})

// current URL (url is optional — defaults to window.location.href)
this.$metrika.hit()

// goals, visit and visitor params
this.$metrika.reachGoal('ORDER', { order_price: 1990, currency: 'RUB' })
this.$metrika.params({ event: 'filter', value: 'price' })
this.$metrika.userParams({ plan: 'pro' })

// advanced matching (HTTPS only)
this.$metrika.firstPartyParams({
  email: '[email protected]',
  phone_number: '79001234567',
})

Autotracking with router sends only hit(path, { referer }). Use manual hit() when you need title, params, or other fields.

Options:

| Name | Description | Required | Default | | -------------- | ------------------------------------------------------------------------------------------------------- | -------- | ---------------------------------------------------------- | | id | Your tracking id | True | null | | router | Autotracking if the router is passed, otherwise: manual tracking | False | null | | env | API calls are performed only if env is "production" | False | development | | scriptSrc | Src of metrika script to use | False | https://mc.yandex.ru/metrika/tag.js | | debug | If env is not "production" and debug is true: API calls are replaced by console.log() | False | false | | ignoreRoutes | List of ignored routes names | False | [] | | skipSamePath | Do not track a page visit if previous and next routes URLs match | False | true | | options | Original Yandex Metrika options | False | {clickmap:true, trackLinks:true, accurateTrackBounce:true} |

Peer dependencies

• vue ^2.6.0 || ^3.0.0 (required)
• vue-router ^3.0.0 || ^4.0.0 || ^5.0.0 (optional, only for autotracking)

• Big thanks to vue-yandex-metrika to learn how to write the plugin.