神策系统vue埋点

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

1. 埋点要求
   • 监控页面pv/uv
   • 点击事件
2. 埋点id
   • 埋点id {团队|业务|角色}{组件|页面}{具体元素}_{动作}
   • h5detailschedule_click ：h5 平台，detail代表页面，schedule代表操作的按钮，click是点击事件
3. 业务实现
   1. 页面pv/uv是main.js里面用vue路由和神策提供的方法实现

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

   2. 点击事件是用的事件代理，这样的好处是可以和业务逻辑解耦
      • 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()
}