Flutter博客分析插件bloglytics的使用

bloglytics

一个快速分析用户在您的博客每个小部件上花费时间的工具。

适用人群

此工具适用于那些已经创建了用于构建类似博客内容的 ListView 的人，并且希望了解用户在每个小部件上花费了多少时间，以便估算阅读时间、滚动深度等。

基本功能

此插件可以实现以下功能：

1. 跟踪哪个小部件被查看。
2. 每个小部件被查看的时间以及时间戳。
3. 创建统计数据，您可以直接在Flutter代码中使用这些数据，也可以将其作为JSON发送到后端。

使用方法

步骤说明

1. 导入 bloglytics.dart 文件。
2. 创建一个 keepEye 对象，该对象以小部件名称列表和小部件本身作为输入。
3. 它返回一个 ListView 对象，您可以将其用于Flutter应用程序。

示例代码

以下是一个完整的示例代码，展示如何使用 bloglytics 插件来跟踪小部件的使用情况。

import 'package:flutter/material.dart';
import 'package:bloglytics/bloglytics.dart'; // 导入bloglytics库

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlogPage(),
    );
  }
}

class BlogPage extends StatefulWidget {
  @override
  _BlogPageState createState() => _BlogPageState();
}

class _BlogPageState extends State<BlogPage> {
  late KeepEye keepEye; // 创建KeepEye实例

  @override
  void initState() {
    super.initState();

    // 初始化KeepEye实例，传入小部件名称和小部件列表
    keepEye = KeepEye(
      widgetNames: ['Widget A', 'Widget B', 'Widget C'],
      widgets: [
        Container(
          color: Colors.red,
          height: 200,
          child: Center(child: Text('Widget A')),
        ),
        Container(
          color: Colors.green,
          height: 200,
          child: Center(child: Text('Widget B')),
        ),
        Container(
          color: Colors.blue,
          height: 200,
          child: Center(child: Text('Widget C')),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bloglytics 示例'),
      ),
      body: Column(
        children: [
          Expanded(
            child: keepEye.listView, // 使用KeepEye返回的ListView
          ),
          ElevatedButton(
            onPressed: () {
              // 获取统计数据并打印
              final stats = keepEye.snapshot.getStats();
              print(stats);
            },
            child: Text('获取统计数据'),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    // 在小部件销毁时获取最终统计信息
    final jsonStats = keepEye.snapshot.encodeStatstoJSON();
    print(jsonStats);
    super.dispose();
  }
}

数据分析

在此插件中跟踪的分析包括每个小部件首次创建的时间戳，以及它们再次被查看的时间戳和每次查看所花费的时间。数据格式如下：

{
  'widget_name': {
    'createdAt': timeStamp,
    'usedWhen_howLong': [
      {'started':'usedFor'},
      {'started':'usedFor'},
      {'started':'usedFor'}
    ]
  }
}