如何在Flutter应用中集成Microsoft Clarity分析工具？

一、Android原生端配置 #

1. 添加依赖与权限 #

打开Flutter项目的android/app/build.gradle文件，在dependencies块中添加Clarity的Android SDK依赖：

dependencies {
    // 保留原有依赖
    implementation 'com.microsoft.clarity:clarity:1.+'
}

接着在AndroidManifest.xml中添加必要权限：

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

2. 初始化Clarity并实现MethodChannel #

打开MainActivity.kt（或MainActivity.java），通过MethodChannel搭建Flutter与原生的通信桥，同时封装Clarity的核心调用方法：

Kotlin示例：

import android.os.Bundle
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel
import com.microsoft.clarity.Clarity

class MainActivity : FlutterActivity() {
    private val CHANNEL = "com.yourapp.clarity/bridge"

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler { call, result ->
            when (call.method) {
                "initClarity" -> {
                    val projectId = call.argument<String>("projectId")
                    projectId?.let {
                        Clarity.initialize(applicationContext, it)
                        result.success("Clarity initialized with ID: $it")
                    } ?: result.error("EMPTY_ID", "Project ID cannot be null", null)
                }
                "setUserIdentifier" -> {
                    val userId = call.argument<String>("userId")
                    userId?.let {
                        Clarity.setUserId(it)
                        result.success("User ID set to: $it")
                    } ?: result.error("EMPTY_ID", "User ID cannot be null", null)
                }
                else -> result.notImplemented()
            }
        }
    }
}

Java示例：

import android.os.Bundle;
import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugin.common.MethodChannel;
import com.microsoft.clarity.Clarity;

public class MainActivity extends FlutterActivity {
    private static final String CHANNEL = "com.yourapp.clarity/bridge";

    @Override
    public void configureFlutterEngine(FlutterEngine flutterEngine) {
        super.configureFlutterEngine(flutterEngine);
        new MethodChannel(flutterEngine.getDartExecutor().getBinaryMessenger(), CHANNEL).setMethodCallHandler(
                (call, result) -> {
                    switch (call.method) {
                        case "initClarity":
                            String projectId = call.argument("projectId");
                            if (projectId != null) {
                                Clarity.initialize(getApplicationContext(), projectId);
                                result.success("Clarity initialized with ID: " + projectId);
                            } else {
                                result.error("EMPTY_ID", "Project ID cannot be null", null);
                            }
                            break;
                        case "setUserIdentifier":
                            String userId = call.argument("userId");
                            if (userId != null) {
                                Clarity.setUserId(userId);
                                result.success("User ID set to: " + userId);
                            } else {
                                result.error("EMPTY_ID", "User ID cannot be null", null);
                            }
                            break;
                        default:
                            result.notImplemented();
                    }
                }
        );
    }
}

二、Flutter端调用原生方法 #

创建工具类封装MethodChannel调用逻辑，方便在Flutter代码中使用：

import 'package:flutter/services.dart';

class ClarityManager {
  static const MethodChannel _channel = MethodChannel('com.yourapp.clarity/bridge');

  /// 初始化Clarity，传入你的项目ID
  static Future<String?> initialize(String projectId) async {
    try {
      return await _channel.invokeMethod('initClarity', {'projectId': projectId});
    } on PlatformException catch (e) {
      print("Clarity init error: ${e.message}");
      return null;
    }
  }

  /// 自定义用户ID，用于关联用户行为数据（可选）
  static Future<String?> setUserId(String userId) async {
    try {
      return await _channel.invokeMethod('setUserIdentifier', {'userId': userId});
    } on PlatformException catch (e) {
      print("Set user ID error: ${e.message}");
      return null;
    }
  }
}

在Flutter应用入口处完成初始化：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    // 替换为你的Microsoft Clarity项目ID
    ClarityManager.initialize("YOUR_CLARITY_PROJECT_ID");
    // 可选：设置用户ID
    // ClarityManager.setUserId("user_1001");
  }

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(body: Center(child: Text("Clarity Integration Demo"))),
    );
  }
}

三、验证集成 #

运行Flutter应用后，登录Microsoft Clarity后台，等待5-10分钟即可看到应用的会话数据、热力图、用户行为等统计信息。

内容的提问来源于stack exchange，提问作者vkas dev