H5项目集成神策数据,进行埋点

由于公司项目开发要进行埋点对用户行为进行分析,公司采用了神策数据进行埋点,下面记录一下如何在h5项目中集成神策数据。

由于我们的项目是使用vue开发的单页面项目,所以采用的是commonjs规范方式集成

1.从 npm 获取 sdk

 npm install sa-sdk-javascript

2.创建sensors.js文件

let sensors = require('sa-sdk-javascript');
sensors.init({
    server_url: '数据接收地址',
    is_track_single_page: true, // 单页面配置,默认开启,若页面中有锚点设计,需要将该配置删除,否则触发锚点会多触发 $pageview 事件
    use_client_time: true,
    send_type: 'beacon',
    heatmap: {
        //是否开启点击图,default 表示开启,自动采集 $WebClick 事件,可以设置 'not_collect' 表示关闭。
        clickmap: 'default',
        //是否开启触达注意力图,not_collect 表示关闭,不会自动采集 $WebStay 事件,可以设置 'default' 表示开启。
        scroll_notice_map: 'not_collect'
    }
});
sensors.quick('autoTrack'); //用于采集 $pageview 事件。
export default sensors

3.获取数据接收地址

通过管理员帐号密码登录神策分析平台,点击数据接入-》数据接入引导,可以获取到数据接收地址,如下

 

 

H5项目集成神策数据,进行埋点

 

 4.在main.js文件中引入sensor.js文件,将sernsor方法挂载到vue原型上

import sensors from './assets/js/sensors'
Vue.prototype.$sensors = sensors

5.npm run serve启动项目,在浏览器日志中有日志打印说明神策数据集成成功

H5项目集成神策数据,进行埋点

 

 H5项目集成神策数据,进行埋点

 

上一篇:【mmwave】DeviceSurvey


下一篇:Linux中使用QT读取并显示温度传感器数值