# 全埋点与网页热力分析常见问题
[1、全埋点常见问题](js_sdk_heatmap.md#1-全埋点常见问题)
[2、网页热力分析常见问题](js_sdk_heatmap.md#2-网页热力分析常见问题)
## 1 全埋点常见问题
### 1.1 没有点击事件,控制台也看不到打印的数据
神策的点击事件是监听在 'document' 上的,如果阻止了事件的冒泡,就采集不到元素点击事件了。
例如:下面的情况,点击 id 为 one 的标签,就无法触发神策预置的元素点击事件。
```
$("#one").click(function(event) {
event.stopPropagation();
});
//或者
$("#one").click(function(event) {
return false;
});
```
检测是否阻止了冒泡的方法,在Chrome 浏览器开发者工具控制台上对 document 对象绑定一个点击事件,点击这个按钮看能不能触发,如果不能触发,则阻止了冒泡
```
document.addEventListener('click',function(){
console.log(123);
});
```
### 1.2 $WebClick 事件,预置属性说明
需要客户设置才能采集到的预置属性。
如果客户的神策 SDK 默认采集的标签下列属性都有,那么神策可以默认采集,如果客户的标签缺少其中的某个属性,那么这一条数据的这几个预置属性会为 `未知`。
```
神策新闻
```
元素 ID:news
元素内容:神策新闻
元素名字:sensorsnews
元素样式名:mnav
元素类型:a
元素链接地址:https://www.sensorsdata.cn
### 1.3 如何给 $WebClick 增加自定义属性
```
// 下面演示多个标签(class 名不同)被点击时触发预置的元素点击事件
提交订单
图片
```
方案一,参考本章第 3 节,heatmap 参数的 custom_property 属性。
```
//使用 heatmap.custom_property 设置筛选规则后自动增加自定义属性,给标签添加同一属性,例:data="test"
提交订单
图片
heatmap: {
custom_property: function(element_target) {
//比如您需要给有 data=test 属性的标签的点击事件增加自定义属性
if(element_target.getAttribute('data') === 'test'){
return {
customProp1: 'test1',
customProp2: 'test2'
};
}
}
}
```
方案二,参考本章第 3.1 节,trackHeatMap 及 trackAllHeatMap 方法的使用。
针对非默认标签(非 a, input, button, textarea 标签)的自定义属性,手动触发 trackHeatMap 方法时增加自定义属性
[SDK 更新日志](https://github.com/sensorsdata/sa-sdk-javascript/releases)
```
$('.aa,.bb').on('click', function() {
sensors.quick('trackHeatMap', this, {
customProp1: 'test1', //如果需要添加自定义属性需要将 SDK 升级到 1.13.7 及以上版本。
customProp2: 'test2'
}, function() {
console.log('callback');
});
});
```
所有元素的自定义属性,手动触发 trackAllHeatMap 方法时增加自定义属性
```
$('.aa,.bb').on('click', function() {
sensors.quick('trackAllHeatMap', this, {
customProp1: 'test1', //如果需要添加自定义属性需要将 SDK 升级到 1.13.7 及以上版本。
customProp2: 'test2'
}, function() {
console.log('callback');
});
});
```
### 1.4 点击会跳转页面的按钮,预置采集的 $WebClick 可能会丢失
详细介绍请参考文档: [关闭页面发数据](js_sdk_closepage.md)
## 2 网页热力分析常见问题
### 2.1 当前元素有点击,但是没有点击图
建议使用 Chrome 浏览器,打开浏览器开发者工具,将包含 Console 中红色部分的完整页面截图发给神策值班同学。
### 2.2 SDK 版本问题
请确保 SDK 是最新版本,且在条件允许的情况下将神策分析也升级到较新的版本(可联系客户成功协调升级)。
### 2.3 网页热力分析 http 和 https 的问题
首先需要了解一下浏览器的安全性限制:
1 如果一个页面是使用 https 协议打开的,那么在这个页面里面是不能使用 http 协议请求图片、数据、或者 iframe 打开页面,因为都会被浏览器限制。
2 如果一个页面是使用 http 协议打开的,那么在这个页面里面是可以使用 https 协议请求图片、数据、或者 iframe 打开页面,因为浏览器不会受限制。
#### 场景一:客户网站是 http 协议访问,神策后台管理是 https 协议访问。
1 这时候 $PageView 事件采集到了页面地址是 http 的。(例如 页面1 :http://www.abc.com/page1.html)
2 在网页热力分析页面,在列表里面 点击 页面1,这时候页面会使用一个 iframe 来加载 页面1。由于神策后台是 https 协议,页面1 是 http 协议,受浏览器限制,神策会提示使用 新标签页 打开。
3 点击使用新标签页打开,页面1 是 http 的,这时候页面会向神策后台请求页面点击数据,使用 https 请求。不受限制,可以正常使用。
#### 场景二:客户网站是 https 协议访问,神策后台管理是 http 协议访问。
1 这时候 $PageView 事件采集到了页面地址是 https 的。(例如 页面1 :https://www.abc.com/page1.html)
2 在网页热力分析页面,在列表里面 点击 页面1,这时候页面会使用一个 iframe 来加载 页面1。由于神策后台是 http 协议,页面1 是 https 协议,不受限制,正常打开页面1。
3 页面1 打开后,这时候页面会向神策后台请求页面点击数据,使用 http 请求。由于页面1 是 https 的,受浏览器限制,请求数据异常。
4 Saas 版本默认支持 http 和 https,直接使用 https 访问就可解决问题。
私有部署版本,默认没有开启 https。需要客户自己开启 https。并更新神策后台地址,添加 https 地址。步骤如下:
a、[开启神策 https 协议](data_import_https.md)
b、[更新神策后台地址](data_import_nginx.md#3-更新神策后台配置)
### 2.4 移动端适配
目前预置的 $WebClick 点击事件是在用户的各种设备的各种屏幕大小下采集的数据,但是点击分析的展示是在一个屏幕下显示的(一般是 PC 端)
方案一:点击分享按钮,用手机扫描二维码,在移动端设备上查看点击分析,后期我们会开发基于多个屏幕大小下的显示方案,敬请期待。
![](https://www.sensorsdata.cn/manual/img/jssdk_faq1.png)
### 2.5 样式冲突
如果在页面渲染点击分析数据的时候,发现有样式冲突问题,可以通过切换点击图方案 2 解决(渲染页面顶部黑色操作栏左边切换按钮),我们会持续改进。
### 2.6 其他元素采集
建议除预置采集的 a、button、input 之外只采集部分重点标签元素,不要滥用自定义采集,避免全局采集所有 div 元素,否则会导致 $WebClick 事件量激增,并且点击图会显示页面上所有 div 元素的色块,导致点击图整体过于混乱无法查看。
### 2.7 热力图跨域问题
1 不配置服务转发的情况下,通常不会存在跨域问题;当配置服务转发后,这个问题可能出现。
2 私有部署,转发配置错误,可能会导致点击图跨域请求报错。可能修改或重复配置了以下的值
```javascript
response.setHeader("Access-Control-Allow-Origin", origin);
response.setHeader("Access-Control-Allow-Methods", "POST,GET,PUT,OPTIONS,DELETE");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Headers", "cors,X-Requested-With,Content-type");
```
3 https 和 http 的问题
https 页面中不可以发送 http 的 xhr 请求;
http 页面中可以发送 https 请求。
### 2.8 网页热力图显示的点击数据不准,手动计算点击数量跟事件分析统计的点击数量不一致
如果页面内容有改动,例如之前页面上有个按钮 A ,后来这个按钮被删除了。那这个按钮 A 的点击事件还在,这会导致事件分析的时候能统计到,但是网页热力
分析的时候就不能渲染这个按钮了。