Как настроить события яндекс-метрики в Nuxt 3?

Question

[vladimirir]

На сайте на Nuxt 3 стоит модуль yandex-metrika-module-nuxt3 , всё с инициализацией Яндекс-метрики работает нормально. Не могу разобраться, как получить объект ym внутри компонента для того, чтобы тригерить события (к примеру ym(56555551,'reachGoal','form_sent') ). Кто-нибудь сталкивался с подобным?

Answer 1

[Данила]

Так используйте глобальную переменную window.ym, которая становится доступной после инициализации метрики.
В вашем компоненте просто проверяйте наличие переменной перед вызовом reachGoal:

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

<script setup>
const sendGoal = () => {
  if (window.ym) {
    window.ym(56555551, 'reachGoal', 'form_sent')
  }
}
</script>

Comments

[vladimirir]

В файлах модуля видно, что используется window.ym, в консоли видно, что изначально проходит инициализация Яндекс-метрики, но при вызове window.ym в компоненте пишет всё равно, что ym undefined

[Данила]

vladimirir, возможно объект ym может быть доступен не сразу при рендере компонента, так как он асинхронно загружается и инициализируется после первоначального рендеринга страницы. Можем смастерить небольшой обработчик для проверки доступности этого объекта:

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

<script setup>
import { ref, onMounted } from 'vue'

const isYandexMetrikaLoaded = ref(false)

onMounted(() => {
  const checkMetrika = setInterval(() => {
    if (window.ym) {
      isYandexMetrikaLoaded.value = true
      clearInterval(checkMetrika)
    }
  }, 500)
})

const sendGoal = () => {
  if (isYandexMetrikaLoaded.value) {
    window.ym(56555551, 'reachGoal', 'form_sent')
  }
}
</script>

[vladimirir]

Данила, всё равно не видит ym в windows почему-то

[Данила]

vladimirir, проверьте правильность загрузки модуля в проекте. Рекомендую поставить такие настройки:

export default defineNuxtConfig({
  modules: ['yandex-metrika-module-nuxt3'],
  yandexMetrika: {
    id: 'YOUR_METRICA_ID',
    webvisor: true,
    clickmap: true,
    trackLinks: true,
    accurateTrackBounce: true,
    defer: true,
  }
})

И дальше в компоненте ждите, пока появится объект:

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

<script setup>
import { ref, onMounted } from 'vue'

const sendGoal = () => {
  if (typeof window.ym === 'function') {
    window.ym(56555551, 'reachGoal', 'form_sent')
  } else {
    console.error('Yandex Metrica is not loaded yet.')
  }
}

onMounted(() => {
  const waitForYm = setInterval(() => {
    if (typeof window.ym === 'function') {
      console.log('Yandex Metrica is loaded')
      clearInterval(waitForYm)
    }
  }, 500)
})
</script>

[vladimirir]

Данила, спасибо большое. Но всё равно не видит почему-то

[Данила]

vladimirir, а сам модуль у вас точно инициализируется корректно? проверьте ошибки в консоли

[vladimirir]

Данила, да. И ошибок никаких нет, пишет в самом начале в консоли, что Яндекс метрика инициализирована. Хиты по страницам видит, об этом тоже в консоли пишет. Но с вызовом самостоятельным window.ym как-то всё мимо

[vladimirir]

Это я очень сильно тупанул. В самом модуле видно, что он просто не даёт доступа к ym на dev-е, только в прод-среде.