10X Your Flutter App’s Performance: The Ultimate Guide to AppsFlyer Integration
A Step-by-Step Guide to Harnessing Mobile Attribution and Analytics in Your Cross-Platform App
Guide Covers:
1. Learn how to install the AppsFlyer plugin, set up Android and iOS platforms
2. Implement user tracking, event logging, and profile management in your app
3. Includes real-world an example of tracking user registration
4. Gain insights to optimize marketing campaigns and boost app performance
Introduction
Did you know that 63% of app developers struggle to accurately track user acquisition? In today’s competitive app market, understanding user behavior and optimizing marketing campaigns is crucial for success. This guide will walk you through integrating AppsFlyer — a leading mobile attribution and marketing analytics platform — into your Flutter app, helping you harness the power of data-driven marketing decisions
1. Setting the Stage: Installing the AppsFlyer Plugin
There are two ways to add the AppsFlyer plugin to your Flutter project:
a. Terminal
Open the terminal within your project scope and enter the following command:
flutter pub add appsflyer_sdkb. pubspec.yaml
Alternatively, add the appsflyer_sdk plugin directly in the pubspec.yaml file:
dependencies:
appsflyer_sdk: 6.11.3 # Add this line under the dependency sectionNote: Using the latest version may result in an error when running pod install for iOS. Therefore, it's recommended to use the version mentioned above.
2. Android Level Integration
a. Enable MavenCentral
AppsFlyer requires MavenCentral. Open the android/build.gradle file and add the following lines:
buildscript {
ext.kotlin_version = '1.7.20'
repositories {
// Maven Central enabled for AppsFlyer
mavenCentral()
}
// ...
}allprojects {
repositories {
google()
jcenter()
// Maven Central enabled for AppsFlyer
mavenCentral()
}
}b. Add AppsFlyer SDK to Android
In the android/app/build.gradle file, add these dependencies:
dependencies {
// ...
// AppsFlyer integration
implementation "com.android.installreferrer:installreferrer:2.2"
implementation 'com.appsflyer:af-android-sdk:6.14.0'
// ...
}c. Add Permissions to AndroidManifest.xml
In the android/app/src/main/AndroidManifest.xml file, add these permissions:
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />3. iOS Integration
For iOS, the AppsFlyer plugin manages the integration automatically, so no additional code is needed in the iOS folder.
4. Flutter Integration
a. AppsFlyer Function Class
Create a new Dart file (e.g., appsflyer_functions.dart) with the following code:
import 'package:appsflyer_sdk/appsflyer_sdk.dart';class AppsFlyerFunctions {
static AppsFlyerOptions appsFlyerOptions;
static AppsflyerSdk appsflyerSdk; static Future<void> initAppsFlyer() async {
// AppsFlyer
appsFlyerOptions = AppsFlyerOptions(
afDevKey: 'YOUR_APPSFLYER_DEV_KEY',
appId: "com.example.app", // Your app ID
showDebug: true, // Display debug logs
timeToWaitForATTUserAuthorization: 50, // Required for iOS 14.5+
); appsflyerSdk = AppsflyerSdk(appsFlyerOptions); appsflyerSdk.initSdk(
registerConversionDataCallback: true,
registerOnAppOpenAttributionCallback: true,
registerOnDeepLinkingCallback: true,
);
} static Future<void> pushUserProfile(String userId) async {
await appsflyerSdk.setCustomerUserId(userId);
} static Future<void> logEvent(String eventName, Map eventValues) async {
bool result;
try {
result = await appsflyerSdk.logEvent(eventName, eventValues);
} on Exception catch (e) {
// Handle exception
}
print("Result logEvent: $result");
}
}
initAppsFlyer: Initializes the AppsFlyer SDK with your app's configuration.pushUserProfile: Sends the user's profile information to the AppsFlyer dashboard.logEvent: Triggers an event and sends the event data to the AppsFlyer dashboard.
Note: Replace 'YOUR_APPSFLYER_DEV_KEY' and "com.example.app" with your actual AppsFlyer Dev Key and app ID, respectively.
b. Initialize AppsFlyer
In your main.dart file, initialize the AppsFlyer SDK:
import 'package:flutter/material.dart';
import 'appsflyer_functions.dart';void main() {
WidgetsFlutterBinding.ensureInitialized();
AppsFlyerFunctions.initAppsFlyer();
runApp(MyApp());
}c. Set Up User Profile
Call the pushUserProfile function when a user successfully logs in:
void onUserSuccessfullyLoggedIn(String userId) {
AppsFlyerFunctions.pushUserProfile(userId);
}d. Log Events
Log events using the logEvent function:
void logLoginEvent() {
AppsFlyerFunctions.logEvent("Login", {
"status": "true"
});
}Real-World Example: Tracking User Registration
Let’s create a simple example of how to use AppsFlyer to track user registrations in a Flutter app:
import 'package:flutter/material.dart';
import 'appsflyer_functions.dart';class RegistrationPage extends StatelessWidget {
final TextEditingController _emailController = TextEditingController();
final TextEditingController _passwordController = TextEditingController(); void _register(BuildContext context) {
// Perform registration logic here
String email = _emailController.text;
// Log registration event
AppsFlyerFunctions.logEvent("UserRegistration", {
"email": email,
"source": "RegistrationPage"
}); // Set user profile
AppsFlyerFunctions.pushUserProfile(email); // Navigate to home page or show success message
Navigator.pushReplacementNamed(context, '/home');
} @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Register')),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
children: [
TextField(
controller: _emailController,
decoration: InputDecoration(labelText: 'Email'),
),
TextField(
controller: _passwordController,
decoration: InputDecoration(labelText: 'Password'),
obscureText: true,
),
ElevatedButton(
onPressed: () => _register(context),
child: Text('Register'),
),
],
),
),
);
}
}
This example demonstrates how to log a user registration event and set the user profile using AppsFlyer in a simple registration form.
Best Practices
- Event Naming Convention: Follow a consistent naming convention for your events to make it easier to analyze and filter data in the AppsFlyer dashboard.
- Track Meaningful Events: Track events that are relevant to your app’s user flow and business objectives, such as user registration, purchases, level completions, or content views.
- Event Parameters: Include relevant parameters with your events to capture additional context and data points, such as product IDs, purchase amounts, or level names.
- Test and Validate: Before releasing your app, thoroughly test the AppsFlyer integration to ensure that events are being tracked correctly and that user data is being sent to the dashboard as expected.
Troubleshooting
If you encounter any issues during the integration process, here are a few troubleshooting tips:
- Check Permissions: Ensure that you have added the required permissions to the
AndroidManifest.xmlfile for Android. - Check Dependencies: Verify that you have added the correct dependencies and SDK versions to your project files.
- Check Logs: Enable debugging mode and check the logs for any error messages or warnings that could help identify the issue.
- Refer to Official Documentation: If you’re still having trouble, refer to the official AppsFlyer documentation for Flutter, which provides detailed instructions and troubleshooting tips: AppsFlyer Flutter Integration Guide
Additional Resources
Conclusion
Integrating AppsFlyer into your Flutter app is a game-changer for understanding user behavior and optimizing your marketing efforts. By following this guide, you’re well on your way to supercharging your app’s performance. Don’t wait — implement these steps today and start reaping the benefits of data-driven decisions.
Have you integrated AppsFlyer into your Flutter app? Share your experience in the comments below. Your insights could help fellow developers boost their app performance!
