前端vue通过神策进行数据埋点

第一步：

使用 神策 插件  npm install sa-sdk-javascript --save

第二步：

在vue项目新建文件（sensors_config.js）

// 初始化埋点功能

const sensors = require('sa-sdk-javascript');

sensors.init({

  show_log: true,

  server_url: '#', // 神策数据接收地址

  is_track_single_page: true, // 单页面配置，默认开启，若页面中有锚点设计，需要将该配置删除，否则触发锚点会多触发 $pageview 事件

  use_client_time: true,

  send_type: 'beacon',

  heatmap: {

    //是否开启点击图，default 表示开启，自动采集 $WebClick 事件，可以设置 'not_collect' 表示关闭。

    clickmap: 'not_collect',

    //是否开启触达图，not_collect 表示关闭，不会自动采集 $WebStay 事件，可以设置 'default' 表示开启。

    scroll_notice_map: 'not_collect'

  }

});

// 注册公共属性

sensors.registerPage({

user_code: '123456789', // 工号

user_name: '张三' // 姓名

});

export default sensors;

第三步：

在mian.js进行导入注册

import sensors from './sensors_config'

Vue.prototype.$sensors = sensors;

第四步：

在神策元数据管理中

元事件中创建埋点事件（要埋点的事件，例如：点击）

事件属性中创建属性（要传递的参数或者公共属性，例如：点击的页面）

第五步：

在项目中进行点击埋点

<template>

  <div>

    <el-button @click="ClickBtn">点击</el-button>

  </div>

</template>

<script>

export default {

  methods: {

    ClickBtn() {

      this.$sensors.track("cs", {

        // 传递的参数

        source_page: '首页' // 点击的页面

      });

    }

  }

};

</script>

<style>

</style>