实现元素的曝光和点击的埋点功能

用户1001948161102
714 阅读3分钟
1. 元素的曝光和点击埋点
  1. 元素的曝光：就是在用户使用页面时，如果滑动或者滚动到目标元素时，记录元素曝光一次；
  2. 点击埋点： 就是用户点击目标元素时，记录元素点击事件+1；
  3. 应用场景：监测软件或者页面使用频率，或某个按钮等功能的使用频率；
2. 点击收集，实现点击埋点
  1. 自定义my-click指令，使用addEventListener()事件监听函数实现收集点击功能；
  2. 注意最后要用unbind钩子函数移除事件监听removeEventListener();
<script>
        // 收集点击
        Vue.directive('my-click',{
            inserted(el){
                this.clickFn = ((id)=>{
                    // 保存点击的按钮的id
                    console.log('按钮被点击了,',id);
                }).bind(null,el.id)
                el.addEventListener('click', this.clickFn)
            },
            unbind(el){
                el.removeEventListener('click', this.clickFn)
            }
        });
        
        new Vue({
            el:'.viewport'
        });
 </script>
3. 元素的曝光
  1. 每一帧的渲染之前，判断元素是否可见；
  2. 可用threshold属性来定义元素加载到什么程度算是可见；
<script>
        // 每一帧的渲染之前，判断元素是否可见
        const io = new IntersectionObserver(entries => {
        entries.forEach(item => {

            if (item.isIntersecting) {
                console.log('看到元素了！！！！')
            }

        })
    },{
        threshold:0.5,  // 显示一半算是可见
        });
        
    Vue.directive('my-view',{
        inserted(el){
        io.observe(el);
            },
    unbind(el){
        io.unobserve(el);
            }
        });

    new Vue({
        el:'.viewport'
        });
</script>
数据准备
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .viewport {
            width: 600px;
            height: 600px;
            background-color: aqua;
            overflow: scroll;
        }
        #btn111 {
            height: 80px;
            width: 100%;
        }
    </style>
</head>
<body>
    <h2>实现元素的曝光和点击的埋点功能</h2>
    <div class="viewport">
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <button v-my-view v-my-click id="btn111">目标元素</button>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <button v-my-view v-my-click id="btn111">目标元素</button>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
        <a href="#">我是障碍物</a><br/>
    </div>
</body>
avatar
文章
阅读
粉丝