开始应用growingio进行用户行为分析。它声称是“无埋点”的（即不用写代码），所以用户行为均可通过一系列的点选、配置即可实现，没有任何代码经验的运营同学就可以完成。但刚一上手，还是遇到了一点麻烦，经过一番折腾，找出一点门道，记录一下，以便其他同学参考
规则：仅能圈选element tree倒数两层的元素
隐约记得有此规则，不确定是在官方文档中有，还是那天的网络培训中提到的。（我仔细找了一遍文档，没有发现。作罢）
所谓“倒数”是指：从最深层的子element往外数。如下例中，gray是倒数第1层，blue是倒数第2层，以此类推。
什么意思呢？给个栗子说明：
<div class='red'>
<div class='green'>
<div class='blue'>
<div class='gray'></div>
</div>
</div>
</div>
如果有这样一个element tree，那么在growingio圈选的界面，只有gray blue这两层是可以被圈选的（呈现出被红框圈起来的状态），red green则不能。
我们的不当做法
index.css 片段
.user {
background: url('path/to/avatar.png')...
}
index.html 片段
<div class='user'>
<div class='pop-menu'>
<div class='pop-menu-guest'>
... 还有一层
</div>
<div class='pop-menu-client'>
... 还有一层
</div>
</div>
</div>
这样做的思路是：小人儿图片在user元素上（user同时也是pop-menu的外层）。点击小人儿，弹出pop-menu时，其上部空出user背景图片的位置。如果不用growingio，这是木有问题的。
现在来看有了growingio的情况。基于上面所说的规则（只有倒数两层的元素能被圈选），user元素至少是在倒数第三层了（即便现在pop-menu是隐藏的）（题外话：如果growingio能忽略掉隐藏的元素，那就nb了）。所以，即时人眼可以看得到，但程序是计算不到的。故，无法圈选是必然的结果了。
解决办法
将最外边加一层div作为frame（意为：框），user和pop-menu呈并列关系
如下：
<div class='user-frame'>
<div class='user'></div>
<div class='pop-menu'>
<div class='pop-menu-guest'>
... 还有一层
</div>
<div class='pop-menu-client'>
... 还有一层
</div>
</div>
</div>
