Seamless CleverTap Integration with Flutter: A Comprehensive Guide

Master CleverTap Integration for Flutter: Step-by-Step Guide with Real-World Examples

Integrating third-party services like CleverTap into your Flutter app can be a daunting task, especially for developers new to the platform. CleverTap is a powerful analytics and engagement platform that allows you to track user behavior, send targeted push notifications, and personalize the app experience. In this comprehensive guide, we’ll walk you through the step-by-step process of integrating the CleverTap plugin with your Flutter app, covering both Android and iOS platforms. Whether you’re building a brand-new app or enhancing an existing one, this guide will provide you with the necessary knowledge and code snippets to ensure a smooth integration process. Let’s dive in!

1. Setting the Stage: Installing the CleverTap Plugin There are two ways to add plugin within your project folder

a. Terminal: Open the terminal within your project scope and enter the below command to add the CleverTap plugin to your project.

• Command — flutter pub add clevertap_plugin

flutter pub add clevertap_plugin

b. Pubspec.yaml : Directly add clevertap_plugin through pubspec.yaml file

dependencies:

clevertap_plugin: ^2.4.0 //add this line under dependency section

In Clevertap, we need to natively add code for both Android and IOS Platforms

2. Android Level Integration

a. Adding CleverTap SDK to Android

• Folder Structure: android → app → build.gradle → dependencies

dependencies {
.... // other dependencies
  implementation 'com.android.installreferrer:installreferrer:2.2'     
  implementation 'com.clevertap.android:clevertap-android-sdk:6.1.1'
....
}

b. CleverTap Configuration

• Folder Structure: android → app → src → main → AndroidManifest.xml

<application
.... //other meta-data property
  <meta-data android:name="CLEVERTAP_ACCOUNT_ID" android:value="XXX-XXX-XXXX"/>         
  <meta-data android:name="CLEVERTAP_TOKEN" android:value="xxx-xxx"/>
....
</application>

Note: Check your CleverTap Dashboard URL: https://eu1.dashboard.clevertap.com/XXX-XXX-XXXX/main

• this eu1 represents region Europe. If your region is other than Europe then you have to add the region code.

Region Code:

1. eu1 → No Extra Implementation
2. in1 → India
3. us1 → U.S aps3 → Indonesia
4. mec1 → Middle East (UAE)

Example: Your CleverTap Dashboard URL: https://in1.dashboard.clevertap.com/XXX-XXX-XXXX/main

Then you have to add these below your CLEVERTAP_ACCOUNT_ID, CLEVERTAP_TOKEN

<application
.... //other meta-data property
  <meta-data android:name="CLEVERTAP_REGION" android:value="in1"/>
  //replace in1 with your region code same as highlighted in the url
....
</application>

Here replace in1 with your mentioned parameter with in URL

b. Adding Permission for AndroidManifest.xml

• Use the same file as above to add below code

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

c. Creating the CleverTap Class

Folder Structure: android → app → src → main → java → com → saurabh7973 → guidestar but rather than saurabh7973 and guidestar it would be your orgaization name and project name

Class Name: MyApplication.java Class Content:

package com.saurabh7973.guidestar;

public class MyApplication extends com.clevertap.android.sdk.Application {

  @Override
  public void onCreate() {
    super.onCreate();
  }
}

1. Add these in you AndroidManifest.xml

<application 
android:label="GuideStar" 
android:name="com.saurabh7973.guidestar.MyApplication" //add this line

with this Full Android Implementation is Completed.

3. iOS Integration

1. Updating the Podfile (Folder : ios → podfile)

target 'Runner' do
  use_frameworks!
  use_modular_headers!
   pod "CleverTap-iOS-SDK" // Only add this line in your pod file inside target 
  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
end

2. Modifying AppDelegate.swift (Folder : ios → runner → AppDelegate.swift)

a. Import Statement

import CleverTapSDK

b. Main Function

didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {

// Add these two lines
   CleverTap.autoIntegrate()
   CleverTap.setDebugLevel(CleverTapLogLevel.debug.rawValue)

}

c. Configuring Info.plist (Folder: ios → runner → Info.plist)

<key>CleverTapAccountID</key>
<string>XXX-XXX-XXXX</string>
<key>CleverTapToken</key>
<string>xxx-xxx</string>

Similar to Android integration if your dashboard URL consists of anything other than eu1 you have to add a region code in your info.plist file Example for : https://in1.dashboard.clevertap.com/XXX-XXX-XXXX/main

<key>CleverTapRegion</key> 
<string>in1</string>

With this all the native integration process is completed now we can focus on Setting up users and pushing events onto our CleverTap Dashboard.

4. Enabling Debug Mode (Optional) (Comment Before Release)

a. main (Folder Directory: lib/main.dart)

// Add these Import File to your main.dart file to access
import clevertap : import 'package:clevertap_plugin/clevertap_plugin.dart';

void main () {

//Clever Tap (Code to see debug logs on console, comment before putting out app for production release should only be used for testing)
CleverTapPlugin.setDebugLevel(3);

}

5. Building the CleverTap Functions Class

a. CleverTapFunctions.dart

//importing Clevertap

import 'package:clevertap_plugin/clevertap_plugin.dart';

1. Pushing User Profiles

static Future<void> pushUserProfile({
  String emailId, 
  String clientCode , 
  String mobileNo , 
  String userID}) async { 
    var profile = { 
    "Email": emailId, 
    "Identity": clientCode, 
    "Phone": mobileNo, 
    "UserId": userId, 
  };
 await CleverTapPlugin.onUserLogin(profile);
}

• Depending on the use case you can call pushUserProfile method from anywhere in my use case I use it after the user has successfully logged in to my app. The same goes for parameters use the parameter you want to set with the user ID this is the general example.

2. Sending Events

  static Future<void> sendEvent(String eventName, var customProps) async {
    await CleverTapPlugin.recordEvent(eventName, customProps);
  }

• This is for sending the event to the clever tap there are two parametes event name and event payload. you can create this I will show how to use it in the below sections.

6. Implementing CleverTap in Your App

Note: Before login, you have to import clevertap

import 'package:clevertap_plugin/clevertap_plugin.dart';

a. Setting Up User Profiles

• A simple use-case example to help you understand

onUserSuccessfullyLoggedIn(){
  CleverTapfunctions.pushUserProfile(
    emailId : saurabhupadhyay7973@gmail.com //your user email
    Identity: 8745XXX986 //your user identity
    Phone: 864845XXXX //your user phone no
    UserId: Saurabh7973 //your user userid 
  );
}

b. Pushing Events

• a simple use case for pushing events to the CleverTap Dashboard

//Login Event
CleverTapfunctions.sendEvent("Login", {
"status": "true" //Status Showing User was able to login successfully
});

7. Real-World Examples and Use Cases

a. Tracking User Onboarding:

• One common use case for CleverTap is tracking the user onboarding process. By pushing events at different stages of the onboarding flow, you can identify bottlenecks and optimize the experience.

For example:

// Pushed when the user opens the onboarding screen
CleverTapfunctions.sendEvent("Onboarding_Started", {});

// Pushed when the user completes a specific step
CleverTapfunctions.sendEvent("Onboarding_Step_Completed", {
  "step_name": "Profile Setup"
});

// Pushed when the user completes the entire onboarding process
CleverTapfunctions.sendEvent("Onboarding_Completed", {});

b. Analyzing Shopping Cart Abandonment:

• CleverTap can also help you analyze shopping cart abandonment rates and identify potential issues. By tracking events related to the shopping cart flow, you can gain valuable insights and potentially recover abandoned carts through targeted campaigns.

// Pushed when the user adds an item to the cart
CleverTapfunctions.sendEvent("Cart_ItemAdded", {
  "product_id": "1234",
  "product_name": "Widget X"
});

// Pushed when the user initiates the checkout process
CleverTapfunctions.sendEvent("Checkout_Started", {});

// Pushed if the user abandons the cart
CleverTapfunctions.sendEvent("Cart_Abandoned", {
  "cart_value": 49.99
});

c. Sending Personalized Push Notifications:

• With CleverTap’s powerful segmentation capabilities, you can send highly targeted and personalized push notifications to your users based on their behavior and app interactions.

// Set up user profile with relevant data
CleverTapfunctions.pushUserProfile(
  emailId: "user@example.com",
  identity: "12345",
  phone: "+1234567890",
  userId: "user_abc"
);

// Send a personalized push notification
CleverTapfunctions.sendEvent("Purchase_Completed", {
  "order_id": "ABC123",
  "total_amount": 99.99
});

In the CleverTap dashboard, you can then create a segment of users who recently made a purchase and send them a targeted push notification, such as a special offer or a request for feedback.

💡 Want more insider tips and proven strategies for developers? Subscribe now to stay ahead in your coding journey!