Добавление Google Analytics для реагирования

Я пытаюсь добавить Google Analytics в веб-приложение React.

Я знаю, как это сделать на сайтах HTML/CSS/JS, и я также интегрировал его в приложение AngularJS. Но я не совсем уверен, как это сделать, когда нужно реагировать.

С помощью HTML/CSS/JS я просто добавил его на каждую страницу.

То, что я сделал с AngularJS, добавляло GTM и скрипт GA к index.html и добавлял UA-метки в HTML-div (и кнопки), чтобы получать клики.

Как я могу это сделать с помощью React?

Пожалуйста помоги!

Ответ 1

Обновление: февраль 2019
Поскольку я увидел, что этот вопрос много ищут, я решил расширить свое объяснение.
Чтобы добавить Google Analytics в React, я рекомендую использовать React-GA.
Добавить, запустив:
npm install react-ga --save

Инициализация:
В корневом компоненте выполните инициализацию, выполнив:

import ReactGA from 'react-ga';
ReactGA.initialize('Your Unique ID');

Чтобы сообщить о просмотре страницы:

ReactGA.pageview(window.location.pathname + window.location.search);

Чтобы сообщить о пользовательском событии:

ReactGA.event({
  category: 'User',
  action: 'Sent message'
});

Больше инструкций можно найти в репозитории github

Лучшая практика для этой ИМО - это использование реактив-га. Посмотрите на представителя GitHub

Ответ 2

Без использования пакета я бы это сделал:

В вашем index.js (в методе render):

    {/* Global site tag (gtag.js) - Google Analytics */}
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID"
    />
    <script>{injectGA()}</script>

И вне класса:

const injectGA = () => {
  if (typeof window == 'undefined') {
    return;
  }
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    window.dataLayer.push(arguments);
  }
  gtag('js', new Date());

  gtag('config', 'YOUR_TRACKING_ID');
};

Ответ 3

Еще одна отличная библиотека, которую вы можете проверить, - это редукционный маяк.

Он очень легко интегрируется с применением реакции/сокращения и имеет отличную документацию для него. ReactGA тоже хорош, но с маяком redux, вы не будете загромождать свой код приложения кодом google analytics, поскольку он работает через его собственное промежуточное программное обеспечение.

Ответ 4

Я предлагаю встроить скрипт Segment в ваш index.html, использовать библиотеку аналитики, доступную для объекта window, и добавить отслеживающие вызовы в обработчики событий Reacts:

export default class SignupButton extends Component {
  trackEvent() {
    window.analytics.track('User Signup');
  }

  render() {
    return (
      <button onClick={this.trackEvent}>
        Signup with Segment today!
      </button>
    );
  }
}

Я поддерживаю https://github.com/segmentio/analytics-react. Я рекомендую проверить это, если вы хотите решить эту проблему с помощью единственного API для управления данными ваших клиентов и иметь возможность интеграции с любым другим аналитическим инструментом (мы поддерживаем направления 250+) без написания какого-либо дополнительного кода. 🙂

Ответ 5

Если вы предпочитаете не использовать пакет, вот как он может работать в приложении реагирования. Добавьте "gtag" в index.html

<!-- index.html -->

<script>
            window.dataLayer = window.dataLayer || [];
            function gtag() {
                dataLayer.push(arguments);
            }
            gtag("js", new Date());

            gtag("config", "<GA-PROPERTYID>");
        </script>

В действии отправки формы входа в систему отключите событие

window.gtag("event", "login", {
            event_category: "access",
            event_label: "login"
        });

Ответ 6

Я также сталкиваюсь с задачей интеграции Google Analytics в наш веб-сайт. Когда я ищу GA и React в сети, я впервые сталкиваюсь с пакетом react-ga. Также в большинстве статей в Интернете, где другие программисты объясняют, как они интегрировали GA в свой веб-сайт, упоминается о react-ga. Может кто-нибудь объяснить мне, почему этот пакет является "лучшим" выбором?