feat: 提供更简单的注入方式

src/easy-use-track.js

@@ -1,7 +1,204 @@
+import Track from './core/index'
+import {loadJS} from './module/utils'
+
 /**
- * 更简易的注入荟聚埋点统计
+ * 更简易地注入荟聚埋点统计
  * 0. 从远程获取页面基础信息
  * 1. 监听 click 事件、格式化数据并上报
  * 2. 监听 hash change 事件，上报页面访问信息
  */
 
+class EasyUse {
+  constructor(options = {}) {
+    this.config = Object.assign({
+      dataSource: '/common-module/track/json/pc.json'
+    }, options)
+    this.json = []
+    this.params = {}
+    this._running = false
+    this.init()
+  }
+
+  /**
+   * 初始化
+   */
+  init() {
+    // 单例，禁止重复初始化事件绑定
+    if (this._running) return
+    this._running = true
+    // 获取数据
+    this.getDataJSON()
+    // 事件监听初始化
+    this.addClickEventListener()
+    this.addCustomClickEvent()
+    this.addPageChangeListener()
+  }
+
+  /**
+   * 判断是否已初始化荟聚SDK clab_tracker
+   * @returns {boolean}
+   */
+  checkHasClabTracker () {
+    return typeof window.clab_tracker !== 'undefined' && typeof window.clab_tracker?.track === 'function'
+  }
+
+  /**
+   * 初始化JTrack SDK，通过荟聚SDK上报信息
+   */
+  addClickEventListener() {
+    const _this = this
+    loadJS('https://cdn-common.jianyu360.com/cdn/lib/crypto/4.1.1/crypto-js.min.js', () => {
+      const jyEventTrack = new Track()
+      jyEventTrack.$subscribe.$on('CLICK-TRACK', function (transformedData, pageInfo) {
+        if (_this.checkHasClabTracker()) {
+          try {
+            const customInfo = window.jy_tarck_info || {}
+            clab_tracker.track('c_jyclick', {
+              c_breakername: transformedData.data.content.substr(0, 15),
+              c_pagename: pageInfo.href.title,
+              c_platform: pageInfo.platform,
+              c_pageid: pageInfo.id,
+              c_url: pageInfo.href.href,
+              c_breakerid: transformedData.key,
+              c_productname: '',
+              c_desc: '',
+              c_title: pageInfo.href.title,
+              date: new Date(transformedData.data.event_time)
+            }, _this.getNowPageInfo('click'), customInfo)
+          } catch (e) {
+            console.warn('!! Check Track JS Error 001 !!')
+          }
+        }
+      })
+    })
+  }
+
+  /**
+   * 自定义埋点事件名称统计
+   */
+  addCustomClickEvent () {
+    window.addEventListener('click', (e) => {
+      try {
+        const hasCustomEvent =  e.target.getAttribute('data-cl-event')
+        if (hasCustomEvent && this.checkHasClabTracker()) {
+          clab_tracker.track(hasCustomEvent)
+        }
+      } catch (e) {
+        console.warn('!! Check Track JS Error 002 !!')
+      }
+    })
+  }
+
+  /**
+   * 页面切换时上报访问事件
+   */
+  addPageChangeListener() {
+    window.addEventListener("popstate",  (e) => {
+      try {
+        const params = this.getNowPageInfo('popstate')
+        clab_tracker.ready(function () {
+          this.push({"pageType":"web"});
+          this.track("open_page", params);
+          clab_tracker.setEnableAutoTrackExitPage(false)
+        })
+      } catch (e) {
+        console.warn('!! Check Track JS Error 003 !!')
+      }
+    }, false)
+  }
+
+  /**
+   * 获取当前页面参数
+   * @param type - 事件类型
+   * @returns {any}
+   */
+  getNowPageInfo (type) {
+    const customInfo = window.jy_tarck_info || {}
+    // 用户登录信息
+    if (this.getCookie('ud_safe')) {
+      this.params.identityType = "c_uid"
+      this.params.identityValue = this.getCookie('ud_safe')
+    }
+    return Object.assign({}, this.params, customInfo)
+  }
+
+  /**
+   * 根据URL寻找对应的页面信息
+   * @param url
+   * @returns {{}}
+   */
+  tryFindInfo (url = location.href) {
+    let result = {}
+    for (let i =0;i<this.json.length;i++) {
+      const item = this.json[i]
+      const matchLink = decodeURIComponent(item['页面URL'])
+      const hasLink = url.indexOf(matchLink) !== -1
+      if (hasLink) {
+        result = item
+        break
+      }
+      const testRegex = new RegExp(matchLink).test(url)
+      if (testRegex) {
+        result = item
+        break
+      }
+    }
+    return result
+  }
+
+  /**
+   * 获取页面数据集
+   */
+  getDataJSON() {
+    this.getJSON(this.config.dataSource, (data) => {
+      if (Array.isArray(data)) {
+        this.json = [].concat(data)
+      }
+    })
+  }
+
+  /**
+   * 获取JSON信息
+   * @param url
+   * @param callback
+   */
+  getJSON(url, callback) {
+    var xhr = new XMLHttpRequest()
+    xhr.open('GET', url, true)
+    xhr.onload = function () {
+      if (xhr.status === 200) {
+        var data = JSON.parse(xhr.responseText)
+        callback(data, true)
+      } else {
+        callback([], false)
+      }
+    }
+    xhr.send()
+  }
+
+  /**
+   * 根据 name 获取 Cookie
+   * @param name
+   * @returns {*}
+   */
+  getCookie (name) {
+    var tempFn = typeof window.getCookie === 'function' ? window.getCookie : this.getCookieSpare
+    return tempFn(name)
+  }
+
+  /**
+   * 获取Cookie
+   * @param name
+   * @returns {null|string}
+   */
+  getCookieSpare (name) {
+    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)")
+    if (arr = document.cookie.match(reg))
+      return unescape(arr[2])
+    else
+      return null
+  }
+
+}
+
+export default EasyUse

src/index.js

@@ -1,32 +1,10 @@
-import Track from './core/index'
-import { loadJS } from './module/utils'
+import EasyUse from './easy-use-track'
 
 ;(function () {
-  loadJS('https://cdn-common.jianyu360.com/cdn/lib/crypto/4.1.1/crypto-js.min.js', () => {
-   const jyEventTrack =  new Track()
-    jyEventTrack.$subscribe.$on('CLICK-TRACK', function (transformedData, pageInfo) {
-      if (typeof clab_tracker !== 'undefined' && typeof clab_tracker.track === 'function') {
-        try {
-          const customInfo = window.jy_tarck_info || {}
-          clab_tracker.track('c_jyclick', {
-            c_breakername: transformedData.data.content.substr(0, 15),
-            c_pagename: pageInfo.href.title,
-            c_platform: pageInfo.platform,
-            c_pageid: pageInfo.id,
-            c_url: pageInfo.href.href,
-            c_breakerid: transformedData.key,
-            c_productname: '',
-            c_desc: '',
-            c_title: '',
-            // c_clicktime: new Date(transformedData.data.event_time),
-            date: new Date(transformedData.data.event_time)
-          }, customInfo)
-        } catch (e) {
-          console.warn('!! Check Track JS !!')
-        }
-      }
-    })
-  })
+  const skipInit = window._skip_easy_track_init || false
+  if (!skipInit) {
+    new EasyUse()
+  }
 })();
 
-export default Track
+export default EasyUse