vue神策前端埋点，自定义埋点及追踪用户

vue项目神策埋点网上的相关资料比较少，只能摸索尝试着调试。
全埋点在main.js中引入sensors.init代码即可，再根据业务逻辑去追踪用户，sensors.login()方法中嵌入用户唯一标识码，也许是手机号，也许是openId，根据项目确定。
vue项目中main.js中添加

//main.js 中引入 sensors
import sensors from'sa-sdk-javascript';
// 追踪用户
let agentCode = '';
let mobileNo = '';
let openidNo = '';
// 环境地址
let saServerUrl = 'saProd' // 生产环境环境神策接入地址
let host = window.location.host;
if(host.indexOf('uat') > -1){
    saServerUrl = 'saUat' // uat测试环境神策接入地址
}
sensors.init({
    sdk_url: 'https://static.sensorsdata.cn/sdk/1.13.14/sensorsdata.min.js',
    heatmap_url: 'https://static.sensorsdata.cn/sdk/1.13.14/heatmap.min.js',
    name: 'sensors',
    server_url: saServerUrl,
    heatmap:{},
    is_track_single_page: false,
    cross_subdomain: false,
});

let start_time = new Date();
let end_time = "" ;
Vue.nextTick(() => {
    let identify = JSON.parse(sessionStorage.getItem('app_user_session'));
    if(identify){
        agentCode = identify.agentCode;
        mobileNo = identify.mobile;
        openidNo = identify.openid;
    }
    //根据agentCode,mobileNo,openidNo追踪用户
    sensors.login(agentCode || mobileNo || openidNo);
    sensors.setProfile({mobile: mobileNo }); // 自定义追踪属性，使用用户手机号
    window.onload = function(){
        end_time = new Date();
        sensors.track('loadingTime',{ // 神策页面加载时间事件埋点
            loadTime:end_time.getTime() -  start_time.getTime() // 页面加载时间
        })
    }
    sensors.quick("autoTrackSinglePage");
});

自定义埋点，获取用户输入数据
在页面中引入

<input title="姓名" placeholder="请输入姓名" v-model="searchData.appntName"></input>

import sensors from'sa-sdk-javascript';

sensors.track('changeEffective', { // 'changeEffective' 为自定义事件名称
    effectiveName: this.searchData.appntName,
    effectiveIdentifyType: this.chargeState,
});

 // 'effectiveName','this.searchData.appntName' 相应键值

神策自定义属性

sensors.setProfile({mobile: mobileNo }); // 自定义追踪属性，使用用户手机号

后台数据查看

神策.png

实际上就是多出的这个mobile属性，在属性分析===>>>用户列表中可以查看到。

最后编辑于：2020.04.01 15:50:37