常见问题

最后更新于:2019-12-09 19:11:03

1 JSSDK 使用常见问题

1.1 字符串最大长度和截取的问题

referrer 字符串截取:
SDK 相关参数 max_referrer_string_length 默认 200 的长度,修改这个值会有两个地方影响。 第一个是与 referrer 相关的属性,会截取这个字段; 第二个是在 cookie 里保存的属性,在下次打开的时候会被截取。

通用字符串截取,超过 7000 的字符串会导致 url 超长发不出去,所以限制长度。
SDK 相关参数 max_string_length 最大默认 500 的长度,可以用来设置字符串最大长度。

另外关于字符串最大长度的问题,也可以保持神策使用 cookie 存贮的数据比较小。

1.2 主域名跨域的两个网站,如何统一用户?

如果两个网站是子域名关系,sdk 初始化的时候配置 cross_subdomain 为 true 就行了。
如果两个网站是主域名跨域了,可以使用传递 distinct_id 的方式实现来两个网站的用户统一。

1.3 采集的数据不准确

如果你对 JavaScript SDK 的导入数据持有怀疑,想要验证数据导入是否靠谱。可以使用如下代码检测。

  var counter = 0;
  function test_script_1(){
    setTimeout(function(){
      if(++counter <= 500 ){
        sensors.track('test_script_1');
        test_script_1();
      }
    },1000);
  }
  test_script_1();

上述代码,每秒钟会发一次 test_script_1 事件,总共发送500次,你可以修改次数和间隔。可以直接放在浏览器控制台执行。目前,客观环境都正常的情况下,准确率100%。

JavaScript SDK 如果有漏数据的情况,主要是这么几个情况:

  1. 网络环境。突然断线等异常导致数据发送不出去,这种情况难以避免,但是概率比较低。
  2. 浏览器环境。老版本浏览器容易崩溃以及异常,某些手机浏览器不支持 Cookie,或者禁用 JavaScript 等,还有浏览器时间异常,或者一些奇葩浏览器取到的值异常,建议用最新版本的 Chrome、Firefox 等浏览器。
  3. 发送的数据格式有误。建议在使用时,一定要看下控制台 console.log 出来的数据!并且在开发阶段使用 debug 模式,查看数据格式是否有问题。如果属性的类型不一致,事件名不规范,等情况都会导致丢数据,可以在数据导入辅助工具中查看错误原因。
  4. 代码逻辑复杂,自己认为会发送某个事件,其实因为程序出错或者逻辑疏忽导致没发,比如自己断定ajax 会成功,然后只在 success 里发了某个事件,这样是不合理的。

1.4 采集客户端 IP

在 JavaScript SDK 中不需要传入 $ip 属性。接收数据的服务端会自动解析访问者的 IP。如果您主动设置了 $ip 属性,将会使用你设置的 IP 属性。

1.5 在埋点管理中显示埋点信息

因为在 JavaScript 中会自动压缩打包等问题,且很难自动取到当前函数名,行号等信息。所以提供了手动传入埋点信息的方法。

sensors.track('event',{$lib_detail:'类名##函数名##文件名##行号'});
// 例如一次点击导航菜单的事件,这里 $lib_detail 必须按照上面的格式来写,没有可以不填,但是必须有##做分隔符
sensors.track('clickNav',{$lib_detail:'##clickNavFunc##nav.js##28'});
// profile也是相同的方式
sensors.setProfile({$lib_detail:'####user.js##28'});

1.6 如何设置页面停留时间

神策分析 1.6 开始提供了 Session 分析功能,可以从页面浏览行为推算出用户大概的页面停留时间,一般情况下使用这个功能就足够了。而精确的页面停留其实是很难统计的,例如一个用户很可能同时打开多个网页窗口,然后一直不关闭。如果只是想要统计页面打开到关闭的时间,也可以参考以下代码:

假如网站引用了 jQuery :

var loadHandler = function(e) {
  start = new Date();
};

var unloadHandler = function (e) {
  var end = new Date();
  // 如果用户一直不关闭页面,可能出现超大值,可以根据业务需要处理,例如设置一个上限
  var duration = (end.getTime() - start.getTime()) / 1000;
  // 定义一个记录页面停留时间的事件pageView,并且保存需要的属性(停留时间和当前页面的地址)
  sensors.track('pageclose', {
    pageStayTime: duration,
    pageUrl: window.location.href
  });
};

if ('onpageshow' in window) {
  $(window).on('pageshow', loadHandler);
  $(window).on('pagehide', unloadHandler);
} else {
  $(window).on('load', loadHandler);
  $(window).on('unload', unloadHandler);
}

不使用依赖库:

var start = new Date();

var loadHandler = function(e) {
  start = new Date();
};

var unloadHandler = function (e) {
  var end = new Date();
  // 如果用户一直不关闭页面,可能出现超大值,可以根据业务需要处理,例如设置一个上限
  var duration = (end.getTime() - start.getTime()) / 1000;
  // 定义一个记录页面停留时间的事件pageView,并且保存需要的属性(停留时间和当前页面的地址)
  sensors.track('pageclose', {
    pageStayTime: duration,
    pageUrl: window.location.href
  });
};

if ('onpageshow' in window) {
  addEvent(window, 'pageshow', loadHandler);
  addEvent(window, 'pagehide', unloadHandler);
} else {
  addEvent(window, 'load', loadHandler);
  addEvent(window, 'unload', unloadHandler);
}

function addEvent(target, type, listener) {
  if (window.addEventListener) {
    target.addEventListener(type, listener, false);
  } else {
    target.attachEvent('on' + type, listener);
  }
}

1.7 如何设置页面加载时间

关于页面加载时间,首先要根据需求来选择对应的方法,以 window.onload 为例可以参考如下代码:

        //在页面头部以同步的方式加载 js 代码
        var start_time = new Date();
        //定义起始时间
        var end_time = "" ;
        //定义结束时间
        window.onload = function(){
          end_time = new Date();
          sensors.track('pageLoadTime',{
            loadTime:end_time.getTime() -  start_time.getTime()
          })   
        }

1.8 如何采集输入框的填写时间

这里只是一个事例,如果有需要请参考以下代码:

<div id="log"> </div>
<form>
  <div>
    <label for="name">Name (4 to 8 characters):</label>
    <input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10" value="" placeholder="Input your name" />
  </div>
</form>
// 需要注意示例中浏览器方法的浏览器兼容性!!!

window.addEventListener('DOMContentLoaded', function() {
  // 监听 focusin 事件,选择 focusin 是因为它支持冒泡
  document.body.addEventListener('focusin', function(event) {
    var target = event.target;
    if (target.tagName.toLowerCase() === 'input') { // 如果当前元素是 input 输入框
      target.dataset.focus_time = (new Date()).valueOf(); // 把获得焦点的时间记录到input输入框
      target.dataset.focus_value = target.value;
    }
  });
  // 监听 focusout 事件,会在input失去焦点时触发,此事件支持冒泡
  document.body.addEventListener('focusout', function(event) {
    var target = event.target;
    var targetTag = target.tagName.toLowerCase();
    if (targetTag === 'input') { // 如果当前元素是 input 输入框
      var now = (new Date()).valueOf();
      var requestData = {
        input_name: target.name, // input 输入框的 name 属性
        begin_time: parseInt(target.dataset.focus_time), // 获得焦点的时间戳,单位是毫秒
        end_time: now, // 失去焦点的时间戳,单位是毫秒
        event_duration: now - target.dataset.focus_time, // 时长,单位是毫秒
        previous_value: target.dataset.focus_value, 
        after_value: target.value
      };
      // 调用 track() 方法发送自定义事件
      sensors.track('Input_box_out_of_focus', requestData);
    }
  });
});

1.9 nuxtjs 示例

引入代码,需要改成如下

if (process.client)

{ var sensors = require('sensorsdata'); sensors.init(...) }

所有 track 的前端代码,都需要放在下面的方法中中去执行

if (process.client)

{ sensors.track(.....) }

1.10 设备追踪功能(is_track_device_id 配置项)

is_track_device_id:设置成 true 后, 表示事件属性里面添加一个设备 id 的属性 $device_id,存贮在 cookie 里面并发送。默认 false,记录但不发送。 如果客户代码开启了这个参数,会发送到神策后台,后台可以根据这个 ID 来识别一个设备上多个用户的登录行为,可以用于识别刷单等。

2 全埋点与网页热力分析常见问题

2.1 全埋点常见问题

2.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);
});

2.1.2 $WebClick 事件,预置属性说明

需要客户设置才能采集到的预置属性。 如果客户的神策 SDK 默认采集的标签下列属性都有,那么神策可以默认采集,如果客户的标签缺少其中的某个属性,那么这一条数据的这几个预置属性会为 未知

<a href="https://www.sensorsdata.cn" class="mnav" name="sensorsnews" id="news">神策新闻</a>

元素 ID:news
元素内容:神策新闻
元素名字:sensorsnews
元素样式名:mnav
元素类型:a
元素链接地址:https://www.sensorsdata.cn

2.1.3 如何给 $WebClick 增加自定义属性

// 下面演示多个标签(class 名不同)被点击时触发预置的元素点击事件

<div class="aa">提交订单</div>
<img src="https://www.sensorsdata.cn" class="bb">图片

方案一,参考本章第 3 节,heatmap 参数的 custom_property 属性。

//使用 heatmap.custom_property 设置筛选规则后自动增加自定义属性,给标签添加同一属性,例:data="test" 

<div class="aa" data="test" >提交订单</div>
<img src="https://www.sensorsdata.cn" class="bb" 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 更新日志

$('.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');
  });
});

2.1.4 点击会跳转页面的按钮,预置采集的 $WebClick 可能会丢失

详细介绍请参考文档: 关闭页面发数据

2.2 网页热力分析常见问题

2.2.1 当前元素有点击,但是没有点击图

建议使用 Chrome 浏览器,打开浏览器开发者工具,将包含 Console 中红色部分的完整页面截图发给神策值班同学。

2.2.2 SDK 版本问题

请确保 SDK 是最新版本,且在条件允许的情况下将神策分析也升级到较新的版本(可联系客户成功协调升级)。

2.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 协议
b、更新神策后台地址

2.2.4 移动端适配

目前预置的 $WebClick 点击事件是在用户的各种设备的各种屏幕大小下采集的数据,但是点击分析的展示是在一个屏幕下显示的(一般是 PC 端)
方案一:点击分享按钮,用手机扫描二维码,在移动端设备上查看点击分析,后期我们会开发基于多个屏幕大小下的显示方案,敬请期待。

2.2.5 样式冲突

如果在页面渲染点击分析数据的时候,发现有样式冲突问题,可以通过切换点击图方案 2 解决(渲染页面顶部黑色操作栏左边切换按钮),我们会持续改进。

2.2.6 其他元素采集

建议除预置采集的 a、button、input 之外只采集部分重点标签元素,不要滥用自定义采集,避免全局采集所有 div 元素,否则会导致 $WebClick 事件量激增,并且点击图会显示页面上所有 div 元素的色块,导致点击图整体过于混乱无法查看。

2.2.7 热力图跨域问题

1 不配置服务转发的情况下,通常不会存在跨域问题;当配置服务转发后,这个问题可能出现。
2 私有部署,转发配置错误,可能会导致点击图跨域请求报错。可能修改或重复配置了以下的值

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.2.8 网页热力图显示的点击数据不准,手动计算点击数量跟事件分析统计的点击数量不一致

如果页面内容有改动,例如之前页面上有个按钮 A ,后来这个按钮被删除了。那这个按钮 A 的点击事件还在,这会导致事件分析的时候能统计到,但是网页热力 分析的时候就不能渲染这个按钮了。