Flutter页面曝光事件埋点框架

FlutterDeveloper

B站：Android架构解析；简书：Alvin老师

简介

FlutterPageTracker是一个用于监听页面 露出 、 离开 的plugin。它具有以下特性：

1.监听普通页面的 露出 和 离开 事件（PageRoute），

当前页面入栈会触发当前页面的 曝光事件 和前一个页面的 离开事件 。
当前页面出栈会触发当前页面的 离开事件 和前一个页面的 曝光事件 。

2.监听对话框的 露出 和 离开 （PopupRoute），

它和PageRoute的区别是，当前对话框的露出和关闭不会触发前一个页面的 露出 、 离开 事件

3.监听PageView、TabView组件的 切换 事件

当一个PageView或者TabView 入栈 时，前一个页面会触发页面 离开事件
当一个PageView或者TabView 出栈 时，前一个页面会触发页面 曝光事件
当焦点页面发生变化时，旧的页面触发页面露出，新的页面触发PageView
PageView组件

TabView组件

4.PageView和TabView嵌套使用

我们可以将这两种组件嵌套在一起使用，不限制嵌套的层次
发生焦点变化的PageView（或者TabView）以及它的子级都会受到 曝光事件 和 离开事件

5.滑动曝光事件

如果你对列表的滑动露出事件感兴趣，你可以参考flutter_sliver_tracker插件
https://github.com/SBDavid/flutter_sliver_tracker

运行Demo程序

克隆代码到本地: git clone git@github.com:SBDavid/flutter_page_tracker.git
切换工作路径: cd flutter_page_tracker/example/
启动模拟器
运行: flutter run

使用
1. 安装

  dependencies:
  flutter_page_tracker: ^1.2.2

2. 引入flutter_page_tracker

import 'package:flutter_page_tracker/flutter_page_tracker.dart';

3. 发送普通页面埋点事件

3.1 添加路由监听

void main() => runApp(
  TrackerRouteObserverProvider(
    child: MyApp(),
);

3.2 在组件中发送埋点事件

必须使用 PageTrackerAware 和 TrackerPageMixin 这两个mixin

class HomePageState extends State<MyHomePage> with PageTrackerAware, TrackerPageMixin {
    @override
    Widget build(BuildContext context) {
        return Container();
    @override
    void didPageView() {
        super.didPageView();
        // 发送页面露出事件
    @override
    void didPageExit() {
        super.didPageExit();
        // 发送页面离开事件
}

3.3 Dialog的埋点

class PopupPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SimpleDialog(
      children: <Widget>[
        TrackerDialogWrapper(
          didPageView: () {
            // 发送页面曝光事件
          didPageExit: () {
            // 发送页面离开事件
          child: Container(),
}

3.3 TabView发送埋点事件（PageView参考example）

class TabViewPage extends StatefulWidget {
  TabViewPage({Key key,}) : super(key: key);
  @override
  _State createState() => _State();
class _State extends State<TabViewPage> with TickerProviderStateMixin {
  TabController tabController = TabController(initialIndex: 0, length: 3, vsync: this);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        // 添加TabView的包裹层
        body: PageViewWrapper(
          // Tab页数量
          pageAmount: 3,
          // 初始Tab下标
          initialPage: 0, 
          // 监听Tab onChange事件
          changeDelegate: TabViewChangeDelegate(tabController),
          child: TabBarView(
            controller: tabController,
            children: <Widget>[
              Builder(
                builder: (_) {
                  // 监听由PageViewWrapper转发的PageView，PageExit事件
                  return PageViewListenerWrapper(
                    onPageView: () {
                      // 发送页面曝光事件
                    onPageExit: () {
                      // 发送页面离开事件
                    child: Container(),
              // 第二个Tab
              // 第三个Tab
}

3.4 TabView中嵌套PageView（PageView也可以嵌套TabView，TabView也可以嵌套TabView）

class PageViewInTabViewPage extends StatefulWidget {
  @override
  _State createState() => _State();
class _State extends State<PageViewInTabViewPage> with TickerProviderStateMixin {
  TabController tabController;
  PageController pageController;
  @override
  void initState() {
    super.initState();
    tabController = TabController(initialIndex: 0, length: 3, vsync: this);
    pageController = PageController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        // 外层TabView
        body: PageViewWrapper(
          pageAmount: 3, // 子Tab数量
          initialPage: 0, // 首个展现的Tab序号
          changeDelegate: TabViewChangeDelegate(tabController),
          child: TabBarView(
            controller: tabController,
            children: <Widget>[
              Builder(
                builder: (BuildContext context) {
                  // 转发上层的事件
                  return PageViewListenerWrapper(
                      // 内层PageView
                      child: PageViewWrapper(
                        changeDelegate: PageViewChangeDelegate(pageController),
                        pageAmount: 3,
                        initialPage: pageController.initialPage,
                        child: PageView(
                          controller: pageController,
                          children: <Widget>[
                            PageViewListenerWrapper(
                              onPageView: () {
                                // 页面露出事件
                              onPageExit: () {
                                // 页面离开事件
                              child: Container()
                            // PageView中的第二个页面
                            // PageView中的第三个页面
              // tab2
              // tab3

简介

使用 1. 安装

3. 发送普通页面埋点事件

3.1 添加路由监听

3.2 在组件中发送埋点事件

使用
1. 安装