Comments (8)
@Aleks-developer Я поковырялся в коде, и нашёл решение - инициализатор надо импортировать как функцию в index.js - и запускать с 3 агрументами
import YMInitializer from 'react-yandex-metrika/lib/init'
YMInitializer([yandexMetrikaKey], { webvisor: true }, '2')
самое главное запускать эту функцию до самого кода реакта
а дальше в онкликах и роутах можно использовать ym как в документации
from react-yandex-metrika.
@JustFly1984 Так не работает, так как даже нет никакой сетевой активности
from react-yandex-metrika.
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.
Still no news?
from react-yandex-metrika.
Отправил PR, который должен исправить этот баг.
Примите, пожалуйста.
from react-yandex-metrika.
Ошибка возникает, если в коде ym()
вызывается раньше, чем примонтировался <YMInitializer/>
.
from react-yandex-metrika.
Да, так и есть. Опишу свой сценарий использования более подробно.
У меня 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.
У меня никак не работает 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)
- API для отправки запросов в конкретный счетчик HOT 2
- example for use HOT 10
- TypeError: window[_constants.accountListName] is undefined HOT 13
- В версии v2.4.0 ломается минификацию проекта HOT 3
- настройка дополнительных параметров HOT 12
- Как вызвать метод params HOT 1
- Не считается время на странице, вебвизор без верстки HOT 6
- Не найден HOT 4
- Новая версия методов HOT 4
- Ошибка после перехода на версию 2.5.0 HOT 1
- Добавьте changelog пожалуйста
- Проблема с инициализацией
- Изменение тега-обёртки для скрипта
- Как передать userParams HOT 2
- Добавить метод ym.init() HOT 1
- Initializing multiple accounts with different options
- SSR (Nextjs) + react-yandex-metrika
- js CDN provider HOT 2
- Need example how to use it with NextJS router HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-yandex-metrika.