前端 SPA 单页应用数据统计解决方案 (ReactJS / VueJS)
前端 SPA 单页应用数据统计解决方案 (ReactJS / VueJS)
一、百度统计的代码: UV PV 统计方式可能存在问题
在 SPA 的前端项目中 数据统计,往往就是一个比较麻烦的事情,React 和 Vue 也是一样。
在 发现问题之前,我们得来思考下 百度统计的统计原理
是什么?
1-1: 百度统计代码
var _hmt = _hmt || [];
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?xxx";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
通过 JSONP 加载了一个 百度统计的 JS 文件,这个 JS 文件,相对还是比较大的
粗略的看了一 hm.js 的 源码文件, 获取本地的 cookie、session、url、ua 等然后还有一些处理数据的方法和 一些数据上传的方法。
那么在什么情况下,百度统计 会去触发上传的操作?
我们来实验一下?
- 1、每次页面的刷新 这个是肯定会去 触发的
- 2、路由去下一个新页面会去触发么?(待验证)
- 3、路由返回旧页面会触发么?(待验证)
下面: 我们就将待验证的场景实现出来看看,到底会不会触发。
1-2: 加入 react-router 在项目中
const GetBaidu = props => {
let children = props.children;
let _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?xxx";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
return children;
};
const App = () => {
return (
<div>
<h2>测试百度统计代码</h2>
<h3>
<Link to={"/"}>Index</Link>
</h3>
<h3>
<Link to={"/home"}>Home</Link>
</h3>
<h3>
<Link to={"/my"}>my</Link>
</h3>
<Switch>
<GetBaidu>
<Route exact path="/" component={Index} />
<Route exact path="/home" component={Home} />
<Route exact path="/my" component={My} />
</GetBaidu>
</Switch>
</div>
);
};
这样类似一个拦截器一样,在路由跳转之前把 百度统计的代码再次家再一次。
同样,Vue-router 的项目也是类似。
1-3: 加入 Vue-router 在项目中
router.afterEach( ( to, from, next ) => {
setTimeout(()=>{
var _hmt = _hmt || [];
(function() {
//每次执行前,先移除上次插入的代码
document.getElementById('baidu_tj')&&document.getElementById('baidu_tj').remove();
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?xxxx";
hm.id = "baidu_tj"
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
},0);
} );
这里只是简单粗暴的进行一个最简单的 demo 展示
亲测这类数据统计问题,放在很多项目中都是需要解决的。
总结:React 和 Vue 的方法类似, 在路由跳转前先做拦截操作。加上需要在页面中加入的方法和统计代码即可。
关于 单页应用数据统计 的文章就介绍到这里了,欢迎一起来论道~
GitHub 地址:(欢迎 star 、欢迎推荐 : )
前端 SPA 单页应用数据统计解决方案 (ReactJS / VueJS)
前端 SPA 单页应用数据统计解决方案 (ReactJS / VueJS)的更多相关文章
- Javascript 与 SPA单页Web富应用
书单推荐 # <单页Web应用:JavaScript从前端到后端> http://download.csdn.net/detail/epubitbook/8720475 # <MVC ...
- [vue]spa单页开发及vue-router基础
- 了解spa页面跳转方式:(2种) spa: 单页跳转方式 开发(hash模式): https://www.baidu.com/#2313213 生产(h5利于seo): history.pushS ...
- 移动前端开发-单页应用(spa)模型
一门新的技术诞生总会引来一番争议,单页Web应用程序也不例外,其最大的优势在于用户体验,对于内容的改动不需要加载整个页面:对服务器压力很小,消耗更少的带宽,与面向服务的架构更好地结合.使用HTML+C ...
- 【读书笔记】WebApi 和 SPA(单页应用)--knockout的使用
Web API从MVC4开始出现,可以服务于Asp.Net下的任何web应用,本文将介绍Web api在单页应用中的使用.什么是单页应用?Single-Page Application最常用的定义:一 ...
- 大熊君学习html5系列之------History API(SPA单页应用的必备)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- 基于VUE的SPA单页应用开发-加载性能篇
1.基于异步数据的vue页面刷新 先看看基于异步数据的vue页面刷新后,都发生了啥- 如图所示: 图1 基于异步数据的vue页面刷新 网络请求图 步骤如下: step1:请求页面: step2:请求页 ...
- 前端学习之路之SPA(单页应用)设计原理
SPA设计 1.设计意义 前后端分离 减轻服务器压力 增强用户体验 Prerender预渲染优化SEO 前后端分离:前端做业务逻辑,后端处理数据和接口,耦合度减少,开发效率提高. 减轻服务器压力:一个 ...
- 大熊君学习html5系列之------History API(SPA单页应用的必备------重构完结版)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- SPA单页应用前后分离微信授权
项目基于微信公众号开发,业务完全依赖微信授权,也就是用户进入页面已经完成授权获取到用户的OpenId. 需要有一个授权中间页:author.vue 基本实现思路: 无论使用哪个url进入页面都会先触发 ...
随机推荐
- 黄文俊:Serverless小程序后端技术分享
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 黄文俊,现任腾讯云SCF无服务器云函数高级产品经理,多年企业级系统开发和架构工作经验,对企业级存储.容器平台.微服务架构.无服务器计算等领域 ...
- 发布 Rafy .NET Standard 版本 Nuget 包
去年年中,Rafy 框架的源码就已经支持了 Net Standard 2.0 版本.其开源代码也已经上传到 Github 中:https://github.com/zgynhqf/rafy/tree/ ...
- 分布式爬虫框架XXL-CRAWLER
<分布式爬虫框架XXL-CRAWLER> 一.简介 1.1 概述 XXL-CRAWLER 是一个分布式爬虫框架.一行代码开发一个分布式爬虫,拥有"多线程.异步.IP动态代理.分布 ...
- JavaScript对json操作小记
JSON是一种轻量级的数据交换格式,同时,JSON是 JavaScript 原生格式,因此我们可以直接处理它不需要依赖任何工具包或者插件.因此,好多后台都会选择返回给前端这种非常友好的数据格式. 引子 ...
- C Primer Plus 第8章 字符输入/输出和验证输入 编程练习
1. #include <stdio.h> int main(){ char ch; int ct = 0; while ((ch=getchar()) != EOF) ct++; pri ...
- Spring Boot使用RestTemplate消费REST服务的几个问题记录
我们可以通过Spring Boot快速开发REST接口,同时也可能需要在实现接口的过程中,通过Spring Boot调用内外部REST接口完成业务逻辑. 在Spring Boot中,调用REST Ap ...
- select case when与IF的用法
case when概述 sql语句中的case语句与高级语言中的switch语句,是标准sql的语法,适用于一个条件判断有多种值的情况下分别执行不同的操作. case when示例 有一张表,里面有3 ...
- Axios 中文说明
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. Features 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http ...
- React Native系列(6) - 编译安卓私有React-Native代码
为何要自己编译React Native安卓私有代码 我们在开发中遇到一个HTTP2的问题,React Native安卓客户端在和HTTP2支持的服务器通讯的过程中会有crash,见 React-Nat ...
- java之集合Collection详解之3
package cn.itcast_03; public class Student { // 成员变量 private String name; private int age; // 构造方法 p ...