Mixpanel SDKs: Flutter

Getting Started

The Full API Reference, Library Source Code, and an Example Application is documented in our GitHub repo.

Installing the Library

To install the library in your Flutter development environment, declare it as a dependency in the pubspec.yaml file of your package:

# add Mixpanel library to your dependencies
dependencies:
    mixpanel_flutter: ^1.x.x # set this to your desired version

Once you added the library to your dependencies, use the command line to install the library:

# install packages in your dependencies
$ flutter pub get

After the installation, import the package in your Dart code, then initialize the SDK with the Mixpanel.init() using your project token.

// import the library
import 'package:mixpanel_flutter/mixpanel_flutter.dart';
...
class _YourClassState extends State<YourClass> {
  Mixpanel mixpanel;
 
  @override
  void initState() {
    super.initState();
    initMixpanel();
  }
 
  Future<void> initMixpanel() async {
    // initialize Mixpanel
    mixpanel = await Mixpanel.init("YOUR_PROJECT_TOKEN", trackAutomaticEvents: false);
  }
}
...

Now you can access mixpanel throughout the rest of your application.

Flutter Web Support

Add the following snippet to your web/index.html inside the <head></head> tag in your project:

<script src="./assets/packages/mixpanel_flutter/assets/mixpanel.js"></script>

Library Configuration

The Mixpanel instance can be customized with different configurations. The Mixpanel.init() method accepts arguments that sets some configurations on your instance upon initialization.

After initialization, you can further customize the instance using the configuration options here.

Example Usage

...
// initialize Mixpanel without autotrack disabled
mixpanel = await Mixpanel.init("YOUR_PROJECT_TOKEN", trackAutomaticEvents: false);
 
// enable debug logs post-init
mixpanel.setLoggingEnabled(true);
...

Sending Events

Use .track() to send an event by providing the event name and any event properties. This will trigger a request to the /track API endpoint to ingest the event into your project.

The /track endpoint will only validate events with timestamps within the last 5 days of the request. Events with timestamps older than 5 days will not be ingested. See below on best practices for historical imports.

Example Usage

//Track 'some_event' with "plan" event prop
mixpanel.track('some_event', {'plan': 'premium'});

Timing Events

You can track the time it took for an action to occur, such as an image upload or a comment post, using .timeEvent(). This will mark the “start” of your action, which will be timed until you finish with a track call. The time duration is then recorded in the “Duration” property.

// start the timer for the event "Image Upload"
mixpanel.timeEvent("Image Upload");
 
// 20 seconds later...
 
// track "Image Upload" event with Duration event prop set to 20
mixpanel.track("Image Upload");

Flushing Events

To preserve battery life and customer bandwidth, the Mixpanel library doesn’t send the events you record immediately. Instead, it sends batches to the Mixpanel servers every 60 seconds while your application is running, as well as when the application transitions to the background.

Call .flush() manually if you want to force a flush at a particular moment.

Example Usage

// flush batched events for ingestion immediately
mixpanel.flush();

Importing Historical Events

The Flutter SDK is a tracking SDK designed for real-time tracking in a client-side environment. Calling .track() triggers a request to our /track API endpoint, which will validate for events with a timestamp that is within the last 5 days of the request. Events older than 5 days will not be ingested.

For bulk import of historical events older than 5 days, we will need to use the /import API endpoint which is optimized for scripting and supports ingesting historical data. We recommend the Python SDK (see the .import_data() function) and mixpanel-utils module (see the import_events() function) which both leverages the /import API for event ingestion.

Setting Super Properties

Super properties are global event properties that you define once and apply to all events.

To register super properties, call .registerSuperProperties().

Use .registerSuperPropertiesOnce() to register super properties without overwriting existing values.

Example Usage

// register a "name" super property
mixpanel.registerSuperProperties({'name': 'sam'});
 
// track "some_event"
// "name" is automatically added as an event prop
mixpanel.track('some_event');
 
// this is ignored because "name" already exists
mixpanel.registerSuperPropertiesOnce({'name': 'samantha'});
 
// register a "location" super property
mixpanel.registerSuperPropertiesOnce({'location': 'us'});

Our mobile libraries store your super properties in local storage. They will persist so long as the app is installed (between launches and updates). Uninstalling the app will remove that customers super properties.

See more methods related to super properties in the complete library reference here.

Managing User Identity

You can handle the identity of a user using the .identify() and .reset() methods. Learn more about identity management and identifying users.

Identify

⚠️

We recommend against calling .identify() for anonymous visitors to your site.

Call .identify() when you know the identity of the current user, passing in their user ID as an argument. This is typically at account registration and at log in.

Example Usage

// user logs in and tracks a sign in event
mixpanel.track('sign in');
 
// upon sign in, identify the user with their ID
// ensure future events sent from the user have distinct_id 12345
mixpanel.identify('12345');

Call Reset at Logout

Call .reset() to clear data attributed to a user when they logout. This will clear the local storage and allows you to handle multiple users on a single device.

Example Usage

// your user logs out and tracks a log out event
mixpanel.track('log out');
 
// clear local storage and generate new distinct_id
mixpanel.reset();

Storing User Profiles

Once your users are identified, create user profiles by setting profile properties to describe them. Example profile properties include “name”, “email”, “company”, and any other demographic details about the user.

The Flutter SDK provides a few methods for setting profile properties under the People class accessible via .getPeople(). These methods will trigger requests to the /engage API endpoint.

Setting Profile Properties

You must call .identify() before setting profile properties in order to associate the profile properties you set with the target user. If identify is not called, the profile update will be queued for ingestion until an identify call is made.

Set profile properties on a user profile by calling the .getPeople().set() method.

If a profile property already exist, if will be overwritten with the latest value provided in the method. If a profile property does not exist, it will be added to the profile.

Example Usage

// You must call identify to associate the profile update with the user
// Sets user's "Plan" attribute to "Premium"
mixpanel.identify("12345");
mixpanel.getPeople().set("Plan", "Premium");
 
// Update "plan" from "Premium" to "Enterprise"
mixpanel.getPeople().set("Plan", "Enterprise");

Other Types of Profile Updates

There are a few other methods for setting profile properties. See a complete reference of the available methods here

A few commonly used people methods are highlighted below:

The .getPeople().setOnce() method set profile properties only if they do not exist yet. If it is setting a profile property that already exists, it will be ignored.

Use this method if you want to set profile properties without the risk of overwriting existing data.

Example Usage

// set profile properties for user "1234"
mixpanel.identify('1234');
mixpanel.getPeople().set('name':'sam');
 
// will be ignored since "name" already exists
mixpanel.getPeople().setOnce('name', 'samantha');
 
// set "location" user prop since it does not exist
mixpanel.getPeople().setOnce('location', 'us');

The .getPeople().append() method append values to a list profile property.

Use this method to add additional values to an existing list property instead of redefining the entire list.

Example Usage

// set profile properties for user "1234"
mixpanel.identify('1234');
mixpanel.getPeople().set({
    'name':'sam',
    'roles': ['sales','engineer']
});
 
// add "legal" to "roles"  
// new role values are ['sales','engineer','legal']
mixpanel.getPeople().append('roles', 'legal');
 
// .append() allows duplicates
// new "roles" values are ['sales','engineer','legal', 'legal']
mixpanel.getPeople().append('roles', 'legal');

The .getPeople().union() method append new values to a list property, excluding duplicates.

Use this method to create a list profile property that only contains unique values without duplicates.

Example Usage

// set profile properties for user "1234"
mixpanel.identify('1234');
mixpanel.getPeople().set({
    'name':'sam',
    'roles': ['sales','engineer']
});
 
// append "engineer" to "roles"
// will be ignored since "engineer" already exists in "roles"
mixpanel.getPeople().union('roles', 'engineer');
 
// append "legal" to "roles"
// new role values are ['sales','engineer','legal']
mixpanel.getPeople().union('roles', 'legal');

The .getPeople().increment() method increments a numeric property by a whole number.

Use this method to add to or subtract from your numeric property based on its current value.

Example Usage

// set profile properties for user "1234"
mixpanel.identify('1234');
mixpanel.getPeople().set({
    'name':'sam',
    'age': 25
});
 
// increment "age" by 2
mixpanel.getPeople().increment('age',2);
 
// use negative number to decrement
// decrement "age" by 5
mixpanel.getPeople().increment('age',-5);

Group Analytics

Read more about Group Analytics before proceeding. You will need to have the group key defined in your project settings first.

Mixpanel Group Analytics is a paid add-on that allows behavioral data analysis by selected groups, as opposed to individual users.

A group is identified by the group_key and group_id.

group_key is the event property that connects event data to a group. (e.g. company)
group_id is the identifier for a specific group. (e.g. mixpanel,company_a,company_b, etc.)

The Android SDK provides a few method for adding individual users to a group and setting group profile properties.

Adding Users to a Group

All events must have the group key as an event property in order to be attributed to a group. Without the group key, an event cannot be attributed to a group.

Call the .setGroup() method to register the current user to a group, which would add the group_key as an event property set to the group_id value to all events moving forward.

Example Usage

// assign the current user to the "mixpanel" company group
mixpanel.setGroup('company', 'mixpanel');
 
// track "some_event"
// event property "company" = ["mixpanel"] is added automatically
mixpanel.track('some_event');
 
//alternatively you can manually define the group key
mixpanel.track('some_event', {'company':'mixpanel'});

Multiple Groups

An event can be attributed to multiple groups by passing in the group_key value as a list of multiple group_id values.

Call .addGroup() to add additional group_ids to an existing list.

Example Usage

// assign the current user to the "mixpanel" company group
// events will contain 'company' prop set to ["mixpanel"]
mixpanel.setGroup('company', 'mixpanel');
 
// add "mp-us" as an additional company group
// new "company" value is ["mixpanel","mp-us"]
mixpanel.addGroup('company', 'mp-us');
 
// track "some_event"
// event property "company" = ["mixpanel","mp-us"] is added automatically
mixpanel.track('some_event');

Adding Group Identifiers to User Profiles

To connect group information to a user profile, include the group_key and group_id as a user profile property using the .getPeople().set() call.

Example Usage

// set group key "company" as user prop
// with group id "mixpanel" as the value
mixpanel.identify("12345");
mixpanel.getPeople().set("company", "mixpanel");

Setting Group Profile Properties

Create a group profiles by setting group properties, similar to a user profile. For example, you may want to describe a company group with properties such as “ARR”, “employee_count”, and “subscription”.

To set group profile properties, specify the group that needs to be updated by calling .getGroup(), then set the group properties by chaining the .set() method, which will trigger a request to the /groups API endpoint.

Example Usage

// assign the current user to the "mixpanel" company group
mixpanel.setGroup('company', 'mixpanel');
 
// specify the target group using the group_key and group_id
// set "industry" as a group profile prop to "analytics"
mixpanel.getGroup('company','mixpanel').set('industry','analytics');

Other Group Profile Methods

See all of the methods under the Group class here.

A few commonly used group methods are highlighted below:

The .getGroup().setOnce() method set group profile properties only if they do not exist yet. If it is setting a profile property that already exists, it will be ignored.

Use this method if you want to set group profile properties without the risk of overwriting existing data.

Example Usage

// assign the current user to the "mixpanel" company group
mixpanel.setGroup('company', 'mixpanel');
 
// set group profile properties
mixpanel.getGroup('company','mixpanel').set('name', 'Mixpanel');
 
// ignored since "name" is already exists
mixpanel.getGroup('company','mixpanel').setOnce('name','mp');
 
// set "location" group prop since it does not exist
mixpanel.getGroup('company','mixpanel').setOnce('location','us');

The .getGroup().unset() method removes a group property from a group profile.

Use this method to delete unwanted group profile properties from a specific group profile.

Example Usage

// assign the current user to the "mixpanel" company group
mixpanel.setGroup('company', 'mixpanel');
 
// set group profile properties
mixpanel.getGroup('company','mixpanel').set('name', 'Mixpanel');
mixpanel.getGroup('company','mixpanel').set('employee_count', 100);
 
// delete "employee_count" from the group profile
mixpanel.getGroup('company','mixpanel').unset('employee_count');
 
// only "name" remains as a group prop

The .getGroup().union() method append new values to a list property, excluding duplicates.

Use this method to create a list group profile property that only contains unique values without duplicates.

Example Usage

// assign the current user to the "mixpanel" company group
mixpanel.setGroup('company', 'mixpanel');
 
// set group profile properties
mixpanel.getGroup('company','mixpanel').set('features', ['reports','alerts','cohorts']);
 
// add "data pipeline" to "features" prop
// ignore "alert" since it is a duplicate value
mixpanel.getGroup('company','mixpanel').union('features', [
    'data pipeline',
    'alerts'
    ]);

The .getGroup().remove() method removes a value from a list-valued group profile property.

Use this method to remove specific values from a list without affecting all of the other values in the list.

Example Usage

// assign the current user to the "mixpanel" company group
mixpanel.setGroup('company', 'mixpanel');
 
// set group profile properties
mixpanel.getGroup('company','mixpanel').set('features', ['reports','alerts','cohorts']);
 
//remove "alerts" from "features"
// "features" now contain ["reports","cohorts"]
mixpanel.getGroup('company','mixpanel').remove('features', 'alerts');

Debug Mode

To enable debug mode, call .setLoggingEnabled() with true.

Example Usage

// enable debug logs
mixpanel.setLoggingEnabled(true);

Learn more about debugging.

Privacy-Friendly Tracking

You have control over the data you send to Mixpanel. The Flutter SDK provide methods to help you protect user data.

Learn more about Privacy.

Opt Out of Tracking

The Android SDK is initialized with tracking enabled by default. Use the .optOutTracking() method to opt the user out of data tracking and local storage for the current Mixpanel instance.

Example Usage

//send "some_event"
mixpanel.track('some_event');
 
// opt user out of tracking
// SDK is prevented from sending any data
mixpanel.optOutTracking();
 
// this track call will not work
mixpanel.track('some_other_event');

Opt Out by Default

You can initialize the library with users opted out of tracking by default using the optOutTrackingDefault configuration. Once the user is ready to be tracked, call .optInTracking() to start tracking.

Example Usage

...
// initialize Mixpanel with users opt out of tracking by default
mixpanel = await Mixpanel.init("YOUR_PROJECT_TOKEN", trackAutomaticEvents: false, optOutTrackingDefault: true);
 
// opt user back in to tracking afterwards
mixpanel.optInTracking();
...

EU Data Residency

Route data to Mixpanel’s EU servers by setting the serverURL property after initializing the client.

Example Usage

// set request URL to Mixpanel's EU domain
mixpanel.setServerURL("https://api-eu.mixpanel.com");

India Data Residency

Route data to Mixpanel’s India servers by setting the serverURL property after initializing the client.

Example Usage

// set request URL to Mixpanel's India domain
mixpanel.setServerURL("https://api-in.mixpanel.com");

Disable Geolocation

The Flutter SDK parse the request IP address to generate geolocation properties for events and profiles. To disable geolocation, call .setUseIpAddressForGelocation() with false.

Example Usage

// disable geolocation from IP parsing
mixpanel.setUseIpAddressForGelocation(false);

Learn more about geolocation.

Legacy Automatically Tracked Events

Mixpanel’s SDKs have a legacy feature to automatically collect common mobile events. We don’t recommend enabling this, as these events rely on client-side state and can be unreliable compared to tracking server-side. You can still enable this feature by turning the flag trackAutomaticEvents: true when initializing Mixpanel. More details here.

You can see a list of events tracked automatically for iOS here and Android here.

Tracking Via Proxy

This guide demonstrates how to route events from Mixpanel’s Flutter SDKs via a proxy in your own domain. This is useful to reduce the likelihood of ad-blockers impacting your tracking.

There are two steps: setting up a proxy server and pointing the SDK at your server.

Step 1: Set up a proxy server The simplest way is to use our sample nginx config. This config redirects any calls made to your proxy server to Mixpanel.

Step 2: Point Flutter SDK at your server Add the following line, replacing YOUR_PROXY_DOMAIN with your proxy server’s domain.

**Example Usage

// route data to your proxy server
mixpanel.setServerURL("https://<YOUR_PROXY_DOMAIN>");

Specifically for Flutter Web, add your proxy server to the mixpanel.init call:

Example Usage

mixpanel.init("<YOUR_PROJECT_TOKEN>", {api_host: "https://<YOUR_PROXY_DOMAIN>"});

Release History

See all releases.

iOS (Swift)Unity

Was this page useful?