@rabota/yandex-metrika

The most powerful module to work with Yandex Metrika in your Nuxt.js application

Usage no npm install needed!

<script type="module">
  import rabotaYandexMetrika from 'https://cdn.skypack.dev/@rabota/yandex-metrika';
</script>

README

Yandex Metrika

npm npm (scoped with tag)

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

or

npm install --save @rabota/yandex-metrika

Table of contents

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

Author

Alexander Belov (c) 2019