第一步:

使用 神策 插件  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;

6e6030c948add49a99095d3f05bc7e59.png

第三步:

在mian.js进行导入注册

import sensors from './sensors_config'

Vue.prototype.$sensors = sensors;

第四步:

在神策元数据管理中

元事件中创建埋点事件(要埋点的事件,例如:点击)

事件属性中创建属性(要传递的参数或者公共属性,例如:点击的页面)

29c8674c943e45602d7cbae6589a9d1d.png

55ccf6e39a30a964b9b7cb9402c088e1.png

70a9214ff60321309b51ab411109dd5c.png

第五步:

在项目中进行点击埋点

<template>

  <div>

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

  </div>

</template>

<script>

export default {

  methods: {

    ClickBtn() {

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

        // 传递的参数

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

      });

    }

  }

};

</script>

<style>

</style>

 

 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐