Author: Busy fish technology - Landhold
background
Buried user behavior is used to record user behavior during a series of operations, but also to do business based on core data to determine if the missing or inaccurate unrecoverable loss will bring to the business. Busy fish migrate from the business code to process the Native Flutter found buried in the original program on the Native point system can not be applied on top of Flutter system. And if we only business functions migrated to the line of business it is extremely irresponsible. Therefore, through continuous exploration, we precipitate the high accuracy of user behavior on the set of Flutter Buried program.
User-defined behavior Buried
We'll attempt here is how to define user behavior bury points. On the following user timeline, after the user enters the A page and see the button X, and then click on this button opens a new page B.
On this timeline has buried the following five points events:
- A page to enter. A first page frame rendering is complete, and has focus.
- Exposure pit position X. X button in the phone screen, and stay for some time, so that the user can touch visible.
- Click pit position X. Users are interested in the content of the X button, then click on it. Click the X button in response, and then need to open a new page.
- A left page. A page loses focus.
- B into the page. The first page B-frame rendering is complete, and the focus.
Here, playing Buried most important thing is the timing, that is, at what point trigger event buried under what timing, the following fish to look busy on Flutter of implementation.
Implementation
Entry / exit pages
In Native native development, Android is the end of onResume Activity monitor events and onPause to do a page of incoming and outgoing events, empathy is listening UIViewController iOS end of viewWillAppear and viewDidDisappear event to do for the pages of incoming and outgoing events. At the same time the entire page stack is maintained by the Android and iOS operating systems.
In the Flutter, Android and iOS FlutterActivity ends are used to do the container carrier and FlutterViewController Flutter page, can be switched Flutter Native Native page in a page (FlutterActivity / FlutterViewController) through this container. That stack maintains a Flutter Flutter own page page. In this way, we are most familiar set of original programs on Native native on Flutter not work directly together.
To address this issue, many people may think of listening to register NavigatorObserver Flutter, so that you know push Flutter page (push) and pop (pop) event. But it will have two questions:
- Suppose A, B has two pages into the stack (A enter -> A leave -> B enter). B page then returns an exit (B leave), this time A page visible again, but this time the event is received less than A page push (A enter) a.
- Assuming that pops up a Dialog or BottomSheet in A page, and will go push these two types of operations, but in fact did not leave the A page.
Fortunately, Flutter page stack of pages, unlike Android Native stack so complicated, so for the first question, we can maintain a list of indexed pages and stack match. Upon receipt of event A push pages, stuffed to the queue of an A index. When you receive push event B page, is there a list of detected within the page, and if so, the last page of the list to perform event logging to leave the page, and then enter the page B page performs event log, and then stuffed into a queue B index of. Upon receipt of the page B pop event, the first event record out of the page B is performed on the page, and then a final index corresponding to the presence of a page queue (assumed to be A) the determination whether the top of the stack (ModalRoute.of (context) .isCurrent
), and if so, to enter the page A page perform event logging.
For the second problem, there is the Route class member variables overlayEntries, can obtain all the layers corresponding to the Route OverlayEntry current, there is a member variable opaque layer may determine whether the current full-screen cover OverlayEntry object, and thus can be excluded Dialog BottomSheet this type. 1 combined with the problem, but also add a new incoming push whether the page is determined to do a valid page in the above-described embodiment. If a page is valid before giving the index a page do list before leaving the page events, and will effectively added to the index page of the list. If the page is not valid, the index list is not operating.
The above is not busy fish program, just a suggestion given by the author. Because the fish free APP at the beginning of floor Flutter framework, there is no use page stack management scheme Flutter native, instead of using a mixed-use development of Native program Flutter +. Specifically refer to the previous article "has been open source | use it on code start Flutter mixed-use development --FlutterBoost" . Therefore, the following is based on this scenario to illustrate the busy fish.
Free fish program as follows (for example with Android, iOS empathy):
Note: The first time you open refers to is based on a mixed stack open a new page, not the first time by means of open refers to the fallback page, the page in the background to the foreground again visible.
We seem to trigger when entering / leaving the event page judgment handed Flutter side, the fact remains consistent with the Native side of the page stack management, the opportunity to do original play Buried in Native inform Flutter side side, then Flutter side once again to call the Native side to play buried method by channel. It may be asked, why so many around, do not all go to the Native side directly manage it? Native to the side to direct management to do so for the first time a non-open this scene is right, but for the first time to open this scene is not appropriate. Because the first time you open this scenario under, onResume when Flutter page has not been initialized, page information at this time do not know, and therefore do not know what to enter the page, you need to come back up tone when Flutter Native side of the page initialization (init) buried interfaces into the page. In order to avoid developers to focus on whether the page is first opened Flutter, Flutter we unified the side directly trigger enter / leave events page.
Exposure pit position
Exposure to talk about the pit under defined position with us, we believe that pictures and text are meaningful exposure, other users can not see that there is no significant exposure, on top of this, when a pit bit if both of the following two points It would be considered a valid exposure:
- Pit located in the visible region of the screen is larger than the pit-bit is half the entire area.
- Pit located in the area stay more than 500ms screen is visible.
Based on this definition, we can quickly draw scenes shown below, there are A, B, C, D of 4 bits pits on a scrollable page. among them:
- A pit position has been slipping out of the visible area of the screen, that is invisible;
- Hang up position B is about to be seen from slipping out of the screen area, i.e. visible-> invisible;
- C pit position the screen is still visible in the central region, i.e. visible;
- Pit-bit D is about to slide into the visible screen area, invisible-> visible;
So our problem is how to calculate the ratio of the pit position within the screen area of exposure. To calculate this value, we need to know the following values:
- Offset relative to the screen container
- Pit bit offset relative to the container
- Bit position and the pit width and height
- And the width and height position of the container
Wherein the width and height of the pit-position and the container is readily available and calculations, described here is not tired.
Acquiring an offset relative to the screen container
//监听容器滚动，得到容器的偏移量
double _scrollContainerOffset = scrollNotification.metrics.pixels;Acquiring an offset position relative to the container pit
//曝光坑位Widget的context
final RenderObject childRenderObject = context.findRenderObject();
final RenderAbstractViewport viewport = RenderAbstractViewport.of(childRenderObject);
if (viewport == null) {
return;
}
if (!childRenderObject.attached) {
return;
}
//曝光坑位在容器内的偏移量
final RevealedOffset offsetToRevealTop = viewport.getOffsetToReveal(childRenderObject, 0.0);Analyzing logic
if (当前坑位是invisible && 曝光比例 >= 0.5) {
记录当前坑位是visible状态
记录出现时间
} else if (当前坑位是visible && 曝光比例 < 0.5) {
记录当前坑位是invisible状态
if (当前时间-出现时间 > 500ms) {
调用曝光埋点接口
}
}Click pit position
Click Buried no difficulty pit site, it is easy to imagine the following scenario:
effect
After several rounds of iteration and optimization, the current point accuracy buried line Flutter page has reached 100 percent, effectively supporting the business of analysis and judgment. At the same time this program allows students in doing business development for the page to enter / exit, the pit position can be done without exposing the perception that do not care about when to trigger, so that the ease of use and non-invasive.
Outlook
In addition, for the page to enter / leave the scene, due to the busy fish Flutter Boost is based on a mixed stack of programs, so our solution is not enough common. But in the future as more and more Flutter page on the busy fish, we will follow to achieve based on Flutter native program.
Make data-driven business in the busy fish is a very important and meaningful things, and buried a direct impact on data collection point, buried point loss and error will make us lose the guidance of the lighthouse when sailing on the sea. Here we are accustomed to the use of data to guide the direction of the work test -> fetch data analysis -> Adjust experiment -> then take the data analysis -> readjustment experiment. So the cycle, only to find the one most suitable for users of design. If you accept our work methodology, welcome to join the busy fish!