Настройте Mixpanel (лучшая альтернатива аналитике Firebase) в своем приложении Next.js, не увеличивая время загрузки вашего приложения.

Введение

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

Настройте Mixpanel в приложении Next.js

Mixpanel предоставляет mixpanel-browser пакет, но их размер в распакованном виде превышает 1.Mb. Установка Mixpanel с этим пакетом увеличит размер пакета вашего приложения и время его загрузки браузером.

Mixpanel также предоставляет способ настроить его с помощью тега script. Мы собираемся использовать этот способ и next/script предоставляемый Next.js. Создайте имя файла _app.js внутри проекта папки /pages, если вы еще не создали его, и вставьте в него это содержимое.

typeof window != ‘undefined’ && !(window as any).mixpanel используется для однократной инициализации Mixpanel и предотвращения следующей проблемы:

Ошибка Mixpanel: библиотека Mixpanel уже была загружена хотя бы один раз. Убедитесь, что фрагмент кода Mixpanel появляется на странице только один раз (и не загружается дважды диспетчером тегов), чтобы избежать ошибок.

Заключение

Теперь Mixpanel настроен правильно, afterInteractive из следующего/скрипта будет получать и вставлять его сразу после того, как страница станет интерактивной, и скорость вашей страницы не уменьшится.
Во время работы рекомендуется использовать {debug: false}. Вы можете посетить документацию Mixpanel, чтобы узнать больше о функциях, которые можно использовать для отслеживания пользователя на вашем сайте.

Подпишитесь на меня, чтобы просмотреть дополнительные советы о React или Next.js. Спасибо.

Нанять старшего Frontend-разработчика

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