narkq / react-yandex-metrika Goto Github PK

View Code? Open in Web Editor NEW

126.0 5.0 26.0 411 KB

React component for Yandex.Metrika

Makefile 10.98% JavaScript 89.02%

react-yandex-metrika's Introduction

react-yandex-metrika

Adds the Yandex.Metrika script to your page and exposes the ym tracking function as a module.

Inspired by and shamelessly copied from react-google-analytics.

Usage:

Use the initializer to add the script to your page somewhere:

import { YMInitializer } from 'react-yandex-metrika';

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        // SNIP
          <YMInitializer accounts={[987654321]} />
        // SNIP
      </div>
    );
  }
});

Please note that you need to initialize the tracker object only once. Because of that, you should insert initializer to the place where it won't be remounted (that means at least outside of router scope).
If you want to use webvisor, you should pass options={{webvisor: true}} to to YMInitializer, for example:

<YMInitializer accounts={[987654321]} options={{webvisor: true}}/>

You can create several identical trackers (that might be useful for domain-wise segmentation).

<YMInitializer accounts={[98765, 4321]} />

You can also specify options for tracker (as described in Yandex.Metrika documentation):

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

Elsewhere, use the ym function:

import ym from 'react-yandex-metrika';
ym('hit', '/cart');
ym('reachGoal', 'whateverGoal', {awesomeParameter: 42});

Webvisor 2.0 support

See #6 for details.

<YMInitializer accounts={[31337]} options={{webvisor: true}} version="2" />

Migration from 1.0

Replace import { Initializer } to import { YMInitializer }.
Remove ym.init() call. Pass arguments of ym.init as props to the YMInitializer component. Tracking will be initialized on YMInitializer.componentDidMount.

react-yandex-metrika's People

Contributors

Stargazers

Watchers

react-yandex-metrika's Issues

Ошибка после перехода на версию 2.5.0

После обновления компонента и сборки проекта в prod моде, появилась ошибка

bundle.js?956746a581a286580e85:71688 TypeError: Cannot convert undefined or null to object
at Function.keys ()
at YMInitializer.componentDidMount

После того как убрал минификацию кода обнаружил что виноват Ваш компонент.

Откатился до версии компонента 2.4.2.
Пример использования компонента

 <YMInitializer
          accounts={[Number]}
          options={{
            clickmap: true,
            trackLinks: true,
            accurateTrackBounce: true,
            webvisor: true
          }}
          version="2"
        />

API для отправки запросов в конкретный счетчик

Мне нужно использовать в проекте 2 разных счетчика и отправлять в них разные цели.
Добавьте, пожалуйста, API для отправки данных в счетчик с конкретным id.

Сбои подсчета отказов и глубины показа

При переходе с версии 1.x на 2.3 отказы стали равны 99-100%, глубина просмотров 1.
Использую ym('hit', this.props.location.pathname); в componentDidUpdate;

Need example how to use it with NextJS router

Please give the example how to integrate this library with NextJS routing.

Новая версия методов

У меня вопрос. Яндекс изменил методы, такие как hit.
Сигнатура hit(url, [title[, referer[, params]]]) устарела

Раньше:

var yaCounterXXXXXX = new Ya.Metrika({id: XXXXXX});
//...
yaCounterXXXXXX.hit('#!contacts', {
    title: 'Контактная информация',
    referer: 'http://example.com/#!main'
});

Теперь:
ym(XXXXXX, 'hit', url[, options])

Насколько я понимаю, в коде этого пакета используется старая версия?

window[trackerInstanceName(id)][methodName]

Есть какие-нибудь задумки на изменение этого?

js CDN provider

Please add ability to select javascript source due to your's in banned in Ukraine. Alternative is
https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js

how to access ecommerce.dataLayer ?

if (inBrowser() && window.ym && client.YandexMetrikaID) {
      window.ym.init([client.YandexMetrikaID], {
        clickmap: true,
        trackLinks: true,
        accurateTrackBounce: true,
        webvisor: true,
        ecommerce: "dataLayer"
      });
    }

TypeError: window[_constants.accountListName] is undefined

if (typeof window !== 'undefined') {
is not helped
is error bellow

ymAsyncProxy
/node_modules/react-yandex-metrika/lib/index.js:41

38 | args[_key2] = arguments[_key2];
39 | }
40 |

41 | window[_constants.accountListName].forEach(function (id) {
42 | var trackerVersion = window[(0, _constants.trackerVersionName)(id)];
43 | var callbackQueue = window[(0, _constants.callbackQueueName)(trackerVersion)];
44 | if (callbackQueue) {

ym
/node_modules/react-yandex-metrika/lib/index.js:56

53 |
54 | function ym() {
55 | if (isBrowser) {

56 | ymAsyncProxy.apply(undefined, arguments);
57 | }
58 | }
59 |

./src/RoutesContainer.js/webpack_exports.a<
/src/RoutesContainer.js:67

64 | export default withRouter(props => {
65 | const isMain = props.location.pathname === '/'
66 | if (typeof window !== 'undefined') {

67 | ym('hit', props.location.pathname);
68 | }
69 |
70 | return (

Добавить метод ym.init()

Инициализация текущим методом <YMInitializer /> создаёт следующие неудобства:

К сожалению не все могут вынести инициализацию в другие места по ряду причин.

Please note that you need to initialize the tracker object only once. Because of that, you should insert initializer to the place where it won't be remounted (that means at least outside of router scope).

Установка состояний, отложенная инициализация

Мой пример создать YMProvider и вынести работу внутрь него.

const YMProvider = ({ children }) => {
	const [isInit, setInit] = useState(false)
	const userId = useSelector(getUserId)
        const params = {}
	useEffect(() => !isInit && ym.init(params, () => setInit(true)), [isInit])
	useEffect(
		() => {
			if (isInit) {
				ym('setUserID', userId)
			}
		},
		[userId, isInit]
	)
     [userId]
    )

	return children
}

Также мне необходимо инициализировать gtm.js строго после Я.Метрики, вариант лезть в DOM напрямую мне не импонирует.

SSR (Nextjs) + react-yandex-metrika

Добрый день. Использую nextjs. Добавляю в футер инициализацию

<YMInitializer accounts={[62486866]} options={{ clickmap: true, trackLinks: true, accurateTrackBounce: true, webvisor: true, }} />
В результате при первом открытии страницы в метрике засчитывается посещение. Но при переходе по ссылке - посещение не засчитывается.

Добавляю в componentDidMount
ym('hit', currentRoute);

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

Как этого избежать?

Version Number doens't accept ints

Hi, great lib. Can you please add conversion of version number to string before evaluation and returning a blocking error that crashes the whole site, that would help. since it's counter intuitive to pass a version NUMBER as a string, but at list covert it to string. it took me to read source code to see where I went wrong, hehe

Не найден

Очень простой пример:

import React, { Component } from 'react';
import { YMInitializer } from 'react-yandex-metrika';
import AppRouter from './AppRouter.js'
import LogoTitle from './components/LogoTitle.js'
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App App-fixed-image">
        <LogoTitle />
        <AppRouter />
    		<div>
    		  <YMInitializer accounts={[51441281]} />
    		</div>
      </div>
    );
  }
}

export default App;

На сайте Яндекс Метрики сообщение о том, что счетчик не найден. Прошу исправить инструкцию или код, ибо не работает. Вернулся пока к стандартной инициализации счетчика, вставив код в index.html

Как передать userParams

Пытаюсь сделать передачу параметров посетителей как здесь
https://yandex.ru/support/metrica/data/user-params_data.html

Сейчас пытаюсь передавать вот так, но не работает.
ym('userParams', {UserID: user_id});

Ошибка после добавления ym

Здравствуйте. Делаю все по инструкции, после добавления ym на событие onClick вылазит следующая ошибка: TypeError: Cannot read property 'forEach' of undefined. В чем может быть проблема?

init is not a function

Code:

import ym, { Initializer as YandexMetrica } from 'react-yandex-metrika';

export default class Header extends Component {
  componentDidMount () {

    ym.init([...])
  }
  /* ... */
}

Error:

TypeError: _reactYandexMetrika2.default.init is not a function. (In '_reactYandexMetrika2.default.init([...])', '_reactYandexMetrika2.default.init' is undefined)

Metrika's Webvisor 2.0

Metrika's Webvisor 2.0 requires changes in code.
Here is what I've noticed about it:

Before: w.yaCounterXXX = new Ya.Metrika({
After: w.yaCounterXXX = new Ya.Metrika2({

Before: s.src = "https://mc.yandex.ru/metrika/watch.js";
After: s.src = "https://mc.yandex.ru/metrika/tag.js";

Before: })(document, window, "yandex_metrika_callbacks");
After: })(document, window, "yandex_metrika_callbacks2");

Can we expect this Component to change?
Or is there a way to set it up without changing code?

Anyways, thank you for your work.

Warning on react 15.6

Accessing factories like React.DOM.script has been deprecated and will be removed in v16.0+. Use the react-dom-factories package instead. Version 1.0 provides a drop-in replacement. For more info, see https://fb.me/react-dom-factories

Does it working with WebVisor?

Hi!

Does your component make YM WebVisor available?

Thanks

Initializing multiple accounts with different options

I haven't found a way to initialize accounts with different set of options. Is it safe include YMInitializer multiple times like this?

<YMInitializer accounts={[FIRST_ACCOUNT]} options={OPTIONS_1} />
<YMInitializer accounts={[SECOND_ACCOUNT]} options={OPTIONS_2} />

Добавьте changelog пожалуйста

Здравствуйте, каждый раз когда вы апаете версию, не понятно что изменилось, что появилось, а что сломается, я регулярно обновляю зависимости на своем проекте и не иметь возможности сразу отметить что изменилось, заставляет обильно потеть.
Могли бы вы пожалуйста, добавить changelog или в релизах гитхаба описывать что поменялось.

настройка дополнительных параметров

как настроить?
Отслеживание хеша в адресной строке браузера
Асинхронный код
В одну строку
Информер

example for use

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

Dependency on babel-runtime v5

Seems like it:

Should not be a dependency at all (transpile all the way and bundle transpiled code along with source).
Should be babel 6+

What do you think?

Проблема с инициализацией

Выполнено всё по гайду, но при сборке выдает ошибку:

Doesn't work api method - getClientID

Hello.

Yandex Metrika has method getClientID. This method return some value.

yaCounterXXXXXX.getClientID() // id

But i can't take this value in ym:

ym('getClientID') // undefined

https://yandex.ru/support/metrika/objects/get-client-id.html

Как вызвать метод params

Как вызвать метод params?
https://yandex.ru/support/metrika/objects/params-method.html

В версии v2.4.0 ломается минификацию проекта

@narkq

Проект падает с такой ошибкой:

> react-scripts build

Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file: 

        ./node_modules/react-yandex-metrika/src/constants.js:3 

Read more here: http://bit.ly/2tRViJ9

Кажется проблема в коммите e3adf87

webvisor

Привет!

Есть ли возможность использовать вебвизор только для определенных страниц?
В контексте SPA метрика инициализируется только один раз при старте приложения

Missing dependency for `babel-runtime` in package.json

Hey, before manually installing babel-runtime, my app would crash with this:

23 Oct 02:53:54 - [nodemon] starting `babel-node server/server`
module.js:338
    throw err;
    ^

Error: Cannot find module 'babel-runtime/core-js'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:286:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/home/dimaip/encultN/node_modules/react-yandex-metrika/lib/index.js:5:13)
    at Module._compile (module.js:434:26)
    at Module._extensions..js (module.js:452:10)
    at Object.require.extensions.(anonymous function) [as .js] (/usr/local/lib/node_modules/babel/node_modules/babel-core/lib/api/register/node.js:214:7)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)

Не считается время на странице, вебвизор без верстки

На React SPA проекта с SSR понадобилось подключить Яндекс Метрику. Следовал строго по инструкции.

В App.js сделал импорты:

import { YMInitializer } from 'react-yandex-metrika'
import ym from 'react-yandex-metrika'

В этом же файле добавил хит, при переходе на новый стейт

componentDidUpdate(prevProps) {
        if (prevProps.location !== this.props.location) {
            console.log('hit')
            ym('hit', prevProps.location.pathname)
        }
   }

Отправляю предыдущую страницу, т.к если отправлять текущую, в метрике не сходятся заголовки.

Сам инициализатор кидаю в том же App.js

<ThemeProvider theme={themeDefault}>
    .....            
   <YMInitializer
       accounts={[123456]}
       options={{ webvisor: true }}
       version="2"
     />
    ....
</ThemeProvider>

Итог
Хиты в метрику приходят, но есть несколько проблем:

Не считается время проведенное на каждой странице. Общее время выводится только на странице входа.

В вебвизоре почему-то каша

Изменение тега-обёртки для скрипта

Имеет ли значение как тег будет выступать в качестве обертки для скрипта. Не повлияет ли на работу счетчика, если я изменю дефолтный тег div на span. Например передав в качестве пропсов компоненту:
<YMInitializer containerElement={'span'}/>