1. Background
Time on Page (Time on Page), referred to as Tp, is a very common indicator in website analysis. It is used to reflect the length of time users stay on certain pages. The traditional Tp statistical method will have certain statistical blind spots, such as the inability to monitor Single-page applications do not consider user switching tabs, minimizing windows and other operating scenarios. Based on the above background, we re-investigated and implemented a solution to accurately count the time spent on a page, which needs to be compatible with single-page applications and multi-page applications, and does not couple or invade business codes.
2. Analysis
We can abstract a page life cycle into three actions: "enter", "active state switch", "leave"
As shown in the figure below, how to monitor the three actions when calculating the page stay time, and then record the timestamp in the corresponding triggered event, for example, to count the active stay time, just add the active interval, and to count the total time is tn -t0.
2.1 How to monitor page entry and exit?
For the first loading of regular pages, page closing, refreshing and other operations, the window.onload and window.onbeforeunload events can be used to monitor page entry and exit, and the forward and backward of the browser can be processed through pageshow and pagehide.
load / beforeunload
pageshow / pagehide
For the jump inside the single-page application, it can be transformed into two problems:
Listen for route changes
Determine whether the changed URL is a different page.
2.1.1 Monitor route changes
At present, most of the mainstream single-page applications are based on browserHistory (history api) or hashHistory for routing processing. We can judge whether it is possible to switch pages by monitoring routing changes. Note that it is possible to switch, because the change of the URL does not mean that the page must be switched, and the specific routing configuration is determined by the business (both URL and page matching rules).
browserHistory
The essence of routing changes will call History.pushState() or History.replaceState(), and you can know if you can listen to these two events. Half of the problem can be solved through the popstate event, because popstate will only be triggered when the browser moves forward and backward, and will not be triggered when history.pushState() or history.replaceState() is called.
The popstate event is fired when the active history entry changes. If the history entry being activated was created by a call to history.pushState() or was affected by a call to history.replaceState(), the popstate event’s state property contains a copy of the history entry’s state object.
Note that just calling history.pushState() or history.replaceState() won’t trigger apopstateevent. The popstate event will be triggered by doing a browser action such as a click on the back or forward button (or calling。history.back() or history.forward() in JavaScript).
This needs to be solved by monkey patching (Monkeypatch), rewriting the history.pushState and history.replaceState methods at runtime:
let _wr = function (type) {
let orig = window.history[type]
return function () {
let rv = orig.apply(this, arguments)
let e = new Event(type.toLowerCase())
e.arguments = arguments
window.dispatchEvent(e)
return rv
}
}
window.history.pushState = _wr('pushState')
window.history.replaceState = _wr('replaceState')
window.addEventListener('pushstate', function (event) {})
window.addEventListener('replacestate', function (event) {})hashHistory
The implementation of hashHistory is based on the change of hash, and the change of hash can be monitored through hashchange
2.1.2 Determine whether the URL is a different page
Option 1: Client Definition
The business side configures page rules during initialization, and then JS distinguishes different pages by matching different rules through URLs. This solution has already defined different pages when the client data is reported. Pseudocode:
new Tracer({
rules: [
{ path: '/index' },
{ path: '/detail/:id' },
{ path: '/user', query: {tab: 'profile'} }
]
)Solution 2: Definition of data analysis platform
Assuming that we have a data analysis platform to display after the final report, we can configure page rules on a similar data platform, so that the code logic implemented on the client does not need to distinguish pages, but reports the data every time the URL changes. Finally, the data is summed and filtered through the page URL rules configured by the data platform.
When the data display platform does not support the configuration of URL rules to distinguish pages, you can use option 1; when there is data platform support, it is more reasonable to use option 2;
2.1.3 Organize events related to page entry and exit
2.2 How to monitor page active state switching?
Can be handled through the Page Visibility API and by declaring onblur/onfocus events on the window.
2.2.1 Page Visibility API
The visibility status of a web page can be obtained through the Page Visibility API. For example, when the user switches the browser tab, minimizes the window, or sleeps the computer, the system API will dispatch a visibilitychange event of the current page visibility status change, and then in the event binding function Read the current state via document.hidden or document.visibilityState.
document.addEventListener('visibilitychange', function (event) {
console.log(document.hidden, document.visibilityState)
})2.2.2 onblur/onfocus
Can be handled through the Page Visibility API and by declaring onblur/onfocus events on the window. For the PC side, in addition to monitoring the above-mentioned related events, you can also consider monitoring the mouse behavior. For example, when the mouse is not operated within a certain period of time, the user is considered to be in an inactive state.
2.3 When to report data?
2.3.1 Report when the page leaves
Operations triggered by page refresh or window closing may cause data loss
2.3.2 Report when the page is opened next time
will lose the last page data in the history visit record
The current solution 2 is to report immediately for the internal jump of a single page. When the window.onbeforeunload event is triggered for a single-page/multi-page application, the current page data will be temporarily stored in localStorage. When the user enters the page next time, the Temporary data reporting. There is a detail problem. If the next time the user opens the page is the next day, there will be a certain error in the statistics of the active duration of the day, so the page entry time/exit time of the data will be brought along when the data is reported.
3. Design
3.1 UML class diagram
Tracer
The core class is used to instantiate a monitor, encapsulate native events and custom events, listen to the enter activechange exit event to operate the current Page instance.
PS is named after Blizzard's Overwatch game hero Tracer, literally translated as: Tracker.
The abstract class of the Page
page is used to instantiate a page, encapsulates enter exit active inactive and other operations, and maintains the current page state internally through the state attribute.
3.2 Event dispatch relationship diagram
4. Compatibility
Desktop
Mobile
5. think
The definition of page stay time may vary in different scenarios, such as internal business systems or OA systems, products may be more concerned about the user’s active time on the page; for information-type products, the page’s visible time will be more valuable. A single data is limited for business analysis, so in the specific code implementation process, we will divide the dwell time into three indicators, which can better help product/operation analysis.
active page active time
visible page visible duration//Only supports Desktop
duration The total length of stay on the page
6. Reference
https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange
https://developer.mozilla.org/en-US/docs/Web/Events/popstate
https://developer.mozilla.org/en-US/docs/Web/API/PageVisibilityAPI
https://stackoverflow.com/questions/4570093/how-to-get-notified-about-changes-of-the-history-via-history-pushstate
Author: Today's headline technology
https://techblog.toutiao.com/2018/06/05/ru-he-jing-que-tong-ji-ye-mian-ting-liu-shi-chang/