narkq / react-yandex-metrika

React component for Yandex.Metrika
128 stars 25 forks source link

example for use #17

Open romanown opened 6 years ago

romanown commented 6 years ago

please give me the example. судя по описанию, компонент позволяет отправлять в яндекс сообщения о переходах между страницами. ибо иначе показывает что все посетили только одну страницу. но исходя из описания не пойму как использовать данный компонент. прошу простейший пример использования на странице сайта.

narkq commented 6 years ago

Ох. Вообще-то да, этот как бы компонент отвечает по сути только за подключение скрипта и хранение списка айдишников. Интеграцию с роутером нужно делать самостоятельно. Что касается примера, ничего не могу обещать, но если руки дойдут, сделаю.

romanown commented 6 years ago

предлагаю в пример добавить что инициализацию делать как и у Вас написано `export default withRouter(props => { return (

` и использовать вызов `ym(hit)` надо в методе `componentWillReceiveProps`. у меня получилось после обновления работает.
taime commented 6 years ago

Хотелось бы какой-то способ не вставлять на каждую страницу ym('hit', 'path to page'), а где-то в одном месте добавить ym('hit', window.location.pathname + window.location.search) Видел, советы использовать

history.listen((location) => {
  ym('hit', localhost.pathname);
})

Но не удалось добиться, чтобы данный способ работал (непонятно как и куда его вставлять + скорее всего код содержит ошибки.

P.S. еще в readme надо бы добавить пункт установка: yarn add react-yandex-metrika npm install --save react-yandex-metrika

Понятно, что это элементарно, просто иногда бывает, что название репозитория отличается от названия пакета...

romanown commented 6 years ago

так в моих иссуях есть пример кода как я это делал.

narkq commented 6 years ago

Но не удалось добиться, чтобы данный способ работал (непонятно как и куда его вставлять + скорее всего код содержит ошибки.

К сожалению, куда и какой именно вставлять код, зависит от того, каким роутером вы пользуетесь.

narkq commented 6 years ago

@romanown имейте в виду, что componentWillReceiveProps уже помечен как устаревший, и в react 17 будет удален.

romanown commented 6 years ago

тогда вообще непонятно как использовать данный модуль. значит до выхода новой версии модуля не будем обновлять реакт. а там может и Вы успеете что-нибудь придумать. у меня веселее стало. на тестовом сайте работает, а на рабочий поставил, заменив номер счетчика на правильны - и перестало считать посещения и переходы.

taime commented 6 years ago

YMInitializer в какое место нужно помещать? Это место должно быть внутри render() (и тогда вопрос, нужно ли помещать это внутри return) или в componentDIdMount()или в componentWillRecieveProps() или вообще вне компонента?

Также неочевидно, следует ли вместе с этим вставлять в файл index.html обычный код яндекс метрики, или этого делать не следует. И если вставить обычный код яндекс метрике в index.html и не вставлять YMInitializer, то будет ли работать ym('hit', localhost.pathname)

P.S. Вообще все вопросы снимет любой совсем простой базовый пример использования (например в create-react-app).

bonzoSPb commented 4 years ago

@taime я лично просто поместил в компонент footer: `import { YMInitializer } from 'react-yandex-metrika'; export default class Footer extends Component { render() { return (

);

} }`

eseQ commented 4 years ago

Обертка для Route из react-router. С другими, думаю примерно так же можно. И используете этот компонент вместо обычного Route.

import React, { useEffect, useRef } from 'react';
import { Route } from 'react-router-dom';
import ym from 'react-yandex-metrika';

const RouteWrapper = ({ meta, ...props }) => {
  const url = (props.location || {}).pathname;
  const { isParent, path } = props;
  const metaRef = useRef();
  const pastPath = (props.lastLocation || {}).pathname;
  metaRef.current = { title: (meta || {}).title, referrer: pastPath };
  const canHit = (meta || {}).ready || (!meta && url !== pastPath);
  useEffect(() => {
    if (!config.isProduction || !path || !url || isParent) return;
    if (!canHit) return;
    const { title, referrer } = metaRef.current;
    const ymOptions = {};
    if (referrer) ymOptions.referer = referrer;
    if (title) ymOptions.title = title;
    ym('hit', url, ymOptions);
  }, [isParent, url, path, canHit]);
  return <Route {...props} />;
};
export default RouteWrapper;

Ну я тут еще и meta передаю. В целом все просто. Можете удалить все что связанно с meta и isParent если не надо =)