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啟動項目，在瀏覽器日志中有日志打印說明神策數據集成成功