Yandex Metrika Plugin for Vue.js

1.8.3 · abandoned · verified Sun Apr 19

Vue Yandex Metrika is a utility package designed to integrate Yandex Metrika tracking into Vue.js applications. It simplifies the process of sending page view data to Yandex Metrika, offering both automatic tracking when integrated with Vue Router and manual tracking capabilities. The current stable version is v1.8.3, released in September 2019, indicating a lack of active development since then. Its primary differentiator is its direct integration with the Vue ecosystem, abstracting the raw Yandex Metrika API calls. It allows configuration of tracking ID, environment-based tracking (e.g., only in production), script source, debug mode, route ignoring, and other Yandex Metrika counter options, providing a convenient wrapper for web analytics in Vue projects. Given its last update in 2019, it primarily supports older Vue 2 applications and may not be compatible with Vue 3 without community efforts or significant adaptations.

Common errors

```
TypeError: Cannot read properties of undefined (reading 'hit')
```
cause The $metrika object is not available on the Vue instance, likely due to the plugin not being installed correctly or called before Vue.use().

fix Ensure `Vue.use(VueYandexMetrika, { ... })` is called at the application's entry point before any component tries to access `this.$metrika`.
```
Yandex Metrika counter ID is not set.
```
cause The `id` option, which specifies your Yandex Metrika counter ID, was not provided or was null/undefined during plugin initialization.

fix Provide a valid Yandex Metrika counter ID in the plugin options: `Vue.use(VueYandexMetrika, { id: 'YOUR_COUNTER_ID', ... })`.
```
ReferenceError: Vue is not defined
```
cause The Vue library itself has not been imported or made globally available before attempting to use the plugin.

fix Ensure `import Vue from 'vue'` is present at the top of your main JavaScript file where the plugin is being installed.

Warnings

breaking The `userParam` method was renamed to `userParams`. Calls using the old name will fail.
Fix: Update any calls from `this.$metrika.userParam()` to `this.$metrika.userParams()`.
gotcha API calls for Yandex Metrika are only performed if the `env` option matches 'production' by default. If you are testing in a development environment, you need to set `debug: true` or ensure `env` is not 'production'.
Fix: For testing in non-production environments, set `debug: true` in your Vue.use() options: `Vue.use(VueYandexMetrika, { ..., env: process.env.NODE_ENV, debug: true })`.
gotcha The package has not been updated since September 2019 (v1.8.3). It is primarily designed for Vue 2 applications and may not be compatible with Vue 3 without significant manual adaptation or a community fork.
Fix: If targeting Vue 3, consider using an alternative, or be prepared to fork and update the package for Vue 3 compatibility. For Vue 2, proceed with caution regarding potential unpatched bugs or security vulnerabilities.
gotcha The `skipSamePath` option is `true` by default, preventing tracking of consecutive page visits to the same URL. This might lead to undercounting if users refresh or navigate back to the same page.
Fix: If you need to track repeated visits to the same URL, set `skipSamePath: false` in the plugin options: `Vue.use(VueYandexMetrika, { ..., skipSamePath: false })`.

Install

npm install vue-yandex-metrika npm
yarn add vue-yandex-metrika yarn
pnpm add vue-yandex-metrika pnpm

Imports

VueYandexMetrika

wrong:

import { VueYandexMetrika } from 'vue-yandex-metrika'

correct:

import VueYandexMetrika from 'vue-yandex-metrika'

This package exports a default plugin object for Vue.use().

this.$metrika.hit
wrong:
```
this.$metrika.reachGoal(goalName)
```
correct:
```
this.$metrika.hit(path, options)
```
After Vue.use(), the plugin exposes a global $metrika object on Vue instances for manual tracking methods. Ensure 'hit' is used for page views, not 'reachGoal' unless explicitly sending a goal.
Vue.use
wrong:
```
VueYandexMetrika.install(Vue, { id: XXXXXXXX })
```
correct:
```
Vue.use(VueYandexMetrika, { id: XXXXXXXX, router })
```
Vue plugins are typically installed using Vue.use(). The second argument is an options object for the plugin.

Quickstart

This quickstart demonstrates the automatic page view tracking with Vue Router, configuring Yandex Metrika with a placeholder ID, environment-specific settings, debug mode, and additional Metrika options.

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

const routes = [
  { path: '/', component: { template: '<div>Home Page</div>' }, name: 'home' },
  { path: '/about', component: { template: '<div>About Page</div>' }, name: 'about' },
  { path: '/contact', component: { template: '<div>Contact Page</div>' }, name: 'contact' }
];

const router = new VueRouter({ routes, mode: 'history' });

Vue.use(VueYandexMetrika, {
  id: process.env.VUE_APP_YANDEX_METRIKA_ID ?? '12345678',
  router: router,
  env: process.env.NODE_ENV,
  debug: process.env.NODE_ENV !== 'production',
  options: {
    clickmap: true,
    trackLinks: true,
    accurateTrackBounce: true,
    webvisor: true
  }
});

new Vue({
  router,
  template: `
    <div id="app">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/contact">Contact</router-link>
      <router-view></router-view>
    </div>
  `
}).$mount('#app');

view raw JSON →