Yandex Metrika

Add Yandex Metrika to your nuxt.js application.

This plugins automatically sends first page and route change events to Yandex Metrika.

yarn add @rabota/yandex-metrika

npm install --save @rabota/yandex-metrika

Features
Setup
Options
Examples
Methods
License

Features

Yandex Metrica 2.0
Supports multiple IDs
You can pass an async function to provide IDs
Easy-to-use API
Automatically handling all SPA caveats
Includes noscript content (noscript: true option)
Logging

Note: Yandex Metrika is disabled in development mode by default. You can set development option to true to run Yandex Metrika in development mode.

Setup

Add @rabota/yandex-metrika dependency using yarn or npm to your project
Add transpile option to build section of nuxt.config.js

transpile: [
  '@rabota/analytics-layer',
  '@rabota/yandex-metrika'
]

Add @rabota/yandex-metrika to modules section of nuxt.config.js

{
  modules: [
    ['@rabota/yandex-metrika', [
      staticCounters: [{
        id: 5432xxxx,
        webvisor: true,
        clickmap: true,
        trackLinks: true,
        accurateTrackBounce: true,
      }],
      dynamicCounters (context) {
        // you can load it asynchronously and return promise
        return [{
          id: 1234xxxx,
          clickmap: true,
          trackLinks: true,
          accurateTrackBounce: true,
        }, {
          id: 4567xxxx,
          clickmap: true,
          trackLinks: true,
          accurateTrackBounce: true,
        }];
      },
      noscript: true, // insert `noscript` content for each counter
      logging: true, // logs all events to each counter
      development: true
    }]
  ]
}

Options

`staticCounters`

{Object|Array<Object>} Object or Array of objects

Each object contains Yandex.Metrika options for target counter. staticCounters inserts YM initialization configs during the server rendering.

`dynamicCounters`

{Function}

Could be an async function that returns one or array of configs.

You can find all Yandex Metrika options here

`noscript`

{boolean} Insert noscript content for each counter (default: true).

`logging`

{boolean} Output all sending events for each counter (default: false).

`cdn`

{boolean} Use CDN (default: false).

`development`

{boolean} set true if you want to run metrika in dev mode. By default metrika is disabled in dev mode.

For more information:

Methods

this.$ym - is a Layer Instance.

methods or properties you can find here: @rabota/analytics-layer/src/layer.js.

Examples

After setup you can access the metrika through this.$ym instance in any component you need.

export default {
  mounted () {
    this.$ym.event( 'event-name', params );
  }
}

Or you can send to a specific counter ID

export default {
  mounted () {
    this.$ym.eventTo( 1234xxxx, 'event-name', params );
  }
}

License

MIT

RabotaRu/yandex-metrika