神策系统vue埋点

最新推荐文章于 2024-08-21 08:44:14 发布

litCabbage

最新推荐文章于 2024-08-21 08:44:14 发布

阅读量850

点赞数 1

本文链接：https://blog.csdn.net/litCabbage/article/details/103133034

版权

博客太冷清了，如果帮助到了你，可以评论、点赞让我看到哦！！！

埋点要求
- 监控页面pv/uv
- 点击事件
埋点id
- 埋点id {团队|业务|角色}{组件|页面}{具体元素}_{动作}
- h5detailschedule_click ：h5 平台，detail代表页面，schedule代表操作的按钮，click是点击事件

业务实现

页面pv/uv是main.js里面用vue路由和神策提供的方法实现

router.afterEach((to,from) => {
              Vue.nextTick(() => {
                sa.quick("autoTrackSinglePage");
              });
           })

点击事件是用的事件代理，这样的好处是可以和业务逻辑解耦

<template>
  <div class="detail" vkshop-event-scope="detail">
    <topBanner title="商品详情" :gobackShow="true"></topBanner>
    <div class="navmenu">
      <div :class="{'navmenu-btn':true, orange: showPage == 'course'}" @click="showPage = 'course'" vkshop-event-name="showPage_course" vkshop-event-type="click">课程介绍</div>
      <div :class="{'navmenu-btn':true, orange: showPage == 'teacher'}" @click="showPage = 'teacher'" vkshop-event-name="showPage_teacher" vkshop-event-type="click">师资教学</div>
    </div>
    <course v-show="showPage == 'course'" :coursePack="coursePack"></course>
    <teacher v-show="showPage == 'teacher'"></teacher>
    <div class="bottom-banner">
      <div class="btn" @click="callIM" vkshop-event-name="callIM" vkshop-event-type="click">咨询</div>
      <div class="btn-yellow" @click="schedule" v-if="scheduleUrl" vkshop-event-name="schedule" vkshop-event-type="click">预约</div>
      <div :class="{ 'btn-primary': true, big: !scheduleUrl }" @click="createPackorder" vkshop-event-name="createPackorder" vkshop-event-type="click">立刻下单</div>
    </div>
    <personalCenter></personalCenter>
  </div>
</template>

vkshop-event-scope:代表当前页面
vkshop-event-name:操作的按钮
vkshop-event-type:操作方式
然后在util文件夹下面写了个公共方法，用来做事件代理，直接copy就可以用

import sa from 'sa-sdk-javascript'
let Log = {}

/**
 * 发送 1 条统计事件，把这条统计事件分发到神策
 *
 */
Log.push = function (args) {
    // debug('log.push', args);
    // if (isBrowser === false) { return; }

    if (args[1] == '') {
        sa.track(args[0])
    } else {
        try {
            let paramObj = compileParam(args[1])
            sa.track(args[0], paramObj)
        } catch (e) {

        }
    }


    // sa.track(args[0], args[3])
};

let compileParam = function (param) {
    if (param == '' || param == null || param == undefined) return param;
    let arr = param.split("&");
    let obj = {}
    arr.forEach(function (v, i) {
        let arr1 = v.split("=");
        obj[arr1[0]] = arr1[1];
    })
    return obj;
}

/**
 * 生成1个统计事件监听函数，要么是focus、要么是click，更多的事件需要的时候再支持
 *
 * @param {String} _eventType 需要处理哪种类型的事件
 * @param {Boolean} isGaEnabled 透传的参数
 * @return Function
 */
var getEventHandler = function (_eventType) {
    return function (eventTarget) {
        // // 拿到事件发生的节点
        // var eventTarget = e.target,
        var eventType = eventTarget.getAttribute('vkshop-event-type') || 'click',
            eventParam = eventTarget.getAttribute('vkshop-event-param') || '',
            eventName = eventTarget.getAttribute('vkshop-event-name').replace(/(^\s*)|(\s*$)/g, '');

        if (eventName && eventType === _eventType) { // 判断vkshop-event-name 是否为空，并且类型匹配
            // 获取页面层级属性
            var scopes = [eventName];
            var event = getParents(eventTarget, 'vkshop-event-scope')
            if (event !== undefined) {
                var scope = event.getAttribute('vkshop-event-scope').replace(/(^\s*)|(\s*$)/g, '')
                if (scope) { // 判断vkshop-event-scope 是否为空
                    scopes.push(scope);
                }
                scopes.reverse();
                // 最前面说明来源是h5
                Log.push(['_h5_' + scopes.join('_'), eventParam]);
            }

        }
    };
};
/**
 * 原生获取父元素
 * @param {*} el 
 * @param {*} attr 属性，符合条件的属性
 */
function getParents(el, attr) {
    var parent = el.parentNode
    if (parent && parent.nodeName == 'BODY') {
        if (parent.hasAttribute(attr)) {
            return parent
        } else {
            return
        }
    } else {
        if (parent) {
            // list.push(parent)
            // 避免有多个vkshop-event-scope
            if (parent.hasAttribute(attr)) {
                return parent
            } else {
                return getParents(parent, attr)
            }
        } else {
            return
        }
    }
}

/**
 * 利用事件委托对所有需要自动发送统计事件的节点进行监听，只能初始化一次
 */
var isInitialized = false;
Log.init = function () {
    var ndBody = document.querySelector('body');
    var ndNoBubble = document.querySelectorAll('[vkshop-event-no-bubble]');
    // 处理可以冒泡的节点
    ndBody.addEventListener('click', function (e) {
        // 处理选择符(这样不好，如果一个a标签里面有图片和文字，点击到其他应该触发到a标签的)
        if (e.target.hasAttribute('vkshop-event-name')) {
            getEventHandler('click')(e.target)
        } else {
            var event = getParents(e.target, 'vkshop-event-name')
            if (event !== undefined) {
                getEventHandler('click')(event)
            }
        }
    });

    // 处理无法冒泡到顶层的结点点击
    if (ndNoBubble && ndNoBubble.length > 0) {
        ndNoBubble.addEventListener('click', getEventHandler('click'));
    }

    // }

};

export default Log

只需要按照这个逻辑，在main.js引入log.js然后init即可


// 神策埋点
const user_id = VueCookies.get('id') // 这个是必须要有唯一的id，可以取用户id
sa.init({
  server_url: 'your url', // 替换成自己的神策地址
  heatmap: {
     //是否开启点击图，默认 default 表示开启，自动采集 $WebClick 事件，可以设置 'not_collect' 表示关闭
     clickmap:'not_collect',
     show_log: true, // 打印console，自己配置，可以看到自己是否踩点成功，以及
     //是否开启触达注意力图，默认 default 表示开启，自动采集 $WebStay 事件，可以设置 'not_collect' 表示关闭
     scroll_notice_map:'not_collect'
  }
});
sa.login(user_id);
if (window.$config.env == 'prod') { // 这个地方是看自己的需求加判断添加
  // 神策路由监控页面跳转
  router.afterEach((to,from) => {
    Vue.nextTick(() => {
        sa.quick("autoTrackSinglePage");
    });
  })
  // 点击事件统计
  Log.init()
}