В проектах на Nuxt 3 вы можете использовать модуль `yandex-metrika-module-nuxt3`, чтобы удобно интегрировать Яндекс.Метрику. Для отправки событий в Яндекс.Метрику, такие как `ym(XXXXXXXX,'reachGoal','goal_name')`, вам нужно будет настроить модуль и получить доступ к `ym` внутри ваших компонентов.
### Установка модуля
Если вы еще не установили модуль, вы можете добавить его, выполнив команду:
```bash
npm install yandex-metrika-module-nuxt3
```
### Настройка модуля
После установки модуля добавьте его в файл конфигурации `nuxt.config.js`:
```javascript
export default {
modules: [
'yandex-metrika-module-nuxt3',
],
yandexMetrika: {
id: '56555551', // Ваш ID счетчика Яндекс.Метрики
webvisor: true,
// другие параметры конфигурации
}
}
```
### Использование в компонентах
Для получения доступа к объекту `ym`, вы можете использовать функцию `$ym` в любом компоненте Nuxt. Пример использования:
```vue
<template>
<div>
<button @click="sendEvent">Отправить событие</button>
</div>
</template>
<script setup>
import { defineComponent } from 'vue'
defineComponent({
setup() {
const sendEvent = () => {
// Пожалуйста, проверьте, что $ym доступен
if (typeof window !== 'undefined' && window.ym) {
window.ym(56555551, 'reachGoal', 'form_sent');
}
}
return {
sendEvent
}
}
});
</script>
```
### Проверка доступности `ym`
Как видно в примере, перед вызовом функции `ym` удобно проверить, доступен ли объект `window.ym`. Это предотвращает возможные ошибки, если функция еще не инициализирована.
### Подведение итогов
Теперь у вас есть рабочий пример, как настроить и использовать Яндекс.Метрику в вашем Nuxt 3 проекте. Вы можете размещать вызовы `ym` для различных событий в зависимости от ваших требований. Не забудьте протестировать отправку событий в реальном времени, чтобы убедиться, что всё работает корректно.