背景
公司以前采用GrowingIo埋点，都是在每个项目中引入其提供的Web JS SDK，但是最近由于使用期限到了，加上一些其他层面的考虑，准备采用神策做数据埋点和数据分析，因此需要移除每个项目中引入的GrowingIo Web JS SDK，然后引入神策提供的Web JS SDK。
方案
如果还是采用在每个项目中独立引入Web JS SDK，首先需要梳理出有多个项目有埋点需求，然后安排通知每个业务组的前端同学在迭代开发内引入。有没有觉得特别麻烦，明明是同一个Web JS SDK却需要多次引入，还涉及到跨组协作、任务分配、资源安排等问题。更重要的是，如果下次又更换采用另一个埋点工具，那重复的事情又要做一遍，吃力不讨好。
因此，我们希望能够在某个地方引入后，项目就不需要独立引入了，这个方案有没有想到跟网关服务、中间件、拦截器的思想特别像呢？我们是否能采用这类思想解决呢？答案是肯定的，通过在前端路由服务请求到的静态html脚本中注入神策Web JS SDK
文章图片
对于一些前后端分离项目可以在前端路由服务中操作静态html脚本注入神策Web JS SDK实现，但对于一些前后端未分离的项目（例如freemarker）该怎么处理呢？能在webagent网关做统一处理吗？其实也是可行的，我们可以判断响应头Content-Type: text/html，如果是，则操作html注入神策Web JS SDK；如果不是，则不做处理。但在实际情况中，鉴于前后端未分离项目较少，我们还是采用第一种方案，独立在项目中引入。
封装神策Web JS SDK
【如何优雅引入神策Web JS SDK】神策有提供全埋点功能，项目中希望使用启用该功能，因此需要再封装，初始化SDK，可以参考如下封装：
;
(function () {
/** 判断环境 */
var hostname = window.location.hostname;
var serverUrl = 'https://cj.casstime.com/sa?project=default';
if (hostname === 'www.cassmall.com' || hostname === 'h.cassmall.com') {
serverUrl = 'https://cj.casstime.com/sa?project=production';
}
// 开启全埋点，Web JS SDK 全埋点包括三种事件：Web 页面浏览、Web 元素点击、Web 视区停留
function addShenCeScript() {
window.cassSensors = window['sensorsDataAnalytic201505'];
// 初始化 SDK
window.cassSensors.init({
server_url: serverUrl,
is_track_single_page: true, // 单页面配置，默认开启，若页面中有锚点设计，需要将该配置删除，否则触发锚点会多触发 $pageview 事件
heatmap: {
/**
* Web 元素点击($WebClick)
* 是否开启点击图，default 表示开启，自动采集 $WebClick 事件，可以设置 'not_collect' 表示关闭。
* 默认只有点击 a input button textarea 四种元素时，才会触发 $WebClick 元素点击事件
*/
clickmap: 'default',
/**
* 视区停留事件($WebStay)
* 是否开启触达图，default 表示开启，自动采集 $WebStay 事件，可以设置 'not_collect' 表示关闭。
* 需要 Web JS SDK 版本号大于 1.9.1
*/
scroll_notice_map: 'default',
// 通过 collect_tags 配置是否开启其他任意元素的全埋点采集（默认不采集），其中 div 通过配置最多可以采集 3 层嵌套情况。
collect_tags: {
div: {
max_level: 3, // 默认是 1，即只支持叶子 div。可配置范围是 [1, 2, 3],非该范围配置值，会被当作 1 处理。
},
li: true,
span: true,
i: true,
img: true
},
},
})
// 注册公共属性
window.cassSensors.registerPage({
platform_type: 'web',
path_name: window.location.pathname,
})
/**
* Web 页面浏览($pageview)
* 设置之后，SDK 就会自动收集页面浏览事件，以及设置初始来源。
*/
window.cassSensors.quick('autoTrack');
/** 获取用户登录ID，用户登录后，开发人员调用login，将用户登录ID传给SDK，后续该设备上所有事件的distinct_id就会变成用户所对应的登录ID。*/
ajax({
url: '/webim/user/jwt_token',
type: 'GET',
success: function (res) {
try {
var data = https://www.it610.com/article/JSON.parse(res);
window.cassSensors.login(data.username);
} catch (e) { }
},
error: function (error) { }
});
}var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
var explorer = window.navigator.userAgent;
if (explorer.indexOf('MSIE') >= 0) {
// ie
script.onreadystatechange = function () {
if (this.readyState === 'loaded' || this.readyState === 'complete') {
addShenCeScript();
}
}
} else {
// chrome
script.onload = function () {
addShenCeScript();
}
}
script.setAttribute(
'src',
'https://mstatic.cassmall.com/assets/sensors/sensorsdata1.19.4.min.js'
);
/** 封装ajax请求 */
function ajax(params) {
params = params || {};
params.data = https://www.it610.com/article/params.data || {};
// 判断是ajax请求还是jsonp请求
var json = params.jsonp ? jsonp(params) : json(params);
// ajax请求
function json(params) {
// 请求方式，默认是GET
params.type = (params.type ||'GET').toUpperCase();
// 避免有特殊字符，必须格式化传输数据
params.data = https://www.it610.com/article/formatParams(params.data);
var xhr = null;
// 实例化XMLHttpRequest对象
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
// IE6及其以下版本
xhr = new ActiveXObjcet('Microsoft.XMLHTTP');
};
// 监听事件，只要 readyState 的值变化，就会调用 readystatechange 事件
xhr.onreadystatechange = function () {
// readyState属性表示请求/响应过程的当前活动阶段，4为完成，已经接收到全部响应数据
if (xhr.readyState == 4) {
var status = xhr.status;
// status：响应的HTTP状态码，以2开头的都是成功
if (status >= 200 && status < 300) {
var response = '';
// 判断接受数据的内容类型
var type = xhr.getResponseHeader('Content-type');
if (type.indexOf('xml') !== -1 && xhr.responseXML) {
response = xhr.responseXML;
//Document对象响应
} else if (type === 'application/json') {
response = JSON.parse(xhr.responseText);
//JSON响应
} else {
response = xhr.responseText;
//字符串响应
};
// 成功回调函数
params.success && params.success(response);
} else {
params.error && params.error(status);
}
};
};
// 连接和传输数据
if (params.type == 'GET') {
// 三个参数：请求方式、请求地址(get方式时，传输数据是加在地址后的)、是否异步请求(同步请求的情况极少)；
xhr.open(params.type, params.url + '?' + params.data, true);
xhr.send(null);
} else {
xhr.open(params.type, params.url, true);
//必须，设置提交时的内容类型
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;
charset=UTF-8');
// 传输数据
xhr.send(params.data);
}
}//格式化参数
function formatParams(data) {
var arr = [];
for (var name in data) {
// encodeURIComponent() ：用于对 URI 中的某一部分进行编码
arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
};
// 添加一个随机数参数，防止缓存
arr.push('v=' + random());
return arr.join('&');
}// 获取随机数
function random() {
return Math.floor(Math.random() * 10000 + 500);
}
}
if (!window.cassSensors) {
document.getElementsByTagName('head')[0].appendChild(script);
}
})()
