Измеряйте производительность и многое другое вашего приложения React с помощью Firebase Analytics.
Данные повсюду. Возможность видеть, как работает ваш веб-сайт или приложение в режиме реального времени, — это благословение. Иначе как еще кто-то может знать, что нужно улучшить, добавить или удалить, чтобы сделать свои продукты и услуги лучше?
Я всегда хотел добавить (Firebase) Google Analytics в несколько своих проектов, чтобы посмотреть, что работает, а что нет. Но до сих пор это был разочаровывающий процесс. Это правда; когда вы придумываете что-то самостоятельно, после долгих ошеломляющих исследований, проб и ошибок, это действительно потрясающе!
Начало работы 🏃♂️
Чтобы добавить Firebase Analytics в наше приложение React, мы будем использовать пакет ga-4-react
. Этот пакет можно использовать для включения кода отслеживания Google Analytics на веб-сайт или в приложение, использующее React в качестве внешнего кода.
Предпосылки ✏️
- Это само собой разумеется, но, конечно, нам понадобится приложение для реагирования, чтобы начать. Если у вас уже есть собственный проект, вы можете использовать его или просто загрузить новое приложение для реагирования с помощью
npx create-react-app <app-name>
. - Учетная запись Firebase и приложение, в которое нужно добавить наше приложение для реагирования. Вы можете начать работу с Firebase здесь. Если вы не знаете, как создать новое приложение Firebase, вы можете обратиться к официальной документации здесь.
Установка зависимостей 💻
- Единственная зависимость, которая нам нужна, это модуль
ga-4-react
. Запуститеnpm i — save ga-4-react
, чтобы установить его в свой проект. - Если вы планируете использовать другие сервисы, предлагаемые 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.