- Добавьте зависимость
@virage-dev/nuxt-yandex-metrika
# npm
npm install --save-dev @virage-dev/nuxt-yandex-metrika
# pnpm
pnpm add -D @virage-dev/nuxt-yandex-metrika
- Добавьте модуль
@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 | Настройки метрики |
В дев сборке реальных запросов в метрику происходить не будет
Name | Default value | Type | Description |
---|---|---|---|
accurateTrackBounce | true | Boolean | Number |
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 |
params | — | Object | Array |
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:
{
// Ниже приведены настройки по умолчанию
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 метрики меняется в зависимости от условий, используйте функцию 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>
Используйте
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