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

Question

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

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

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

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

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

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

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

88

reactjs google-analytics react-ga

Источник

user8588359 14 мар '18 в 14:05

8 ответов

Решение

Если вы предпочитаете не использовать пакет, вот как он может работать в приложении реагирования. Добавьте "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"
        });

31

Источник

user1111233 17 май '19 в 11:26

Without using a package this is how I would do it:

В вашем 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');
};

25

Источник

user4875295 21 июл '18 в 03:06

Существует 2 типа свойств Google Analytics: Universal Analytics (UA-xxxxxxxxx-x), который устарел с окончанием срока службы 2023.07.01 и свойством Google Analytics 4 (G-xxxxxxxxxx), который является заменой.

react-gaбыл популярен для Universal Analytics, но сопровождающий не планирует его обновлять (связанные проблемы: 1, 2, 3 ), и у него были проблемы с обслуживанием ( 1). react-ga4и ga-4-reactпоявились в качестве замены, но, поскольку это похожие оболочки, вы зависите от сопровождающих для реализации и поддержки всех функций.

Самый простой способ начать работу — следовать руководству Google : включитьgtagна странице и использовать его какwindow.gtag. Этот метод работает как для старых, так и для новых тегов, и есть даже поддержка TypeScript через@types/gtag.js. Сценарий может быть загружен асинхронно, как рекомендуется .

index.html

      <!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... -->

    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxxxxxx" >
    </script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-xxxxxxxxxx')
    </script>

    <!-- ... -->
  </head>

  <body>
    <!-- ... -->
  </body>
</html>

Имейте в виду, что Google Analytics выполняет автоматическое отслеживание страниц, но это не будет работать для каждого варианта использования. Например,hashиsearchизменения параметров не отслеживаются . Это может привести к большой путанице. Например, при использовании HashRouterили якорные ссылки, навигация не будет отслеживаться. Чтобы иметь полный контроль над отслеживанием просмотров страниц, вы можете отключить автоматическое отслеживание . См. подробное объяснение: Полное руководство по Google Analytics (UA и GA4) на React (или что-либо еще).

Отслеживание страниц вручную: /questions/9610756/kak-nastroit-google-analytics-dlya-react-router/55093261#55093261

Вы можете увидеть, как это работает в cra-typescript-starter , где я также устанавливаю тег из env var.

7

Источник

user2771889 14 авг '22 в 00:01

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

Он очень легко интегрируется с приложением React/ Redux и имеет отличную документацию для него. ReactGA тоже хорош, но с избыточным маяком вы не будете загромождать код своего приложения кодом Google Analytics, поскольку он работает через собственное промежуточное ПО.

4

Источник

user3744828 04 июл '18 в 06:46

Избавьтесь от кода аналитики с помощью

Сначала вы, конечно, должны поделиться кодом заголовка на всех страницах, например, как спросили на: React js do common header

Затем этот ответ Next.js /questions/159229/kakovo-pravilnoe-znachenie-dlya-otmechennogo-atributa-flazhka-html/159236#159236 дает хороший рабочий код, который также должен работать вне Next.js. Он экранирует код аналитики с помощью:

        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-47867706-3"></script>
  <script
    dangerouslySetInnerHTML={{
      __html: `window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-47867706-3', { page_path: window.location.pathname });
`,
    }}
  />

где вы должны заменить UA-47867706-3 с вашим собственным кодом.

Этот код в точности совпадает с кодом, который дает Google, но со следующей модификацией: мы добавили:

      { page_path: window.location.pathname }

к gtag('config' чтобы он мог получить посещенный путь, поскольку это JavaScript SPA.

Это генерирует желаемый результат в браузере:

      <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-47867706-3"></script><script>window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-47867706-3', { page_path: window.location.pathname });
</script>

Единственное другое отклонение от точного кода, предоставленного Google, - это async="" против async, но оба они эквивалентны в HTML, поскольку это логический атрибут, см. также: Какое правильное значение для отмеченного атрибута флажка HTML?

Бегство с dangerouslySetInnerHTML необходимо, потому что в противном случае React интерпретирует код внутри JSX, и это не удается:

      Syntax error: Unexpected token, expected "}"

  21 |           <script>
  22 |             window.dataLayer = window.dataLayer || [];
> 23 |             function gtag(){dataLayer.push(arguments);}
     |                                                      ^
  24 |             gtag('js', new Date());
  25 |
  26 |             gtag('config', 'UA-47867706-3');

Я бы хотел, чтобы они просто автоматически убегали от вещей внутри script для нас.

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

Связано: Добавление тега скрипта в React / JSX

Проверено на response 17.0.2, next.js 10.2.2.

4

Источник

user895245 26 авг '21 в 13:16

Посмотрев на сайт Google https://developers.google.com/analytics/devguides/collection/analyticsjs,

вы также можете добавить Google Analytics, используя эту функцию:

const enableGA = () => {
  !function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
  (A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
  r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
  }(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXXX-X');
  ga('send', 'pageview');
}

Таким образом, вам не нужна внешняя библиотека, и ее довольно быстро настроить.

0

Источник

user6300308 08 окт '20 в 16:47

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

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 направлений) без написания какого-либо дополнительного кода.

0

Источник

user11097396 21 фев '19 в 17:20

Другие вопросы по тегам reactjs google-analytics react-ga

user4232673 14 мар '18 в 14:08 2018-03-14 14:08 · Accepted Answer · 2018-03-14 14:08

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

123

Источник

user4232673 14 мар '18 в 14:08