This is an optional library you can install if you're working with Flutter. It uses an internal queue to make calls fast and non-blocking. It also batches requests and flushes asynchronously, making it perfect to use in any part of your mobile app.
PostHog supports the iOS, macOS, Android and Web platforms.
Installation
PostHog is available for install via Pub.
Configuration
Set your PostHog API key and change the automatic event tracking on if you wish the library to take care of it for you.
Remember that the application lifecycle events won't have any special context set for you by the time it is initialized. If you are using a self-hosted instance of PostHog you will need to have the public hostname or IP for your instance as well.
To start, add posthog_flutter
to your pubspec.yaml
:
# rest of your codedependencies:flutter:sdk: flutterposthog_flutter: ^4.0.1# rest of your code
Then complete the set up for each platform:
Android setup
For Android, add your PostHog configuration to your AndroidManifest.xml
file located in the android/app/src/main
:
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="your.package.name"><application><!-- ... other configuration ... --><meta-data android:name="com.posthog.posthog.API_KEY" android:value="<ph_project_api_key>" /><meta-data android:name="com.posthog.posthog.POSTHOG_HOST" android:value="<ph_instance_address>" /> <!-- usually 'https://app.posthog.com' or 'https://eu.posthog.com' --><meta-data android:name="com.posthog.posthog.TRACK_APPLICATION_LIFECYCLE_EVENTS" android:value="true" /><meta-data android:name="com.posthog.posthog.DEBUG" android:value="true" /></application></manifest>
You'll also need to update the minimum Android SDK version to 21
in android/app/build.gradle
:
// rest of your configdefaultConfig {minSdkVersion 21// rest of your config}// rest of your config
iOS setup
For iOS, you'll need to have Cocoapods installed. Then add your PostHog configuration to the Info.plist
file located in the ios/Runner
directory:
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"><plist version="1.0"><dict><!-- rest of your configuration --><key>com.posthog.posthog.API_KEY</key><string><ph_project_api_key></string><key>com.posthog.posthog.POSTHOG_HOST</key><string><ph_instance_address></string><key>com.posthog.posthog.CAPTURE_APPLICATION_LIFECYCLE_EVENTS</key><true/><key>com.posthog.posthog.DEBUG</key><true/></dict></plist>
Then you need to set the minimum platform version to iOS 13.0 in your Podfile:
platform :ios, '13.0'# rest of your config
Web setup
For Web, add your Web snippet
(which you can find in your project settings) in the <header>
of your web/index.html
file:
<!DOCTYPE html><html><head><!-- ... other head elements ... --><script async>!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);posthog.init('<ph_project_api_key>',{api_host:'<ph_instance_address>', // 'https://app.posthog.com' or 'https://eu.posthog.com'})</script></head><!-- other elements --></html>
For more information please check: https://posthog.com/docs/libraries/js
Usage
Example
import 'package:flutter/material.dart';import 'package:posthog_flutter/posthog_flutter.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {Widget build(BuildContext context) {return MaterialApp(navigatorObservers: [// The PosthogObserver records screen views automaticallyPosthogObserver(),],home: Scaffold(appBar: AppBar(title: Text('PostHog example app'),),body: Center(child: FlatButton(child: Text('TRACK ACTION WITH PostHog'),onPressed: () async {await Posthog().capture(eventName: 'ButtonClicked',properties: {'foo': 'bar','number': 1337,'clicked': true,},);},),),));}}
Capturing events
You can send custom events using capture
:
await Posthog().capture(eventName: 'user_signed_up',);
Tip: We recommend using a '[object][verb]' format for your event names, where '[object]' is the entity that the behavior relates to, and '[verb]' is the behavior itself. For example, project created
, user signed up
, or invite sent
.
Setting event properties
Optionally, you can also include additional information in the event by setting the properties value:
await Posthog().capture(eventName: 'user_signed_up',properties: {'login_type': 'email','is_free_trial': true});
Autocapture
PostHog autocapture automatically tracks the following events for you:
- Application Opened - when the app is opened from a closed state or when the app comes to the foreground (e.g. from the app switcher)
- Application Backgrounded - when the app is sent to the background by the user
- Application Installed - when the app is installed.
- Application Updated - when the app is updated.
- $screen - when the user navigates (if using navigatorObservers or go_router)
Identify
We highly recommend reading our section on Identifying users to better understand how to correctly use this method.
Using identify
, you can associate events with specific users. This enables you to gain full insights as to how they're using your product across different sessions, devices, and platforms.
An identify
call has the following arguments:
- userId: Required. A unique identifier for your user. Typically either their email or database ID.
- userProperties: Optional. A dictionary with key:value pairs to set the user properties
- userPropertiesSetOnce: Optional. Similar to
userProperties
. See the difference betweenuserProperties
anduserPropertiesSetOnce
await Posthog().identify(userId: emailController.text,userProperties: {"name": "Peter Griffin", "email": "peter@familyguy.com"},userPropertiesSetOnce: {"date_of_first_log_in": "2024-03-01"});
You should call identify
as soon as you're able to. Typically, this is every time your app loads for the first time as well as directly after your user logs in. This ensures that events sent during your user's sessions are correctly associated with them.
When you call identify
, all previously tracked anonymous events will be linked to the user.
Group analytics
Group analytics allows you to associate the events for that person's session with a group (e.g. teams, organizations, etc.). Read the Group Analytics guide for more information.
Note: This is a paid feature and is not available on the open-source or free cloud plan. Learn more here.
- Associate the events for this session with a group
await Posthog().group(groupType: "company", groupKey: "company_id_in_your_db");
- Associate the events for this session with a group AND update the properties of that group
await Posthog().group(groupType: "company",groupKey: "company_id_in_your_db",groupProperties: {"name": "ACME Corp"});
The name
is a special property which is used in the PostHog UI for the name of the Group. If you don't specify a name
property, the group ID will be used instead.
Feature Flags
PostHog's feature flags enable you to safely deploy and roll back new features.
Boolean feature flags
if (await Posthog().isFeatureEnabled('flag-key')) {// Do something differently for this user// Optional: fetch the payloadfinal matchedFlagPayload = await Posthog().getFeatureFlagPayload('flag-key');}
Multivariate feature flags
if (await Posthog().getFeatureFlag('flag-key') == 'variant-key') { // replace 'variant-key' with the key of your variant// Do something differently for this user// Optional: fetch the payloadfinal matchedFlagPayload = await Posthog().getFeatureFlagPayload('flag-key');}
Ensuring flags are loaded before usage
Every time a user loads a screen, we send a request in the background to fetch the feature flags that apply to that user. We store those flags in the storage.
This means that for most screens, the feature flags are available immediately – except for the first time a user visits.
Reloading feature flags
Feature flag values are cached. If something has changed with your user and you'd like to refetch their flag values, call:
await Posthog().reloadFeatureFlags();
Session replay
Note: Session replay is only supported on the Flutter Web environment.
To set up session replay in your project, all you need to do is install the Flutter SDK and enable "Record user sessions" in your project settings.
Issues
Please file any issues, bugs, or feature requests in our GitHub repository.
Contributing
If you wish to contribute a change to this repo, please send a Pull Request.