1. 单页面

1.1. 单页面简介

1.1.1. 单页面定义:


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

1.1.2. 单页面和多页面的区别:


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

1.1.3. 单页面特点:


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

1.1.4. 常用框架:


Angular / Vue / React / Ionic / Backbone 等。

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


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

1.2. 单页面埋点


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

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

1.3.1. 第一种 自动模式


配置参数 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') 是需要的
JS


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') 是需要的
JS


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

1.3.2. 第二种 手动模式


在页面切换的时候,手动调用 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')
JS


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

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


1.4. 单页面的页面标题 $title 问题


对于单页面项目,神策 SDK 全埋点的预置事件采集的页面标题属性,可能存在异常
具体问题:
1、title 如果没有更新赋值,获取的 title 一直是主页的 title 不会变化,切换页面发送的数据不会更新 $title
2、title 设置的时机晚于数据发送的时机,切换页面发送的 $pageview 事件携带的 $title 值为上一个页面的 title
解决方案:
在切换页面前完成 title 值的更新(以常见的 vue 为例)

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


1.5. 单页面 SDK Demo