growingio 经验(1)--element嵌套不当导致的不

开始应用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>