|
@@ -1,5 +1,5 @@
|
|
|
import Track from './core/index'
|
|
|
-import {getPlatform, loadJS} from './module/utils'
|
|
|
+import { getPlatform } from './module/utils'
|
|
|
|
|
|
/**
|
|
|
* 更简易地注入荟聚埋点统计
|
|
@@ -11,7 +11,9 @@ import {getPlatform, loadJS} from './module/utils'
|
|
|
class EasyUse {
|
|
|
constructor(options = {}) {
|
|
|
const {
|
|
|
- dataSourceBase = '//cdn-common.jianyu360.com/track/json/'
|
|
|
+ dataSourceBase = '//cdn-common.jianyu360.com/track/json/',
|
|
|
+ iframeSupportEnabled = true,
|
|
|
+ iframeSupportLink = '/test/huiju'
|
|
|
} = options
|
|
|
|
|
|
// 默认配置文件、版本号读取
|
|
@@ -24,12 +26,14 @@ class EasyUse {
|
|
|
this.config = Object.assign({
|
|
|
dataSource,
|
|
|
version,
|
|
|
+ iframeSupportEnabled,
|
|
|
+ iframeSupportLink,
|
|
|
upWaitStep: 200
|
|
|
}, options)
|
|
|
this.json = []
|
|
|
this.params = {}
|
|
|
this._running = false
|
|
|
- this.init()
|
|
|
+ return this.init()
|
|
|
}
|
|
|
|
|
|
/**
|
|
@@ -37,7 +41,7 @@ class EasyUse {
|
|
|
*/
|
|
|
init() {
|
|
|
// 单例,禁止重复初始化事件绑定
|
|
|
- if (this._running) return
|
|
|
+ if (this._running) return this
|
|
|
this._running = true
|
|
|
// 获取数据
|
|
|
this.getDataJSON()
|
|
@@ -45,6 +49,7 @@ class EasyUse {
|
|
|
this.addClickEventListener()
|
|
|
this.addCustomClickEvent()
|
|
|
this.addPageChangeListener()
|
|
|
+ return this
|
|
|
}
|
|
|
|
|
|
/**
|
|
@@ -52,20 +57,93 @@ class EasyUse {
|
|
|
* @returns {boolean}
|
|
|
*/
|
|
|
checkHasClabTracker () {
|
|
|
+ const pageTracker = this.checkHasPageClabTracker()
|
|
|
+ const iframeTracker = this.config.iframeSupportEnabled && typeof window._iframe_clab_tracker === 'function'
|
|
|
+ return pageTracker || iframeTracker
|
|
|
+ }
|
|
|
+
|
|
|
+ checkHasPageClabTracker () {
|
|
|
return typeof window.clab_tracker !== 'undefined' && typeof window.clab_tracker?.track === 'function'
|
|
|
}
|
|
|
|
|
|
+ /**
|
|
|
+ * 兼容 iframeSupport
|
|
|
+ * @returns {{}|*}
|
|
|
+ */
|
|
|
+ useClabTracker () {
|
|
|
+ if (this.checkHasClabTracker()) {
|
|
|
+ if (this.checkHasPageClabTracker()) {
|
|
|
+ return window.clab_tracker
|
|
|
+ } else {
|
|
|
+ return window._iframe_clab_tracker()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ console.warn('[Helper Tracker]: not has clab_tracker')
|
|
|
+ return {}
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 通过 iframeSupport 埋点
|
|
|
+ * @param callback
|
|
|
+ * @returns {*}
|
|
|
+ */
|
|
|
+ helperTracker (callback) {
|
|
|
+ // 检查 window.clab_xx 是否存在
|
|
|
+ if (typeof window._cl_tracker === 'object') {
|
|
|
+ // 如果存在,直接调用
|
|
|
+ return callback(window._cl_tracker)
|
|
|
+ }
|
|
|
+
|
|
|
+ var hId = 'helper-tracker-iframe'
|
|
|
+
|
|
|
+ function tryCallback (iframeNode) {
|
|
|
+ // 获取 iframe 的 window 对象
|
|
|
+ var iframeWindow = iframeNode.contentWindow;
|
|
|
+ // 检查 iframeWindow.clab_xx 是否存在
|
|
|
+ if (typeof iframeWindow._cl_tracker === 'object') {
|
|
|
+ // 调用 iframeWindow.clab_xx(data)
|
|
|
+ return callback(iframeWindow._cl_tracker)
|
|
|
+ } else {
|
|
|
+ console.warn('[Helper Tracker]: not find iframe clab')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 检查是否已经存在 iframe
|
|
|
+ var existingIframe = document.getElementById(hId);
|
|
|
+
|
|
|
+ if (existingIframe) {
|
|
|
+ // 加载成功后的回调函数已经处理了调用逻辑
|
|
|
+ return tryCallback(existingIframe);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 创建 iframe 元素
|
|
|
+ var iframe = document.createElement('iframe');
|
|
|
+ iframe.id = hId;
|
|
|
+ iframe.src = this.config.iframeSupportLink;
|
|
|
+ iframe.style.display = 'none';
|
|
|
+
|
|
|
+ // 加载成功后的回调函数
|
|
|
+ iframe.onload = function() {
|
|
|
+ tryCallback(iframe)
|
|
|
+ };
|
|
|
+
|
|
|
+ // 将 iframe 添加到文档中
|
|
|
+ document.body.appendChild(iframe);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
/**
|
|
|
* 初始化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()) {
|
|
|
+ const tracker = _this.useClabTracker()
|
|
|
+ if (tracker && tracker.track) {
|
|
|
try {
|
|
|
- clab_tracker.track('c_jyclick', Object.assign({
|
|
|
+ tracker.track('c_jyclick', Object.assign({
|
|
|
c_breakername: transformedData.data.content.substr(0, 15),
|
|
|
c_pagename: pageInfo.href.title,
|
|
|
c_platform: pageInfo.platform,
|
|
@@ -82,18 +160,40 @@ class EasyUse {
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
- })
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 自定义上报埋点
|
|
|
+ * @param eventName
|
|
|
+ * @param data
|
|
|
+ */
|
|
|
+ addTrack (eventName, data = {}) {
|
|
|
+ const _this = this
|
|
|
+ const tracker = _this.useClabTracker()
|
|
|
+ if (tracker && tracker.track) {
|
|
|
+ try {
|
|
|
+ tracker.track(eventName, Object.assign({
|
|
|
+ date: new Date()
|
|
|
+ }, _this.getNowPageInfo('click'), data))
|
|
|
+ } catch (e) {
|
|
|
+ console.warn('!! Check Track JS Error 005 !!')
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 自定义埋点事件名称统计
|
|
|
*/
|
|
|
addCustomClickEvent () {
|
|
|
+ const _this = this
|
|
|
window.addEventListener('click', (e) => {
|
|
|
try {
|
|
|
const hasCustomEvent = e.target.getAttribute('data-cl-event')
|
|
|
- if (hasCustomEvent && this.checkHasClabTracker()) {
|
|
|
- clab_tracker.track(hasCustomEvent)
|
|
|
+ if (hasCustomEvent) {
|
|
|
+ const tracker = _this.useClabTracker()
|
|
|
+ if (tracker && tracker.track) {
|
|
|
+ tracker.track(hasCustomEvent)
|
|
|
+ }
|
|
|
}
|
|
|
} catch (e) {
|
|
|
console.warn('!! Check Track JS Error 002 !!')
|
|
@@ -105,7 +205,7 @@ class EasyUse {
|
|
|
* 页面切换时上报访问事件
|
|
|
*/
|
|
|
addPageChangeListener() {
|
|
|
- window.addEventListener("popstate", (e) => {
|
|
|
+ window.addEventListener("popstate", () => {
|
|
|
setTimeout(() => {
|
|
|
this.upPageInfo()
|
|
|
}, this.config.upWaitStep)
|
|
@@ -126,20 +226,26 @@ class EasyUse {
|
|
|
}
|
|
|
|
|
|
const params = this.getNowPageInfo('popstate')
|
|
|
- try {
|
|
|
- clab_tracker.ready(function () {
|
|
|
- this.push({"pageType":"web"});
|
|
|
- params.url = params.c_url
|
|
|
- this.track("open_page", params);
|
|
|
- clab_tracker.setEnableAutoTrackExitPage(false)
|
|
|
- })
|
|
|
- } catch (e) {
|
|
|
- console.warn('!! Check Track JS Error 003 !!')
|
|
|
+ const tracker = this.useClabTracker()
|
|
|
+ if (tracker && tracker.ready) {
|
|
|
+ try {
|
|
|
+ tracker.ready(function () {
|
|
|
+ this.push({"pageType":"web"});
|
|
|
+ params.url = params.c_url
|
|
|
+ this.track("open_page", params);
|
|
|
+ tracker.setEnableAutoTrackExitPage(false)
|
|
|
+ })
|
|
|
+ } catch (e) {
|
|
|
+ console.warn('!! Check Track JS Error 003 !!')
|
|
|
+ }
|
|
|
}
|
|
|
- try {
|
|
|
- clab_tracker.track('c_jy_open_page', params)
|
|
|
- } catch (e) {
|
|
|
- console.warn('!! Check Track JS Error 004 !!')
|
|
|
+
|
|
|
+ if (tracker && tracker.track) {
|
|
|
+ try {
|
|
|
+ tracker.track('c_jy_open_page', params)
|
|
|
+ } catch (e) {
|
|
|
+ console.warn('!! Check Track JS Error 004 !!')
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -208,9 +314,22 @@ class EasyUse {
|
|
|
this.getJSON(`${this.config.dataSource}${this.config.version ? ('?v=' + this.config.version) : ''}`, (data) => {
|
|
|
if (Array.isArray(data)) {
|
|
|
this.json = [].concat(data)
|
|
|
- setTimeout(() => {
|
|
|
- this.upPageInfo()
|
|
|
- }, this.config.upWaitStep)
|
|
|
+
|
|
|
+ if (!this.checkHasPageClabTracker() && this.config.iframeSupportEnabled) {
|
|
|
+ const _this = this
|
|
|
+ this.helperTracker(function (tracker) {
|
|
|
+ window._iframe_clab_tracker = function () {
|
|
|
+ return tracker
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ _this.upPageInfo()
|
|
|
+ }, _this.config.upWaitStep)
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.upPageInfo()
|
|
|
+ }, this.config.upWaitStep)
|
|
|
+ }
|
|
|
}
|
|
|
})
|
|
|
}
|