Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

example for use #17

Open
romanown opened this issue Jun 30, 2018 · 10 comments
Open

example for use #17

romanown opened this issue Jun 30, 2018 · 10 comments
Labels

Comments

@romanown
Copy link

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

@narkq
Copy link
Owner

narkq commented Jul 3, 2018

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

@narkq narkq added the question label Jul 3, 2018
@romanown
Copy link
Author

romanown commented Jul 5, 2018

предлагаю в пример добавить что инициализацию делать как и у Вас написано
export default withRouter(props => { return ( <div> <YMInitializer accounts={[49433788]} /> <Switch> <Route exact path="/" component={Home} />
и использовать вызов ym(hit) надо в методе componentWillReceiveProps.
у меня получилось после обновления работает.

@taime
Copy link

taime commented Jul 6, 2018

Хотелось бы какой-то способ не вставлять на каждую страницу 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
Copy link
Author

romanown commented Jul 6, 2018

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

@narkq
Copy link
Owner

narkq commented Jul 6, 2018

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

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

@narkq
Copy link
Owner

narkq commented Jul 6, 2018

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

@romanown
Copy link
Author

romanown commented Jul 6, 2018

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

@taime
Copy link

taime commented Jul 25, 2018

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

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

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

@bonzoSPb
Copy link

bonzoSPb commented Nov 18, 2019

@taime я лично просто поместил в компонент footer:
import { YMInitializer } from 'react-yandex-metrika'; export default class Footer extends Component { render() { return ( <footer className="row"> <YMInitializer accounts={[*****]} options={{ webvisor: true }} version="2" /> </footer> ); } }

@eseQ
Copy link

eseQ commented Jan 23, 2020

Обертка для 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 если не надо =)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants