Подключение Flutter Web к событиям Mixpanel
Поддержка Flutter Web была выпущена 03.12.2021 от MixPanel:
Используя эту информацию, мы собираемся соединить Mixpanel с Flutter Web. Крутая вещь, чтобы отметить; веб-поддержка Flutter также будет работать для мобильной версии — поговорим о двух вещах одновременно!
Мы собираемся сделать это с самого начала, но я собираюсь сделать предположение, что вы, по крайней мере, знаете, как установить флаттер и заставить его работать, прежде чем приступить к этому руководству. Если нет… загляните на Веб-сайт Flutter, чтобы начать работу, и вернитесь сюда, когда закончите!
Кроме того, я буду использовать IntelliJ в качестве предпочтительной IDE, но не стесняйтесь использовать то, что вам нравится.
С учетом сказанного… давайте начнем!
- Запустите пустой проект Flutter и назовите его как хотите. Убедитесь, что у вас включен Интернет!
2. Очистите плиту котла! Мы собираемся удалить все комментарии и старый код приложения счетчика!
3. Мы собираемся создать 3 отдельные страницы в нашей папке lib. Этот шаг поможет нам продемонстрировать мощь Mixpanel в наших последующих шагах! Итак, займемся подготовкой. Каждая страница будет содержать очень общий код, чтобы все было очень просто.
4. Создайте маршруты навигации для каждой из наших общих страниц. Мы собираемся в ближайшее время продемонстрировать события со страниц через MixPanel с этими маршрутами!
5. Последняя часть нашего подготовительного шага, мы собираемся создать основные кнопки на всех наших страницах, чтобы иметь возможность маршрутизировать между ними!
Вот суть кода — его можно скопировать и вставить! Примените это ко всем (4) страницам — main, page1, page2 и page3. Убедитесь, что вы настроили код так, чтобы он соответствовал странице, на которую вы его вставляете.
// Make sure you change the route names and titles according to the page you are copying and pasting this code to!
return Scaffold(
appBar: AppBar(
title: const Text('Mixpanel Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
child: const Text('Page 1'),
onPressed: () {
Navigator.pushNamed(context, '/1');
},
),
ElevatedButton(
child: const Text('Page 2'),
onPressed: () {
Navigator.pushNamed(context, '/2');
},
),
ElevatedButton(
child: const Text('Page 3'),
onPressed: () {
Navigator.pushNamed(context, '/3');
},
),
],
),
),
);
6. Настройка пакета mixpanel_flutter! Теперь, когда мы закончили подготовку, давайте загрузим пакет mixpanel в наш pubspec.yaml.
7. Запустите проект Mixpanel на веб-сайте и найдите токен своего проекта.
8. Теперь, когда вы знаете свой токен для вашего проекта на Mixpanel, давайте использовать его в нашем проекте! Сначала нам нужно создать собственный класс, чтобы инициализировать его в нашей функции main(). (Это проще, чем кажется).
import 'package:mixpanel_flutter/mixpanel_flutter.dart';
Future initMixpanel(String message) async {
Mixpanel mixpanel;
mixpanel = await Mixpanel.init('mixpanel_project_token', optOutTrackingDefault: false);
mixpanel.track(message);
}
Разбивая это:
а. Мы импортируем новый пакет«mixpanel_flutter»
б. Мы создали новый Future с именем initMixpanel, для которого требуется строка с именем «message». Мы используем эту строку для вызова другого метода mixpanel с именем mixpanel.track. (Я займусь этим позже).
в. Затем мы должны вызвать функцию маркера mixpanel, чтобы мы могли инициализировать нашу Mixpanel всякий раз, когда мы вызываем этот класс.
д. Наконец, внутри этого класса; мы называем mixpanel.track. Это вызовет событие от нашего приложения к mixpanel! Используя наше обязательное строковое сообщение — мы можем указать, что мы хотим отображать на Mixpanel.
9. Инициализируйте наш класс mixpanel в нашем основном приложении. Важно, чтобы это также было включено:
WidgetsFlutterBinding.ensureInitialized();
10. Окончательная настройка для наших звонков Mixpanel! Запуск скриптов в нашем index.html.
<script src="./assets/packages/mixpanel_flutter/assets/mixpanel.js"></script>
11. Проверьте это! Выполните Hot-Restart, а затем просмотрите свои результаты на мероприятиях Mixpanel!
12. Вызов нашего класса initMixpanel всякий раз, когда мы хотим увидеть событие.
На этом мы завершаем наше руководство по Flutter Web с Mixpanel!
Отсюда можно сделать несколько вещей, таких как триггеры для конкретной среды, правильные способы скрытия информации о токене и API, запуск событий при нажатии кнопки и многое другое!
Обязательно ознакомьтесь с документацией Mixpanel, чтобы узнать, что еще вы можете сделать!
Я надеюсь, что этот урок поможет вам так же, как и мне!
Ваше здоровье,
