Comprehensive Guide to Event Tracking in Flutter: Meta Analytics (FB SDK) and Google Analytics (Firebase SDK) Integration

This step-by-step document guides you through the integration of Meta Analytics and Google Analytics, showcasing how to leverage the power of facebook_app_events and firebase_analytics packages for seamless event tracking.

Source: AI generataed image

Meta Analytics (FB SDK)

1. Start with adding the package [*facebook_app_events](https://pub.dev/packages/facebook_app_events)* in your flutter app.
2. Open your *pubspec.yaml* file.
3. Add the following lines under the *dependencies* section: facebook_app_events: ^latest_version
4. Save the *pubspec.yaml* file.
5. Run the following command in your terminal to fetch and install the new dependencies: *flutter pub get*
6. Remember to import these statements in your dart code when using this package: *import 'package:facebook_app_events/facebook_app_events.dart';*
7. Now do the necessary configuration:

Android Configuration:

In the *android/app/src/main/AndroidManifest.xml* add the following lines:

<!-- FACEBOOK SDK CONFIG -->         
<meta-data android:name="com.facebook.sdk.ApplicationId"              
   android:value="@string/facebook_app_id"/>            
<meta-data android:name="com.facebook.sdk.ClientToken"              
  android:value="@string/facebook_client_token"/>         
<!-- FACEBOOK SDK CONFIG -->

1. In the *android/app/src/main/res/values/strings.xml file add these lines: If the file doesn't exist create a new file named strings.xml under the `android/app/src/main/res/values/`*values folder:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Facebook SDK -->
<string name="app_name">actual_app_name</string>
<string name="facebook_app_id">actual_app_id</string>
<string name="facebook_client_token">actual_client_token</string>
</resources>

You can get the app name in the *android/app/src/main/AndroidManifest.xml: under the application tag as : `android:label="YourAppName"`*

The facebook app id and facebook client token can be obtained at meta developer account dashboard under the app settings in the basic section you get app id and under the advanced settings you get the client token.

IOS Configuration:

1. In the ios/Runner/Info.plist add the following lines:

<!-- FACEBOOK SDK CONFIG --> 
<key>CFBundleURLTypes</key> 
<array>     
    <dict>         
        <key>CFBundleURLSchemes</key>         
         <array>             
               <string>fbYOUR_APP_ID</string>         
         </array>     
    </dict> 
</array> 
<key>FacebookAppID</key> 
<string>YOUR_APP_ID</string> 
<key>FacebookClientToken</key> 
<string>YOUR_CLIENT_TOKEN</string> 
<key>FacebookDisplayName</key> 
<string>YOUR_APP_NAME</string> 

<!-- FACEBOOK SDK CONFIG -->

Replace *YOUR_APP_ID, `YOUR_CLIENT_TOKEN *andYOUR_APP_NAME` with your actual Facebook App ID, Client Token, and App Name.

Notes:

The CFBundleURLTypes key is added under the existing configuration for Facebook SDK. If you already have existing permissions in your Info.plist file, ensure that you merge the <dict> entries appropriately.

If the CFBundleURLTypes key already exists, you can add the new <dict> entry inside the existing <array>. This is common when your app already has other URL schemes declared.

• Here’s an example of how to integrate if CFBundleURLTypes already exists:

<key>CFBundleURLTypes</key> 
<array>     
    <!-- Existing URL schemes -->     
    <dict>         
          <key>CFBundleURLSchemes</key>         
          <array>             
    <!-- Existing URL scheme entries -->         
          </array>     
    </dict>     
<!-- Add the new Meta SDK URL scheme entry here -->     
    <dict>         
          <key>CFBundleURLSchemes</key>         
          <array>             
                <string>fbYOUR_APP_ID</string>         
          </array>     
    </dict> 
</array>

Ensure that you adapt these changes according to your specific Info.plist structure.

After doing the necessary configurations for android and ios both you can now start using the *facebook_app_events* package:

1. Import the package.
2. Initialize the SDK: *// Meta Analytics static final facebookappevents = FacebookAppEvents();*

Log Events: Now you can log your events at the required place in your app like this using the logevent function:

// Meta Analytics               
        facebookappevents.logEvent(               
            name: "event_name",                 
            parameters: {                 
                "parameter_name_key": "parameter_value",                 
            },               
        );

You can log upto 1000 event names using the meta sdk FYR and an event can have unlimited parameters, but only 25 can be active at the same time.

There are two standard events which are automatically logged by the FB SDK :

Standard events logged by Meta SDK

• You can view all the logged events at the meta events manager dashboard inside the data sources section.

For the first time the events which are logged can take upto 24hrs to be visible at the meta events manager dashboard.

• Remember to link the app details with the facebook app which you have created on meta developer account.

Meta Dashboard

• Go to the customize adding a Facebook Login button option on meta developer accounts page under your app.
• And navigate to quickstart.

• Then add bundle id for IOS and app id and package name for Android.
• IOS:

• Android

You can find these package name and class name inside your flutter app.

Source: AI generataed image

Google Analytics (Firebase SDK)

1. Start with adding the package firebase_analytics in your flutter app.
2. Open your *pubspec.yaml* file.
3. Add the following lines under the *dependencies section: `firebase_analytics: ^latest_version`*
4. Save the *pubspec.yaml* file.
5. Run the following command in your terminal to fetch and install the new dependency: *flutter pub get*
6. Remember to import these statements in your Dart code when using this package: *import 'package:firebase_analytics/firebase_analytics.dart'; import 'package:firebase_analytics/observer.dart';*
7. Now do the necessary configuration: Follow this doc for configuration in flutter app.
8. For Android Configuration you may need to add this line in android/app/src/main/AndroidManifest.xml : <!-- Firebase Analytics --> <meta-data android:name="firebase_analytics_collection_enabled" android:value="true" />under the application tag.
9. Also add these lines in dependencies class in android/app/build.gradle: implementation(platform("com.google.firebase:firebase-bom:32.6.0")) implementation("com.google.firebase:firebase-analytics")

Note: The version may change so use the updated version.

• And in the same file under the plugins add this line:

id "com.google.gms.google-services"

• Also similarly in the file *android/build.gradle add this line under the `dependencies` *:

classpath "com.google.gms:google-services:4.3.14"

IOS Configuration:

In the *ios/Runner/Info.plist* file, add the following lines:

<!-- FIREBASE SDK CONFIG --> 
<key>FirebaseAppDelegateProxyEnabled</key> 
<false/> 
<!-- FIREBASE SDK CONFIG -->

Ensure that Firebase Analytics initialization is handled automatically through the configuration files (GoogleService-Info.plist for iOS, google-services.json for Android).

After doing the necessary configurations for android and ios both you can now start using the firebase_analytics package: Import the package.

Initialization is handled automatically through Firebase configuration files.

Manually you can initialize it in the dart code as :

WidgetsFlutterBinding.ensureInitialized();   
try {     
  await Firebase.initializeApp(       
    options: DefaultFirebaseOptions.currentPlatform,     
  );     
  FirebaseAnalytics.instance.setAnalyticsCollectionEnabled(true);     
  // set observer     
  FirebaseAnalyticsObserver(analytics: FirebaseAnalytics.instance);    
} catch (e) {     
    print("Failed to initialize Firebase: $e");   
}

Also add this line inside your build method or the place where you will use the firebase analytics : FirebaseAnalyticsObserver(analytics: FirebaseAnalytics.instance)

Log Events: Now you can log your events at the required place in your app like this using the logevent function:

FirebaseAnalytics().logEvent(
  name: 'purchase',
  parameters: <String, dynamic>{
    'item_id': 'ABC123',
    'currency': 'USD',
  },
);

Note: Read this doc for reference on how many types of events can be logged.

Note on Firebase Analytics Data Visibility

• Real-Time Analytics Dashboard: The events logged using Firebase Analytics are visible in the Real-Time Analytics Dashboard on the Firebase console. However, it’s crucial to note that this real-time data is only available for 24 hours. After this period, the events will no longer be visible in the real-time analytics dashboard.
• Long-Term Data Retention: For a comprehensive and long-term analysis of your analytics data, especially detailed parameters of logged events, Firebase Analytics provides an option to export your data to BigQuery. Please be aware that linking Firebase Analytics with BigQuery is a paid feature.
• **Considerations:
• **Real-time analytics is beneficial for immediate insights and monitoring
• For long-term and detailed data analysis beyond 24 hours, consider exploring the BigQuery integration

Linking Firebase Analytics with BigQuery:

1. Navigate to your Firebase project on the Firebase Console.
2. Go to “Project Settings” -> “Integrations” -> “BigQuery.”
3. Follow the prompts to link your Firebase project with BigQuery.

Keep in mind that exporting data to BigQuery may incur additional costs based on your usage. Refer to the Firebase and BigQuery pricing documentation for more details.

Contributed by:

Saksham Avasthi