flutter_page_tracker 1.1.0

页面曝光、离开事件埋点框架，支持TabView PageView

flutter_page_tracker

滑动页面吧埋点框架，支持TabView组件和PageView组件

使用

1. 安装

dependencies:
  flutter_page_tracker: ^1.0.0

2. 引用

import 'package:flutter_page_tracker/flutter_page_tracker.dart';

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

3.1 添加路由监听

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

3.2 在组件中发送埋点事件

class HomePageState extends State<MyHomePage> with PageTrackerAware, TrackerPageMixin {
    @override
    Widget build(BuildContext context) {
        return Container();
    }

    @override
    void didPageView() {
        super.didPageView();
        print("send pageview event");
    }

    @override
    void didPageExit() {
        super.didPageExit();
        print("send pageExit event");
    }
}

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;
  @override
  void initState() {
    super.initState();
    tabController = TabController(initialIndex: 0, length: 3, vsync: this);
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
        body: SafeArea(
          child: Stack(
            alignment: Alignment.bottomCenter,
            children: <Widget>[
              // 添加TabView的包裹层  
              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(
                          0,
                          onPageView: () {
                            print("send pageview of tab1");
                          },
                          onPageExit: () {
                            print("send pageexit of tab1");
                          },
                          child: Container(
                            color: Colors.amber,
                            child: Center(
                              child: Text("tab1"),
                            ),
                          ),
                        );
                      },
                    ),
                    // 第二个Tab
                    // 第三个Tab
                  ],
                ),
              ),
              Positioned(
                bottom: 0,
                left: 0,
                right: 0,
                child: TabBar(
                  controller: tabController,
                  tabs: <Widget>[
                    Tab(text: "tab1",),
                    Tab(text: "tab2",),
                    Tab(text: "tab3",),
                  ],
                ),
              ),
            ],
          ),
        )
    );
  }
}

原理篇

1.概述

页面的埋点追踪通常处于业务开发的最后一环，留给埋点的开发时间通常并不充裕，但是埋点数据对于后期的产品调整有重要的意义，所以一个稳定高效的埋点框架是非常重要的。

2. 我们期望埋点框架所具备的功能

2.1 PageView，PageExit事件

我们期望当调用Navigator.of(context).pushNamed("XXX Page");时，首先对之前的页面发送PageExit，然后对当前页面发送PageView事件。当调用Navigator.of(context).pop();时则，首先发送当前页面的PageExit事件，再发送之前页面的PageView事件。

我们首先想到的是使用RouteObserver，但是PageView和PageExit发送的顺序相反。并且PopupRoute类型的路由会影响前一个页面的埋点事件发送，例如我们入栈的顺序是 A页面 -> A页面上的弹窗 -> B页面，但是在这个过程中A页面的PageExit事件没有发送。

所以我们必须自己管理路由栈，这样判断不同路由的类型，并控制事件的顺序。详细实现方案在后面展开。

2.2 TagView组件于PageView组件

这两个组件虽然与Flutter的路由无关，但是在产品经理眼中它们任属于页面。并且当Tab发生首次曝光和切换的时候我们都需要发送埋点事件。

例如当Tab页A首次曝光时，我们首先发送上一个页面的PageExit事件，然后发送TabA的PageView事件。当我们从TabA切换到TabB的时候，先发送TabA的PageExit事件，然后发送TabB的PageView事件。当我们push一个新的路由时，需要发送TabB的PageExit事件。

这套流程需要Tab页和普通页面之间通过事件机制来交互，如果直接把这套机制搬到业务代码中，那么业务代码中就会包含大量与业务无关并且重复的代码。详细的抽象方案见后文。

3. 解决这些问题

3.1 解决PageView，PageExit的顺序问题

RouteObserver给了我们一个不错的起点，我们重写其中的didPop和didPush方法就并调整事件发送的顺序就可以解决这个问题。详见TrackerStackObserver，在didpop方法中我们先触发上一个路由的PageExit事件，然后再触发当前路由的PageView事件。

3.2 避免弹窗的干扰（例如Dialog）

在RouteObserver.didPop(Route中，我们可以通过previousRoute找到上一个路由，并更具它来发送上一个路由的PageView事件。但是如果上一个路由是Dialog，就会造成错误，因为我们实际想要的是包含这个Dialog的路由。

要解决这个问题我们必须自己维护一个路由栈，这样当didPop触发时我们就可以找到真正的上一个路由。请参考这一段代码，这里的routes是当前的路由栈。

3.3 如何上报TabView中的埋点事件，并和其它页面串联起来

这个问题可以分解为两个小问题：

• 1. 如何把TabView页面和普通的路由进行串联？
• 2. 当Tab发生切换时如何发送埋点事件？

为了解决这两个问题，我们需要一个容器来管理tab页面的状态并且承载事件转发的任务。详见下图: 。

其中TabsWrapper会监听来自Flutter的路由事件，并转发给当前曝光的Tab，这就可以解决了问题一。

同时TabsWrappe也会包含一个TabController和上一个被打开的Tab索引，TabsWrappe会监听来自TabController的onChange(index)事件，并把事件转发给对应的tab，这就解决了问题二。