Измеряйте производительность и многое другое вашего приложения React с помощью Firebase Analytics.

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

Я всегда хотел добавить (Firebase) Google Analytics в несколько своих проектов, чтобы посмотреть, что работает, а что нет. Но до сих пор это был разочаровывающий процесс. Это правда; когда вы придумываете что-то самостоятельно, после долгих ошеломляющих исследований, проб и ошибок, это действительно потрясающе!

Начало работы 🏃‍♂️

Чтобы добавить Firebase Analytics в наше приложение React, мы будем использовать пакет ga-4-react. Этот пакет можно использовать для включения кода отслеживания Google Analytics на веб-сайт или в приложение, использующее React в качестве внешнего кода.

Предпосылки ✏️

  1. Это само собой разумеется, но, конечно, нам понадобится приложение для реагирования, чтобы начать. Если у вас уже есть собственный проект, вы можете использовать его или просто загрузить новое приложение для реагирования с помощью npx create-react-app <app-name>.
  2. Учетная запись Firebase и приложение, в которое нужно добавить наше приложение для реагирования. Вы можете начать работу с Firebase здесь. Если вы не знаете, как создать новое приложение Firebase, вы можете обратиться к официальной документации здесь.

Установка зависимостей 💻

  1. Единственная зависимость, которая нам нужна, это модуль ga-4-react. Запустите npm i — save ga-4-react, чтобы установить его в свой проект.
  2. Если вы планируете использовать другие сервисы, предлагаемые Firebase, вам следует установить Firebase для JS, используя npm I --save firebase. Вам будет предложено добавить это при создании и добавлении веб-приложения в приложение Firebase.

Использование модуля GA4React 🚀

  • После добавления Analytics в ваше приложение Firebase все, что вам нужно для подключения вашего приложения React к Firebase, — это идентификатор измерения. Вы увидите это на веб-сайте Firebase — простой способ найти идентификатор измерения.

Чтобы начать сбор данных, убедитесь, что ваш веб-сайт помечен с помощью идентификатора измерения: G-0SPQ2Z9EE2.

  • Как только вы это сделаете, все, что нам нужно выяснить, это как запустить аналитику для отправки данных в Firebase каждый раз, когда пользователь посещает какую-либо страницу. Для этого в компонент <App> можно добавить функцию, которая будет выполняться при каждом рендеринге приложения.
  • Самое основное, что нужно отслеживать, — это страницы, которые посещают пользователи. Итак, давайте сделаем это!
  • В приведенном выше примере компонент App вызывает и использует функцию с именем trackPageForAnalytics(). Единственная цель этой функции — отслеживать путь и отправлять его в Firebase.
  • Чтобы отслеживать, где находится пользователь, было бы неплохо использовать хук useLocation(). И это то, что мы делаем!
  • Как только мы импортируем GA4React, инициализируем новый экземпляр с нашим идентификатором измерения приложения Firebase, мы можем вызвать для него метод initialise(), который возвращает обещание; следовательно, .then() .
  • Получив объект ответа, мы вызываем для него метод pageview() и передаем три аргумента — path, location и title для страницы. Название будет тем, что вы увидите позже на панели аналитики.

Момент истины 🤞

Надеясь, что все, что мы сделали, мы сделали правильно, обновите ваше приложение React несколько раз и перезагрузите панель инструментов Firebase Analytics. Обновление данных на панели управления может занять некоторое время, но вы увидите там данные о посещении страницы вашего приложения. Вы также можете нажать Просмотр в реальном времени, чтобы просмотреть данные в реальном времени.

Заключение

Отслеживание движений пользователя в вашем приложении React может стать хорошим первым шагом к пониманию поведения пользователя. Конечно, с помощью Firebase Analytics можно достичь гораздо большего, например демографические данные, события и многое другое. Официальная документация — это всегда хорошее место для начала и понимания того, как это работает.

Спасибо, что нашли время прочитать эту статью. Надеюсь, вам было интересно и полезно. Обязательно ознакомьтесь с другими моими статьями, где я рассказываю о React, Node.js и связанных с ними вещах.

Подписание!

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.