单页面

最后更新于:2019-10-24 12:01:48

1 单页面简介

1.1 单页面定义:

单页面应用(SPA,Single-page Application)指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段),然后在交互的时候由路由程序动态载入。

1.2 单页面和多页面的区别:

相比之下,传统的多页面应用每个页面(只说动态页面)都是使用服务器端模板编写,然后请求这个页面的时候由服务器渲染成 html 再返回。两者对比,一个很明显的区别就是,多页面应用的 server 端要干两件事:提供数据+渲染,而单页面应用把渲染拿到浏览器端做了,服务器只提供数据就可以了。

1.3 单页面特点:

单页面不管你点击什么地方,永远不会刷新页面,都是感觉是在一个页面上完成的操作,操作过程中不进行页面跳转,url 地址栏#后面的字符在不停变化,且每一次变化,页面会跟随着实现局部刷新,呈现出不同的内容。

1.4 常用框架:

Angular / Vue / React / Ionic / Backbone 等。

1.5 查看一个页面是否是单页面的方式:

F12,Network,当 url 改变时看资源是否被刷新了一遍。

2 单页面埋点

SDK 的获取和引入可以参考 JavaScript SDK。需要注意的是,引入代码只需在项目靠前的位置引入一次,以 Vue 为例,将初始化代码 放置在 main.js 中就可以在项目中使用神策分析了。

3 单页面中的页面浏览事件采集($pageview)

第一种 自动模式

配置参数 is_track_single_page (推荐使用这种模式),默认值为 false ,表示是否开启自动采集 web 浏览事件 $pageview 的功能
其原理是修改 window 对象的 pushState 和 replaceState 原生方法,在页面的 url 改变后自动采集 $pageview 事件,若用户浏览器不支持这两种方法或者是使用 hash 的路由模式,我们也会监听 popstate 和 hashchange 事件来自动触发 $pageview 事件

使用方法示例:

//SDK版本1.12.18以上支持,默认值为false
is_track_single_page:true
//注意默认的: sa.quick('autoTrack') 是需要的

SDK 版本大于等于 1.14.1 的 is_track_single_page 参数增加 function(last_url){} 的配置,必须 return 一个值。
配置一:return true 表示当前页面会发送数据,
配置二:return false 表示不会发数据,
配置三:return {} 对象,表示会把对象的属性新增到当前 $pageview 里。

使用方法示例:

is_track_single_page : function (){
    return true 时候,使用默认发送的 $pageview
    return false 时候,不执行默认的 $pageview
    return {} 时候,把对象中的属性,覆盖默认 $pageview 里的属性
}
//注意默认的: sa.quick('autoTrack') 是需要的

另外注意:
必须保证切换页面前神策 JavaScript SDK 的已经执行,否则的话可能第一次切换页面不会触发 $pageview。

第二种 手动模式

在页面切换的时候,手动调用 sensors.quick('autoTrackSinglePage') 来采集 web 浏览事件 $pageview ,这个方法在页面 url 切换后调用

// 比如现在是在 react 中可以在全局的 onUpdate 里来调用
onUpdate: function(){
    sensors.quick('autoTrackSinglePage');
}

  //vue 项目在路由切换的时候调用
router.afterEach((to,from) => {
    Vue.nextTick(() => {
        sensors.quick("autoTrackSinglePage");
    });
});
//注意: vue下因为首页打开时候就会默认触发页面更细,所以需要去掉默认加的 sa.quick('autoTrack')

此方法也可添加自定义属性,

sensors.quick("autoTrackSinglePage",{platForm:"H5"});

4 单页面的页面标题 $title 问题

对于单页面项目,神策 SDK 全埋点的预置事件采集的页面标题属性,可能存在异常
title 可能没有设置,或者设置的时机晚于我们发送数据的时机

5 单页面 SDK Demo