神策H5全埋点注意事项

H5全埋点在mian.js中引入并初始化

需要放在本地请勿使用线上的csdn官方也会删除低版本的包要是没及时更新会出现生产bug

初始化实例如下

//神策url
let serverUrl = 'https://********************';
let serverUrl2 = 'https://*******************';
// 神策埋点
import sensors from './api/sensorsdata.es6.min.js' //JS的位置
sensors.init({
	server_url: window.location.hostname == "www.***.com"?serverUrl2:serverUrl,//判断是否为生产环境
	use_client_time: true,
	send_type: 'beacon',
	heatmap: {
	scroll_notice_map: 'default',//是否开启点击图，默认 default 表示开启
    clickmap:'default',//是否开启点击图，默认 default 表示开启，可以设置 'not_collect' 表示关闭。
    get_vtrack_config: true,//抓取所有div 需要后台打开允许
    collect_tags: {//通过 collect_tags 配置是否开启其他任意元素的全埋点采集（默认不采集）
      li: true,
      img: true,
      svg: true
      // ... 其他标签
    }
	}
});
sensors.quick('autoTrack');// 设置之后，SDK 就会自动收集页面浏览事件，以及设置初始来源。
sensors.registerPage({ product_platform: '抓取的数据所属的项目名' });//当前上报的项目名字
Vue.prototype.sensors = sensors;//挂载全局

H5 sensors.identify

sensors.identify是匿名id,默认情况下，是把 cookie_id 作为 Distinct ID ,如果你能取到其他匿名 id（比如设备 id，或者你们自己生成的 cookie_id），可以用 sensors.identify(id, true) 来改变当前的 Distinct ID :

示例如下

this.sensors.identify( res.phoneNumber, true) //会把这个 id 保存在浏览器的 cookie 中，该域名下的页面都会默认使用这个 id。

如果我们不去修改这个identify,他会自己生成匿名cookieID。

实际sensors.identify在后台是有调用的，匿名cookieid直到调用login后这个匿名用户以前操作的数据都会被改成login后的用户的数据。

H5 sensors.login(“登录 ID”)

上传的登录ID都为固定的账户唯一值

此处注意例如我调用了 sensors.login(ID)之后此用户的基金账户就永远固定了，再次调用 sensors.login是不会生效的

全埋点上的事件有三种 [Web 浏览页面,Web 元素点击,Web 视区停留

实际在编写代码中只需要处理Web元素点击的上报内容，浏览与停留是自己上报的。

三种事件都有同一个必填项目 $title 页面标题，这个只需要在router内把每个页面的title都配置好即可

如果获取不到title的可以使用以下方法

	router.beforeEach((to, from, next) => { 
	 document.title = '新页面的 title 值'; 
 	next() 
	}) 

Web 元素点击 必填项 元素名字 $element_name

项目中埋点需要注意button标签是默认抓取直接输入name="***"控制台就会抓取上报

假如我需要抓取span标签那么我就需要在collect_tags内增加一个键值对 span:true

collect_tags: {//通过 collect_tags 配置是否开启其他任意元素的全埋点采集（默认不采集）
  li: true,
  img: true,
  svg: true,
  span:true
  // ... 其他标签
}

获取div标签埋点的三种方式

div默认是不采集的，开启div= true时才采集，但是div只采集一层

div 中有且只有样式标签（[‘mark’,‘strong’,‘b’,‘em’,‘i’,‘u’,‘abbr’,‘ins’,‘del’,‘s’,‘sup’]）时，点击 div 或者样式标签都采集 div 的点击

heatmap:{  
        collect_tags:{
              div : true
        }
}

div 通过配置最多可以采集 3 层嵌套情况

collect_tags: {
  div: {
        max_level: 1 // 默认是 1，即只支持叶子 div。可配置范围是 [1, 2, 3],非该范围配置值，会被当作 1 处理。
    },
}

开启get_vtrack_config: true任意层级 div 元素的自动采集

此方法常用

div开启了get_vtrack_config: true也需要增加 data-sensors-click

支持任意层级 div 标签功能，需要找神策管理员在后端输入命令行开启此项功能。
后端命令 （spadmin config set server -p sdg -m web -n enable_unlimit_position_web_element -v true）。

前端配置位置如下

sensors.init({
    get_vtrack_config: true,//抓取所有div 需要后台打开允许
	}
});

示例如下

<div class="box">
  <div class="box1" @click="jumpLottery" data-sensors-click name="去抽奖1">去抽奖1</div>
  <div class="box2" @click="jumpLottery2" data-sensors-click name="去抽奖2">去抽奖2</div>
</div>

假如上传的name需要动态判断或者是变量可以写入模板字符串也可在内写入三元表达式

示例如下

<button class="box1" @click="jumpLottery" :name="`去抽奖:${value}`">投一笔</button>

H5用户属性埋点

**setProfile()**方法可以设定用户属性，同一个 key 多次设置时，value 值会进行覆盖替换。

this.sensors.setProfile({email:'xxx@xx',name:'xxx'});

H5自定义埋点

SDK 初始后，即可以通过**track()**方法追踪用户行为事件，并添加自定义属性

this.sensors.track('lottery', {
	Amount: "88.88元", //可以写变量
	frequency: "8", 
	remainingTimes: "20min",
});

测试阶段可以打开事件的触发日志

测试阶段在初始化代码中添加 show_log 设置为 true，页面上有事件触发时，浏览器开发者工具会打印采集的事件信息，如下图。上线时初始化代码中将 show_log 设置为 false 即可关闭日志输出功能，show_log 和 server_url 平级。

sensors.init({
	server_url: window.location.hostname == "wmsc.cjhxfund.com"?serverUrl2:serverUrl,
    show_log:true,//建议测试结束后关闭打印不然控制台的log会一直打印
});