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.获取数据接收地址

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

 

 

 

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

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

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

 

 

 

标签：default,开启,神策,js,埋点,H5,数据,sensors
来源： https://www.cnblogs.com/xing1108/p/14863564.html