Как добавить скрипт аналитики в React?

Question

[Андрей Охотников]

Как добавить скрипт вида в React чтобы он отрабатывал на каждой странице? Или нужно в ComponentDidMount выполнять его?

Answer 1

[Антон Спирин]

Аналитику обычно добавляют в HTML.

Можно использовать специализированную библиотеку, для ga это react-ga.

Если надо логировать переходы по страницам, то на примере react-router и react-ga, можно сделать, например, так:

const history = createBrowserHistory();

history.listen(location => {
  ReactGA.pageview(location.pathname + location.search);
});

const root = (
<Router history={history}>
  <App />
</Router>
);

Comments

[Андрей Охотников]

react-ga не подойдет, как вообще скрипты подключать правильно не могу найти пример

[Антон Спирин]

Андрей Охотников, смотря какие и смотря куда. Для стандартной аналитики просто добавляют в HTML.
Скрипт аналитики это обычно полотно javascript кода, которое создает какой-либо глобальный объект, выполняет какие-либо действия и имеет какое либо API. Понятное дело, что выполнять один и тот же скрипт несколько раз в одном окружении не надо.

А вендорные скрипты в JSX правильно добавлять примерно так:

import React from 'react';

class Script extends React.Component {

  static displayName = 'Script';

  static scriptObservers = {};

  static loadedScripts = {};

  static erroredScripts = {};

  static idCount = 0;

  scriptLoaderId = `id${this.constructor['idCount']++}`;

  componentDidMount() {
    const { onError, onLoad, src } = this.props;

    if (this.constructor.loadedScripts[src]) {
      if (onLoad) onLoad();
      return;
    }

    if (this.constructor.erroredScripts[src]) {
      if (onError) onError();
      return;
    }

    if (this.constructor.scriptObservers[src]) {
      this.constructor.scriptObservers[src][this.scriptLoaderId] = this.props;
      return;
    }

    this.constructor.scriptObservers[src] = { [this.scriptLoaderId]: this.props };

    this.createScript();
  }

  createScript() {
    const { onCreate, src, attributes } = this.props;
    const script = document.createElement('script');

    if (onCreate) {
      onCreate();
    }

    if (attributes) {
      Object.keys(attributes).forEach(prop => script.setAttribute(prop, attributes[prop]));
    }

    script.src = src;

    if (!script.hasAttribute('async')) {
      script.async = true;
    }

    const callObserverFuncAndRemoveObserver = (shouldRemoveObserver) => {
      const observers = this.constructor.scriptObservers[src];
      Object.keys(observers).forEach((key) => {
        if (shouldRemoveObserver(observers[key])) {
          delete observers[this.scriptLoaderId];
        }
      });
    };

    script.onload = () => {
      this.constructor.loadedScripts[src] = true;
      callObserverFuncAndRemoveObserver((observer) => {
        if (observer.onLoad) observer.onLoad();
        return true;
      });
    };

    script.onerror = () => {
      this.constructor.erroredScripts[src] = true;
      callObserverFuncAndRemoveObserver((observer) => {
        if (observer.onError) observer.onError();
        return true;
      });
    };

    document.body.appendChild(script);
  }

  componentWillUnmount() {
    const { src } = this.props;
    const observers = this.constructor.scriptObservers[src];

    if (observers) {
      delete observers[this.scriptLoaderId];
    }
  }

  render() {
    return null;
  }
}

export default Script;

В случае перерендера или использования в другом месте у вас не будет повторного добавления скрипта на страницу.

[Андрей Охотников]

Спасибо, а вот такой подход чем плох? Пример нашел в одном репозитории

<script
          dangerouslySetInnerHTML={{
            __html: `  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
               (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
               m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
               })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
               ga('create', 'UA-5819863-21', 'auto');
               ga('send', 'pageview');
      `
          }}
        />/code>

[Антон Спирин]

Андрей Охотников, этот код будет работать только при использовании SSR. Ну и такой код проще добавить в HTML шаблон приложения. В остальном если используете SSR, ничего плохого.
Тот вариант, который я скинул, он для скриптов по ссылке.