前端埋点之链式操作埋点上报

我们有时候会遇到需要收集用户某一次在页面中进行操作流向的需求。
比如说搜索页面，从用户点击搜索开始，将用户之后对搜索结果进行的点击以及后续事件进行上报，并且要将点击事件与当前搜索内容进行关联。
也就是说，每次进行搜索，都会产生一条链式行为记录。
null

时间和用户名筛选

这种情况怎么处理呢？最常见的方式就是上报一个能标示用户的唯一id，然后通过时间筛选，前用户id从一次搜索开始到下一次搜索发生的行为都可以当成同一条行为链处理。

行为ID

如果时间方式不想用呢（不给你计算时间，数据在其它地方等等...）？那我们可以为每条行为添加一个唯一ID，之后的每次操作都上报这个ID来达到关联上报数据的目的。

function onSearch() {
    global.id = getId()
    sendReport({
        t: 'search',
        i: global.id,
        k: searchKey
    })
}

function onClick() {
    sendReport({
        t: 'click',
        i: global.id,
    })
}
...

这样每次搜索时候就会更新全局的id值，搜索后的上报数据都会带上当前搜索。

SESSION STORAGE共享行为标识

如果再变态一点，用户搜索之后点击搜索结果会打开新的页面，然后需要将新页面的操作与搜索行为关联，这怎么办呢？
null

哦豁，我们在点击打开新页面的时候，加上当前搜索ID行不行?

openWin(url) {
    window.open(`${url}?rid=${global.id})
}

当然可以，但这个url就很丑了，而且如果这条链接被分享出去疯狂点击，数据精度影响会很大。不加行不行？当然可以。
我们其实可以通过sessionStorage来实现父页面对新开页面数据的传递。

为什么不用localStorage?

storage是可以不同窗口同域名下数据共享的。两者区别不仅仅是保存时长的区别，还有储存位置的区别。
这句话怎么理解呢？sessionStorage在页面关闭时会消失。 也就是说关闭窗口之后再打开新的窗口之前的数据就会被清空。那么如果我们在当前页面A打开一个新的同域名页面B，他们之间的sessionStorage是相同的，但此时如果你修改A页面的storage，其实是不会影响B页面的。

这么做有什么好处呢？
试想一下如果用localStrage，当你在搜索行为打开一个窗口后，储存了当前搜索id A1，并且你打开了新的页面P。这个时候你重新搜索一次，localSorage中的搜索id变成了A2，此时你在P中的共享搜索id也成了A2， 那么你这条上报也就不准确了。