Code Monkey home page Code Monkey logo

Comments (8)

JustFly1984 avatar JustFly1984 commented on July 1, 2024

@Aleks-developer Я поковырялся в коде, и нашёл решение - инициализатор надо импортировать как функцию в index.js - и запускать с 3 агрументами

import YMInitializer from 'react-yandex-metrika/lib/init'

YMInitializer([yandexMetrikaKey], { webvisor: true }, '2')

самое главное запускать эту функцию до самого кода реакта

а дальше в онкликах и роутах можно использовать ym как в документации

from react-yandex-metrika.

LeeTwelve avatar LeeTwelve commented on July 1, 2024

@JustFly1984 Так не работает, так как даже нет никакой сетевой активности

from react-yandex-metrika.

JustFly1984 avatar JustFly1984 commented on July 1, 2024

Well, at the end I wrote my own script:

const isBrowser = typeof document !== 'undefined'

export const injectScript = ({ url, id, onSuccess, onError }) => {
  if (isBrowser) {
    return new Promise((resolve, reject) => {
      const prevScript = document.getElementById(id)

      if (!prevScript) {
        const script = document.createElement('script')

        script.type = 'text/javascript'
        script.src = url
        script.id = id
        script.async = true
        script.onload = () => {
          resolve(onSuccess())
        }
        script.onerror = (e) => {
          reject(onError(e))
        }
        document.head.appendChild(script)
      } else {
        resolve(onSuccess())
      }
    })
  } else {
    onError()
  }
}

export const init = id => {
  try {
    window[`yaCounter${id}`] = new Ya['Metrika2']({
      id,
      clickmap: true,
      trackLinks: true,
      accurateTrackBounce: true,
      webvisor: true
    })
  } catch (err) {
    console.warn(err)
  }
}

export const ym = (id, methodName, ...args) => {
  if (
    isBrowser &&
    typeof window[`yaCounter${id}`] !== 'undefined'
  ) {
    window[`yaCounter${id}`][methodName](...args)
  }
}

export const injectYm = id => {
  injectScript({
    id,
    url: 'https://mc.yandex.ru/metrika/tag.js',
    onSuccess: () => {
      init(id)

      ym(id, 'hit', window.location.pathname)

      console.log('yandex metrika initialized')
    },
    onError: () => {
      console.error('Yandex metrika if failed')
    }
  })
}

You need to injectYm('546346) before ReactDOM.render, and use ym(546346, 'hit', window.location.pathname)

from react-yandex-metrika.

ryskin avatar ryskin commented on July 1, 2024

Still no news?

from react-yandex-metrika.

hdkeeper avatar hdkeeper commented on July 1, 2024

Отправил PR, который должен исправить этот баг.
Примите, пожалуйста.

from react-yandex-metrika.

baitun avatar baitun commented on July 1, 2024

Ошибка возникает, если в коде ym() вызывается раньше, чем примонтировался <YMInitializer/>.

from react-yandex-metrika.

hdkeeper avatar hdkeeper commented on July 1, 2024

Да, так и есть. Опишу свой сценарий использования более подробно.

У меня YMInitializer подключается как в документации:

<YMInitializer accounts={[YANDEX_METRIKA_ID]} options={{ defer: true }} />

а ym() вызывается в коде middleware/saga при смене пути. Когда загружается первая страница, происходит первое событие LOCATION_CHANGE. Но в этот момент YMInitializer ещё не смонтирован.

Я нашёл ещё один способ обойти этот баг. Он не требует внесения изменений в библиотеку, и события не должны теряться.

import {
    call, all, takeLatest, delay
} from 'redux-saga/effects';

import { LOCATION_CHANGE } from 'connected-react-router';
import ym from 'react-yandex-metrika';

function* locationChangeSaga({ payload }) {
    try {
        // Событие роутера LOCATION_CHANGE прилетает раньше, чем успевает отработать YMInitializer.
        // Поэтому для hit-событий добавляем небольшую задержку.
        yield delay(100);

        yield call(ym, 'hit', payload.location.pathname);
    } catch (error) {
        logServerError(error);
    }
}

export default function* rootSaga() {
    yield all([
        yield takeLatest(LOCATION_CHANGE, locationChangeSaga)
    ]);
}

from react-yandex-metrika.

NairiAreg avatar NairiAreg commented on July 1, 2024

У меня никак не работает JavaScript событие,
<YMInitializer accounts={[66898726]} options={{webvisor: true}} version="2" />

ym('hit', '/');
ym(66898726,'reachGoal','arhitektor-form');

что интересно это то что в дебаге hit видно в консоле а вот reachGoal ну никак нет
метрика тоже работает только цели никак не отоброжаются

from react-yandex-metrika.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.