Как использовать Firebase Analytics Debug View с Flutter Web App

Эта статья переведена специально для канала FlutterPulse. В этом канале вы найдёте много интересных вещей, связанных с Flutter. Не забывайте подписываться! 🚀

Отладка событий в приложении Flutter для веба может быть сложной задачей. Вот что вам нужно знать, чтобы это заработало.

Firebase Analytics Debug View — это удобный инструмент для проверки событий, которые отправляет ваше приложение в реальном времени. Однако для его работы из приложения Flutter для веба требуется небольшая настройка. Вот как использовать Firebase Analytics Debug View с приложением Flutter для веба.

Настройка

Первый шаг — подключение вашего приложения Flutter к проекту Firebase. Следуйте моему руководству в случае, если вы этого еще не сделали.

Как создать проект Firebase и связать его с вашим приложением FlutterВ этой статье я покажу, как создать проект Firebase и как связать его с вашим приложением Flutter.

gitconnected.com

Для работы с Firebase Analytics вам нужно установить пакеты firebase_analytics и firebase_analytics_web (только для приложений Flutter для веба).

В вашем коде получите ссылку на Firebase Analytics следующим образом:

final FirebaseAnalytics _analytics = FirebaseAnalytics.instance;

После этого вы можете логировать события. Вот несколько примеров:

// пользователь открывает приложение
_analytics.logAppOpen();

// пользователь нажимает на элемент промо
_analytics.logSelectPromotion(creativeName: productName);

// пользователь активирует обновление продукта
_analytics.logEvent(
    name: "product_activation", 
    parameters: {"license_key": licenseKey});

Firebase Analytics предлагает предопределенные операции но когда у вас есть пользовательские события, метод logEvent() — ваш друг.

Использование Debug View

Firebase Analytics Debug View является частью Firebase Console. В вашем проекте перейдите в Analytics -> Debug View чтобы открыть его.

Firebase Analytics Debug View ожидает отладочных событий

Когда вы запускаете свое приложение напрямую из VS Code и вызываете события, ничего не появится в режиме отладки. Чтобы это заработало, вам нужно установить Google Analytics Debugger в виде расширения браузера.

Запустите свое приложение Flutter на веб-сервере с помощью команды

flutter run -d web-server

Эта команда показывает URL для доступа к экземпляру. Откройте его в браузере с установленным и включенным Google Analytics Debugger.

❓ Почему нужно запускать веб-сервер?


Когда VS Code открывает окно браузера с вашим веб-приложением, оно использует
временный профиль, в котором нет установленных расширений. Вот почему
события не передаются в Firebase Analytics Debug
View.

Сгенерируйте некоторые события для тестирования. Возможно, потребуется до 15 секунд, чтобы события появились. В конечном итоге вы должны увидеть что-то вроде этого:

Firebase Analytics Debug View с событиями, сообщаемыми из Flutter веб-приложения

Вот как использовать Firebase Analytics Debug View с Flutter веб-приложением.

Заключение

В этой статье я показал, как использовать Firebase Analytics Debug View с Flutter веб-приложением. Это не так просто, как при тестировании мобильных приложений, но как только вы поймете, как это работает, это уже не проблема.