Flutter用户行为分析插件hotjar的使用

发布于 1周前 作者 zlyuanteng 来自 Flutter

Flutter用户行为分析插件hotjar的使用

Hotjar 是一个强大的工具，用于跟踪和分析用户在网站或应用中的行为。通过Flutter插件 hotjar，你可以在Flutter应用中集成Hotjar的功能。

使用方法

通过标签管理器集成Hotjar

如果你已经通过标签管理器（如Google Tag Manager）集成了Hotjar，你可以直接在Flutter代码中触发事件和标记记录。

import 'package:hotjar/hotjar.dart';

void main() {
  // 触发特定事件
  hj("trigger", "my-poll");
  
  // 标记当前记录
  hj("tagRecording", ["tag1", "tag2"]);

  // 或者使用更简洁的方法
  trigger("my-poll");
  tagRecording(["tag1", "tag2"]);
}

手动安装Hotjar

如果没有通过标签管理器集成，你需要手动加载Hotjar，并传入你的站点ID。

import 'package:hotjar/hotjar.dart';

void main() async {
  // 加载Hotjar并传入站点ID
  await loadHotjar("SITE_ID");

  // 触发现有事件
  hj("trigger", "my-poll");
  hj("tagRecording", ["tag1", "tag2"]);

  // 或者使用更简洁的方法
  trigger("my-poll");
  tagRecording(["tag1", "tag2"]);
}

完整示例Demo

下面是一个完整的Flutter应用示例，展示了如何在应用启动时触发Hotjar事件和标记记录。

import 'package:flutter/material.dart';
import 'package:hotjar/hotjar.dart' as hotjar;

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 如果需要手动加载Hotjar，请取消注释以下行并替换'SITE_ID'
  // await hotjar.loadHotjar('SITE_ID');

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 在应用启动时触发事件和标记记录
    hotjar.trigger('my-poll-1');
    hotjar.tagRecording(['tag1']);

    return MaterialApp(
      title: 'Flutter Hotjar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Hotjar Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
    
    // 每次点击按钮时可以触发新的事件
    hotjar.trigger('button-clicked');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

更多关于Flutter用户行为分析插件hotjar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter用户行为分析插件hotjar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter应用中集成Hotjar进行用户行为分析，通常涉及到在原生代码层面（iOS和Android）进行一些配置，然后在Flutter层进行初始化和使用。Hotjar本身并没有官方的Flutter插件，因此我们需要通过平台通道（Method Channel）或者结合其Web SDK（如果应用支持Web平台）来实现。以下是一个简要的步骤指南和相关的代码示例，展示如何在Flutter应用中集成Hotjar。

步骤 1: 添加Hotjar SDK到原生平台

iOS

  1. 在Podfile中添加Hotjar SDK

    打开你的ios/Podfile文件，添加以下行到target 'Runner' do部分：

    pod 'Hotjar', '~> 6.0'  # 确保版本号是最新的

  2. 运行pod install

    在终端中，导航到ios/目录并运行：

    pod install

  3. 在AppDelegate中初始化Hotjar

    打开ios/Runner/AppDelegate.swift或AppDelegate.m，在application:didFinishLaunchingWithOptions:方法中添加Hotjar初始化代码：

    import Hotjar

func application(_ application: UIApplication,
                 didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // ... 其他代码

    Hotjar.configure(with: Configuration(siteId: "YOUR_HOTJAR_SITE_ID", isProductionEnabled: true))

    return true
}

Android

  1. 在build.gradle中添加Hotjar SDK

    打开android/app/build.gradle文件，在dependencies部分添加：

    implementation 'io.hotjar:hotjar-android-sdk:6.0.0'  // 确保版本号是最新的

  2. 在MainActivity中初始化Hotjar

    打开android/app/src/main/kotlin/com/example/yourapp/MainActivity.kt（或Java版本），在onCreate方法中添加Hotjar初始化代码：

    import io.hotjar.android.Hotjar

class MainActivity: FlutterActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // 初始化Hotjar
        Hotjar.init(this, "YOUR_HOTJAR_SITE_ID")
    }
}

步骤 2: 在Flutter层使用Method Channel调用原生方法

由于Hotjar没有直接的Flutter插件，我们可以使用Method Channel来调用原生平台的Hotjar功能。这里仅展示如何设置Method Channel，具体功能的调用需要根据你的需求扩展。

创建Method Channel

在Flutter项目中创建一个Dart文件（例如hotjar_service.dart），用于封装对Hotjar的调用：

import 'package:flutter/services.dart';

class HotjarService {
  static const MethodChannel _channel = MethodChannel('com.example.yourapp/hotjar');

  // 假设你有一个方法来跟踪事件
  static Future<void> trackEvent(String eventName) async {
    try {
      await _channel.invokeMethod('trackEvent', {'eventName': eventName});
    } on PlatformException catch (e) {
      print("Failed to track event: '${e.message}'.");
    }
  }
}

在原生平台实现Method Channel方法

iOS

在AppDelegate.swift中添加对Method Channel的处理：

import UIKit
import Flutter
import Hotjar

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        GeneratedPluginRegistrant.register(with: self)

        let controller : FlutterViewController = window?.rootViewController as! FlutterViewController
        let channel = FlutterMethodChannel(name: "com.example.yourapp/hotjar", binaryMessenger: controller.binaryMessenger)
        channel.setMethodCallHandler({
            (call: FlutterMethodCall, result: @escaping FlutterResult) in
            if call.method == "trackEvent" {
                guard let arguments = call.arguments as? [String: String],
                      let eventName = arguments["eventName"] else {
                    result(FlutterError(code: "INVALID_ARGUMENT", message: "Invalid argument", details: nil))
                    return
                }
                // 在这里调用Hotjar的跟踪方法
                Hotjar.shared().trackEvent(withName: eventName)
                result(success: true)
            } else {
                result(FlutterError(code: "UNKNOWN_METHOD", message: "Unknown method", details: nil))
            }
        })

        Hotjar.configure(with: Configuration(siteId: "YOUR_HOTJAR_SITE_ID", isProductionEnabled: true))

        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}
Android

在MainActivity.kt中添加对Method Channel的处理：

import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel
import io.hotjar.android.Hotjar

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

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler { call, result ->
            if (call.method == "trackEvent") {
                val arguments = call.argument<Map<String, String>>()
                arguments?.let {
                    val eventName = it["eventName"]
                    eventName?.let {
                        // 在这里调用Hotjar的跟踪方法
                        Hotjar.trackEvent(it)
                        result.success(true)
                    } ?: result.error("INVALID_ARGUMENT", "Missing event name", null)
                } ?: result.error("INVALID_ARGUMENT", "Invalid argument format", null)
            } else {
                result.error("UNKNOWN_METHOD", "Unknown method", null)
            }
        }

        // 初始化Hotjar
        Hotjar.init(this, "YOUR_HOTJAR_SITE_ID")
    }
}

使用HotjarService

现在，你可以在Flutter应用的任何地方使用HotjarService来跟踪事件：

void _trackButtonClick() {
  HotjarService.trackEvent('button_clicked');
}

请注意，这只是一个基础示例，实际使用中可能需要根据Hotjar SDK的特性和你的应用需求进行更多的配置和功能实现。确保遵循Hotjar的官方文档和最佳实践来确保数据收集的有效性和合规性。

回到顶部