The fast_app brick includes an analytics service for tracking user events. It supports multiple providers, including Firebase Analytics, Amplitude, and PostHog.
mason make fast_app
When asked what analytics provider you would like to use, select one of the following options:
The fast_analytics brick will generate the following files:
+-- lib
+-- features
+-- shared
+-- services
+-- analytics_service.dart
The analytics_service.dart file includes code to setup the selected analytics provider in your app. The service will be registered as a Singleton in GetIt and can be accessed from anywhere in your app using the analyticsService getter.
The service provides a logEvent function to log events with an optional properties map.
The service can also be used to update the user properties with the setUserProperties function.
Select the firebase_analytics option during creation to use Firebase Analytics as your analytics provider.
Selecting this option will add the firebase_analytics package to your pubspec.yaml file.
To use Firebase Analytics, you will need to add your Firebase project configuration to your app. First, create a Firebase project in the Firebase Console. Then, add the Firebase configuration to your app by running the following command in your terminal:
flutterfire config
Select the amplitude option during creation to use Amplitude as your analytics provider.
The amplitude_flutter package will be added to your pubspec.yaml file.
The following script will be added to the head of your index.html file:
<script type="text/javascript" defer>
(function(e,t){var n=e.amplitude||{_q:[],_iq:{}};var r=t.createElement("script")
;r.type="text/javascript"
;r.integrity="sha384-UcvEbHmT0LE2ZB30Y3FmY3Nfw6puAKXz/LpCFuoywywYikMOr/519Uu1yNq2nL9w"
;r.crossOrigin="anonymous";r.async=true
;r.src="https://cdn.amplitude.com/libs/amplitude-8.12.0-min.gz.js"
;r.onload=function(){if(!e.amplitude.runQueuedFunctions){
console.log("[Amplitude] Error: could not load SDK")}}
;var s=t.getElementsByTagName("script")[0];s.parentNode.insertBefore(r,s)
;function i(e,t){e.prototype[t]=function(){
this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));return this}}
var o=function(){this._q=[];return this}
;var a=["add","append","clearAll","prepend","set","setOnce","unset","preInsert","postInsert","remove"]
;for(var c=0;c<a.length;c++){i(o,a[c])}n.Identify=o;var u=function(){this._q=[]
;return this}
;var l=["setProductId","setQuantity","setPrice","setRevenueType","setEventProperties"]
;for(var p=0;p<l.length;p++){i(u,l[p])}n.Revenue=u
;var d=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","enableTracking","setGlobalUserProperties","identify","clearUserProperties","setGroup","logRevenueV2","regenerateDeviceId","groupIdentify","onInit","logEventWithTimestamp","logEventWithGroups","setSessionId","resetSessionId","getDeviceId","getUserId","setMinTimeBetweenSessionsMillis","setEventUploadThreshold","setUseDynamicConfig","setServerZone","setServerUrl","sendEvents","setLibrary","setTransport"]
;function v(e){function t(t){e[t]=function(){
e._q.push([t].concat(Array.prototype.slice.call(arguments,0)))}}
for(var n=0;n<d.length;n++){t(d[n])}}v(n);n.getInstance=function(e){
e=(!e||e.length===0?"$default_instance":e).toLowerCase()
;if(!Object.prototype.hasOwnProperty.call(n._iq,e)){n._iq[e]={_q:[]};v(n._iq[e])
}return n._iq[e]};e.amplitude=n})(window,document);
</script>
To use Amplitude, you will need to create an Amplitude account and add your app to the Amplitude console. You will receive an API key for your app. Add this key to the assets/config.json file in the root of your project.
Select the posthog option during creation to use PostHog as your analytics provider.
The posthog_flutter package will be added to your pubspec.yaml file.
The following meta tags will be added to your AndroidManifest.xml and Info.plist files:
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.posthog_flutter_example">
<application>
<activity>
[...]
</activity>
<meta-data android:name="com.posthog.posthog.API_KEY" android:value="YOUR_API_KEY_GOES_HERE" />
<meta-data android:name="com.posthog.posthog.POSTHOG_HOST" android:value="https://app.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>
The following keys will be added to your Info.plist file:
<?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>
[...]
<key>com.posthog.posthog.API_KEY</key>
<string>YOUR_API_KEY_GOES_HERE</string>
<key>com.posthog.posthog.POSTHOG_HOST</key>
<string>https://app.posthog.com</string>
<key>com.posthog.posthog.CAPTURE_APPLICATION_LIFECYCLE_EVENTS</key>
<true/>
<key>com.posthog.posthog.DEBUG</key>
<true/>
[...]
</dict>
</plist>
The following script will be added to the head tag in your index.html file:
<script>
!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".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('YOUR_WRITE_KEY_GOES_HERE', {api_host: 'https://app.posthog.com'})
</script>
To use PostHog, you will need to create a PostHog account and add your project configuration to your app. First, create a PostHog project in the PostHog Console. Then, add the PostHog API key to the config file in assets/config.json.