需求
在用户购买会员卡时埋点,获取的事件属性包括:神策预置属性、卡类型、卡名称、购卡支付金额等数据。
事件设计
实现
引入Js SDK
将获取到的代码放入html 的 head 里面,靠前的位置处。
JS SDK获取方式,参考神策官网:https://www.sensorsdata.cn/manual/js_sdk.html。
<script>
//神策数据接入
(function(para) {
var p = para.sdk_url, n = para.name, w = window, d = document, s = 'script',x = null,y = null;
if(typeof(w['sensorsDataAnalytic201505']) !== 'undefined') {
return false;
}
w['sensorsDataAnalytic201505'] = n;
w[n] = w[n] || function(a) {return function() {(w[n]._q = w[n]._q || []).push([a, arguments]);}};
var ifs = ['track','quick','register','registerPage','registerOnce','trackSignup', 'trackAbtest', 'setProfile','setOnceProfile','appendProfile', 'incrementProfile', 'deleteProfile', 'unsetProfile', 'identify','login','logout','trackLink','clearAllRegister','getAppStatus'];
for (var i = 0; i < ifs.length; i++) {
w[n][ifs[i]] = w[n].call(null, ifs[i]);
}
if (!w[n]._t) {
x = d.createElement(s), y = d.getElementsByTagName(s)[0];
x.async = 1;
x.src = p;
x.setAttribute('charset','UTF-8');
y.parentNode.insertBefore(x, y);
w[n].para = para;
}
})({
sdk_url: 'http://static.sensorsdata.cn/sdk/1.12.3/sensorsdata.min.js',
heatmap_url: 'http://static.sensorsdata.cn/sdk/1.12.3/heatmap.min.js',
name: 'sensors',
web_url: 'https://tuiying.cloud.sensorsdata.cn/?project=default_yhtoc',
server_url: 'http://tuiying.datasink.sensorsdata.cn/sa?token=edd25955ac38cd3d&project=default_yhtoc',
// server_url: 'D:/log1/access.log',
heatmap:{}
});
if(sessionStorage.memberCode){
sensors.login(sessionStorage.memberCode);
};
sensors.quick('autoTrack');
</script>
以上代码需要我们注意的地方是几个url的值。如果是以上代码是用神策平台代码生成工具自动生成的,这些url会自动配置好。
sdk_url:sensorsdata.min.js 文件的地址,也可以从 GitHub 获取并且放在你们自己网站目录下,然后引入。
heatmap_url: heatmap.min.js 文件的地址,也可以从 GitHub 获取并且放在你们自己网站目录下,然后引入。
server_url: 数据接收地址,即数据库的地址,注意神策云服务和私有化部署,这个地址是有区别的。具体请参考神策官网。
用户标识
在所有事件前面。也就是在 sdk 载入代码后面,先使用 sensors.login(如果此时有这个 user_id 的话),然后再用 sensors.quick(‘autoTrack’) 等,这样后续的事件才会使用这个更改后的 userid。
sensors.login(sessionStorage.memberCode);
sensors.quick('autoTrack');
进行事件追踪
success:function(data){
if(data.resultCode == '0'){
sessionStorage.removeItem("bindPhoneParam");
data.resultData.bindType="";
data.resultData.orderType=2;
data.resultData.actualPayment = data.resultData.orderPrice;
var me = this,
//追踪购卡事件
hasCalled = false,
cardType = cardV.popInfo.cardType,
cardName = cardV.popInfo.cardName,
cardAmount = (cardV.popInfo.cardPrice - cardV.popInfo.cardFee) / 100
trackObj = {
cardType : cardType,
cardName : cardName,
cardAmount : cardAmount
};
setTimeout(track_a_click, 400); //如果没有回调成功,设置超时回调
function track_a_click(str){
var _this = this;
if (!hasCalled) {
hasCalled = true;
location.href = path + "/page?pagePath=pay/payOrder¶ms="+encodeURIComponent(JSON.stringify(data.resultData))+"&companyCode="+sessionStorage.movieCode;; //把 A 链接的点击跳转,改成 location 的方式跳转
}
}
sensors.track('buyCrad',trackObj, track_a_click); //把跳转操作加在callback里
事件追踪的代码应该放在目标事件执行成功后。事件追踪的核心代码就是:sensors.track(‘buyCrad’,trackObj, track_a_click);这是神策用于上报事件的接口,三个参数分别是要追踪的事件名、这个事件的属性、发送完数据之后的回调。
成功演示
这样,前端代码埋点就实现了,这只是一小部分,还有更强大的操作,有待实践。