Как можно настроить события Яндекс.Метрики в проекте на Nuxt 3?

Как получить доступ к объекту `ym` внутри компонента Nuxt 3, используя модуль yandex-metrika-module-nuxt3? Мне нужно триггерить события, например, ym(56555551,'reachGoal','form_sent'). Есть ли у кого-то опыт в этом?
  • 19 сентября 2024 г. 11:13
Ответы на вопрос 2
В проектах на 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` для различных событий в зависимости от ваших требований. Не забудьте протестировать отправку событий в реальном времени, чтобы убедиться, что всё работает корректно.
Так используйте глобальную переменную window.ym, которая становится доступной после инициализации метрики. 
В вашем компоненте просто проверяйте наличие переменной перед вызовом reachGoal:

<template>
  <button @click="sendGoal">Отправить форму</button>
</template>

<script setup>
const sendGoal = () => {
  if (window.ym) {
    window.ym(56555551, 'reachGoal', 'form_sent')
  }
}
</script>
Похожие вопросы