javascript结合神策数据实现页面级埋点

新建.js文件

1.配置埋点

  var Protocol = window.location.protocol; //获取地址栏 “http:/https:”
  var Isdomain  = document.domain; //获取 例：www.baodu.com
  var ApiUrl = Protocol + "//"+Isdomain+ "/接口";    //获取 例：http://www.baidu.com/complie

2.神策平台生成代码 //配置埋点需要url

  (function (para) {
  var p = para.sdk_url, n = para.name, w = window, d = document, s = 'script', x = null, y = null;
  if (typeof (w['sensorsDataAnalytic201505']) !== 'undefined') {
    return false;
  }
  w['sensorsDataAnalytic201505'] = n;
  w[n] = w[n] || function (a) { return function () { (w[n]._q = w[n]._q || []).push([a, arguments]); } };
  var ifs = ['track', 'quick', 'register', 'registerPage', 'registerOnce', 'trackSignup', 'trackAbtest', 'setProfile', 'setOnceProfile', 'appendProfile', 'incrementProfile', 'deleteProfile', 'unsetProfile', 'identify', 'login', 'logout', 'trackLink', 'clearAllRegister', 'getAppStatus'];
  for (var i = 0; i < ifs.length; i++) {
    w[n][ifs[i]] = w[n].call(null, ifs[i]);
  }
  if (!w[n]._t) {
    x = d.createElement(s), y = d.getElementsByTagName(s)[0];
    x.async = 1;
    x.src = p;
    x.setAttribute('charset', 'UTF-8');
    w[n].para = para;
    y.parentNode.insertBefore(x, y);
  }
})({
  sdk_url: '/文件路径/sensorsdata.min.js',//sensorsdata.min.js 文件的地址，请从 GitHub 获取并且放在你们自己网站目录下。
  heatmap_url: '/文件路径/heatmap.min.js',//heatmap.min.js 文件的地址，请从 GitHub 获取并且放在你们自己网站目录下
  name: 'sensors',//SDK 使用的一个默认的全局变量，如定义成 sensors 的话，后面可以使用 sensors.track() 用来跟踪信息。为了防止变量名重复，你可以修改成其他名称比如 sensorsdata 等 
  server_url: ApiUrl + '后台接口提供地址及参数',// 数据接收地址。
  heatmap: { //点击图配置。配置成 {} 表示开启 $WebClick 和 $WebStay 的自动采集，默认 $WebClick 只采集 a，button，input 三个 dom 元素的点击事件。
    clickmap: "default",// 是否开启触达注意力图 默认default表示开启 自动采集
    scroll_notice_map: true,
    loadTimeout: 3000,
    renderRefreshTime: 1000,
    scroll_delay_time: 4000,
  },
  show_log: false,//设置 true 后会在网页控制台打 logger，会显示发送的数据,设置 false 表示不显示。默认 true。
  use_client_time: true // 因为客户端系统时间的不准确，会导致发生这个事件的时间有误，所以这里默认为 false ，表示不使用客户端时间，使用服务端时间，如果设置为 true 表示使用客户端系统时间。如果你在属性中加入 {$time: new Date()} ，注意这里必须是 Date 类型，那么这条数据就会使用你在属性中传入的这个时间。
});

    sensors.quick('autoTrack', { //自动获取用户信息
  session_id: set_session_id(),//获取
  terminal: terminal(),  // 判断终端
  user_id: getCookie("user_id"), // 获取用户id
});


var unloadHandler = function(e){ //手动发送数据需有相应的触发事件
sensors.track('pageclose', { //手动获取信息  页面进入获取不到的信息
pageStayTime: duration,
pageUrl: window.location.href,
trade_label: setTradeLabel()

}); }

  if ('onpageshow' in window) { //判断用户浏览页面 调取对应的方法
  $(window).on('pageshow', loadHandler); // 用户每次加载页面时触发
  $(window).on('pagehide', unloadHandler); //用户离开时触发 
  } else {
  $(window).on('load', loadHandler);
  $(window).on('unload', unloadHandler);
}


页面直接调用动态生成script
<script>
//埋点
    ;(function () {
  var script = document.createElement('script')
  script.setAttribute('type', 'text/javascript')
  script.setAttribute('src', '/创建埋点文件路径')
  script.setAttribute('id', 'maidianJS')
  script_id = document.getElementById('maidianJS')
  if (script_id) {
    document.getElementsByTagName('head')[0].removeChild(script_id)
  }
  document.getElementsByTagName('head')[0].appendChild(script)
})()
</script>