A Comprehensive Guide to Integrating Mixpanel Analytics with Flutter

Mixpanel is a popular analytics platform that allows you to track user behavior and engagement on your mobile app, it is a powerful analytics platform that helps businesses track and analyze user behavior and engagement on their websites and mobile apps.

Mixpanel offers a healthy collection of SDKs for both Backend and Front-end Framework, in this article we’ll be focusing on integrating Mixpanel with Flutter using the offical Mixpanel Flutter SDK.

Step 1:

To use Mixpanel you have to depend on it by adding it to the projects pubspec.yaml file:

   dependencies:
      mixpanel_flutter: #<latest>

Run pub get in your terminal to installl the package:

flutter pub get

or by using this command in your projects root:

flutter pub add mixpanel_flutter

The code above adds the plugin to your pubspec.yaml file and calls flutter pub get as well.

Now you can import it in your dart code with:

import 'package:mixpanel_flutter/mixpanel_flutter.dart';

Step 2:

Initialize the SDK

You’ll need your Mixpanel token to initialize the SDK, the token can be gotten from your project settings.

In the file where you imported mixpanel above, call Mixpanel.init(mixpanelToken, shouldTrackAutomaticEvents);

import 'package:mixpanel_flutter/mixpanel_flutter.dart';


class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  late Mixpanel mixpanel;

  @override
  void initState() {
    super.initState();
    _initMixpanel();
  }

  Future<void> _initMixpanel() async {
    mixpanel =
        await Mixpanel.init("YourMixpanel Token", trackAutomaticEvents: true);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
}

Step 3:

Send Data:

After setting up the SDK, Mixpanel will start collecting standard mobile events automatically. You have the option to turn on or off this automatic collection in your project settings. Once you have created the Mixpanel object in the previous step, you can easily send any extra events to Mixpanel by simply calling the “track” method like this:

// Track with event-name
mixpanel.track('message');
// Track with event-name and additional property
mixpanel.track('Plan Selected', properties: {'Plan': 'Premium'});

It is recommended that you track only a limited number of events, typically five to seven, in your application instead of monitoring an excessive amount of data right from the start.

Mixpanel also allows you to set “Super Properties”;

Super properties are properties that you wish to attach to each event you send are typically information that you have about the user, rather than specific details about an event. Examples of this information could include the user’s age, gender, referral source, or initial referrer.

Super properties are saved to local storage, and will persist across invocations of your app, to set super properties, call registerSuperProperties on the mixpanel object.

mixpanel.registerSuperProperties({'Plan': 'Mega', 'Cost': '2000'});

or if you want to store a super property only once (for example, a date of first login), you can use registerSuperPropertiesOnce, this can be called multiple times but would only set the property if the super property does not exist.

mixpanel.registerSuperPropertiesOnce({'Plan': 'Mega', 'Cost': '2000'});

Congratulations we’re done!!!!, You’ve successfully integrated Mixpanel Analytics with you Flutter application.

NB: To view incoming events, navigate to the Events section in Mixpanel. Please note that once the data reaches Mixpanel’s API, it usually takes approximately 60 seconds to process, store, and become available for querying in your project.

Some references for your perusal:

SDK Integration: Flutter Quickstart | Mixpanel Developer Docs
mixpanel-flutter/example at main · mixpanel/mixpanel-flutter (github.com)