神策系統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. 點擊事件是用的事件代理，這樣的好處是能夠和業務邏輯解耦

      <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()
}