Setting Up Microsoft Clarity in Flutter: Complete Guide for iOS and Android

Introduction

Microsoft Clarity is a user behaviour analytics tool that provides session recordings, heat maps, and insights. While Clarity doesn't have an official Flutter SDK, we can implement it for mobile apps using platform-specific code. This guide walks through the setup process for both Android and iOS platforms.

Prerequisites

• A Microsoft Clarity account with a project ID

• Flutter development environment set up

• Basic knowledge of Android (Kotlin) and iOS (Swift) development

Android Setup

Step 1: Modify build.gradle

Add the Clarity dependency to your app-level build.gradle file (usually at android/app/build.gradle):

dependencies {
    implementation 'com.microsoft.clarity:clarity:3.+'
}

Step 2: Update AndroidManifest.xml

Add required permissions to your android/app/src/main/AndroidManifest.xml:

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

Step 3: Initialize Clarity

Create or modify your MainActivity.kt file (android/app/src/main/kotlin/your/package/name/MainActivity.kt):

package your.package.name

import com.microsoft.clarity.Clarity
import com.microsoft.clarity.ClarityConfig
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine

class MainActivity : FlutterActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)

        val config = ClarityConfig("your_project_id")
        Clarity.initialize(applicationContext, config)
    }
}

iOS Setup

Step 1: Update Podfile

Add the Clarity SDK to your ios/Podfile:

target 'Runner' do
  # ... existing configurations ...

  pod 'Clarity'
end

Step 2: Install Dependencies

Run in the iOS directory:

cd ios
pod install

Step 3: Initialize Clarity

Modify your ios/Runner/AppDelegate.swift:

import UIKit
import Flutter
import ClaritySDK

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        // Initialize Clarity
        let config = ClarityConfiguration(projectId: "your_project_id")
        Clarity.initialize(configuration: config)

        GeneratedPluginRegistrant.register(with: self)
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

Verifying Installation

1. Build and run your app on both platforms

2. Check your Clarity dashboard for incoming data

3. Test session recording by performing some actions in your app

4. Wait 2-3 hours for data to appear in your Clarity dashboard

Troubleshooting

If you're not seeing data in your Clarity dashboard:

1. Verify project ID

2. Check network connectivity

3. Look for initialization errors in logs

4. Ensure the app has the required permissions

5. Wait several hours for data processing

Additional Resources

• Microsoft Clarity Documentation

• Android Setup Guide

• iOS Setup Guide

Remember to keep your SDKs updated and regularly check the official documentation for any changes or improvements to the implementation process.