Yandex Metrika для Nuxt 3

Установка

1. Добавьте зависимость @virage-dev/nuxt-yandex-metrika

# npm
npm install --save-dev @virage-dev/nuxt-yandex-metrika

# pnpm
pnpm add -D @virage-dev/nuxt-yandex-metrika

1. Добавьте модуль @virage-dev/nuxt-yandex-metrika в файл конфигурации nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    // другие модули...
    "@virage-dev/nuxt-yandex-metrika"
    ],
});

Настройки

После установки модуля в конфигурации nuxt появится ключ yandexMetrika

Параметры

| Параметр | default | Тип | Описание | | ------------ | --------------------------------------- | ---------------- | ---------------------------------------------- | | id | undefined | string | id метрики | | debug | process.env.NODE_ENV !== "production" | boolean | Контролирует работу логирования методов | | delay | 0 | number | Откладывает подключение скрипта метрики (ms) | | cdn | false | boolean | Использовать ли CDN версию скрипта метрика | | verification | null | string \| null | ??? | | options | { webvisor: true } | options | Настройки метрики |

В дев сборке реальных запросов в метрику происходить не будет

Параметр options - настройки метрики

| Name | Default value | Type | Description | | ------------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | accurateTrackBounce | true | Boolean | Number | Accurate bounce rate The parameter can accept these values: true — Enable the accurate bounce rate, with a non-bounce event registered after 15000 ms (15 s). false — Don't enable the accurate bounce rate. (integer) — Enable the accurate bounce rate. Non-bounce events are recorded after ms. | | childIframe | false | Boolean | Whether to record iframe contents without a tag in a child window | | clickmap | true | Boolean | Whether to collect data for a click map | | defer | false | Boolean | Whether to disable automatically sending data during tag initialization | | ecommerce | false | Boolean | String | Array | Collect data for e-commerce — Ecommerce. true — Enable e-commerce data collection. Data is transmitted via a JavaScript array named dataLayer in the global namespace (window.dataLayer) false — Disable Ecommerce data collection. (String) — Enable Ecommerce data collection. Data is transmitted via a JavaScript array named in the global namespace (window.) (Array) — Enable Ecommerce data collection. Data is transmitted via a JavaScript | | params | — | Object | Array | Session parameters transmitted during tag initialization To transmit session parameters at any other time, use the params method | | userParams | — | Object | Parameters of site users that are transmitted when initializing the tag To transmit user parameters at any other time, use the userParams method | | trackHash | false | Boolean | Hash tracking in the browser's address bar | | trackLinks | true | Boolean | Track clicks on outbound links | | trustedDomains | — | Array | Indicates a trusted domain for recording the contents of a child iframe. Contains the domain address of the parent window | | type | 0 | Number | Tag type. 1 for YAN | | webvisor | false | Boolean | Whether to use Session Replay | | triggerEvent | false | Boolean | Whether to check if the tag is ready |

For more information:

• Documentation for Ya.Metrika

Параметры по умолчанию

{
  // Ниже приведены настройки по умолчанию
  yandexMetrika: {
    id: undefined,
    debug: process.env.NODE_ENV !== "production",
    delay: 0,
    cdn: false,
    verification: null,
    options: {
        accurateTrackBounce: true,
        childIframe: true,
        clickmap: true,
        defer: false,
        ecommerce: false,
        trackHash: false,
        trackLinks: true,
        webvisor: false,
        triggerEvent: false,
        sendTitle: true,
    },
  }
}

Динамический id метрики

Если ваш id метрики меняется в зависимости от условий, используйте функцию init, чтобы проинициализировать метрику с нужным id. Желательно вызывать инициализацию внутри плагина Nuxt.

export default defineNuxtPlugin({
  setup() {
    if (import.meta.client) {
      const { init } = useYandexMetrika();
      init(getMetrikaId());
    }
  },
});

<script setup lang="ts">

const { reachGoal } = useYandexMetrika();

</script>

<template>
    <button @click="reachGoal('click', {})">click</button>
</template>

• For more information

Разработка / Поддержка

Используйте pnpm

# Установка зависимостей
pnpm install

# Подготовить песочницу (обязательно перед первым запуском)
pnpm run dev:prepare

# Запуск песочницы
pnpm run dev


# ESLint
pnpm run lint

# Vitest
pnpm run test
pnpm run test:watch

# Сделать релиз
pnpm run release