页面应用访问统计

1.应用场景

用于页面应用访问统计, 包括多页面和单页面.

2.学习/操作

开发环境:

Windows10 64位 专业版

laravel 5.8 / 6.x

Google Analytics

百度统计 见: https://blog.csdn.net/william_n/article/details/103799044

 

这里使用Google Analytics 对单页面访问进行统计 . 这里只是实践, 有的地方暂时还没搞清楚, 确定.

 

1. 介绍

由于单页面应用访问不同链接不会刷新页面,我们要如何通过页面访问统计工具统计用户对不同页面的访问呢?

接下来,我们以 Google Analytics 为例为你演示单页面应用的访问统计实现。

Google Analytics 是一个网站/应用访问统计工具,国内的对标产品有百度统计、CNZZ 站长统计之类.

如果你没有用过 Google Analytics 的话,首先需要去官网注册一个 Google Analytics 账号:https://analytics.google.com。

注册成功后,在管理页面创建一个新的账号.

 

2.操作

2.1 打开 Google Analytics https://analytics.google.com

页面应用访问统计_第1张图片

 

2.2 注册账号

页面应用访问统计_第2张图片

2.3 选择测量的平台类型, 这里选择了web+app  仍为测试版本

页面应用访问统计_第3张图片

 

2.4 选择 分类, 以及时区, 显示货币单位

页面应用访问统计_第4张图片

2.5 勾选条框,  然后点击'我接受'

页面应用访问统计_第5张图片

结果跳转到该页面

页面应用访问统计_第6张图片

 

2.6 这里先选择 'web', 点击进入如下页面, 输入信息, 创建stream.

页面应用访问统计_第7张图片

 

2.7 点击获取刚才创建的stream

页面应用访问统计_第8张图片

出现如下页面  //重要的信息: MEASUREMENT ID G-02SXXXXX

页面应用访问统计_第9张图片

2.8 将上面的红色部分的代码作为第一项复制并粘贴到要测量的每个网页的中。



这里是单页面, 将上面文本框中的 JS 代码插入到 resources/views/app.blade.php 的  标签之前

如下: 

页面应用访问统计_第10张图片

 

然后我们需要配置 Roast 应用的 Vue Router 支持 Google Analytics,在 resources/assets/js/app.js 文件末尾添加如下代码:

resources/assets/js/app.js  //备注://这里似乎不用, 因为即便不加上,也是可以统计访问数据, 但是可能只是统计到了一个页面的访问 TBD, 这里先加上.

页面应用访问统计_第11张图片

code

gtag('set', 'page', router.currentRoute.path);
gtag('send', 'pageview');

router.afterEach((to, from) => {
    gtag('set', 'page', to.path);
    gtag('send', 'pageview');
});
 

2.9 测试结果

打开Google Analytics的home侧边导航, 这里链接 https://analytics.google.com/analytics/web/#/p220321347/reports/home?params=_u..nav%3Dga1-experimental, 如下:

页面应用访问统计_第12张图片

中文翻译参考:

页面应用访问统计_第13张图片

使用不同浏览器登录应用访问,出现两个访问用户。

页面应用访问统计_第14张图片

 

可以看到, 已经统计到用户访问相关信息.

 

具体更多用法, 调研并实践后补充.

 

 

 

后续整理

...

3.问题

TBD

4.参考

https://xueyuanjun.com/post/9635.html,修复多个点标记窗体  //优化高德地图多个点标记信息窗体显示 & 引入 Google Analytics 进行单页面应用访问统计

https://analytics.google.com  //Google Analytics 官网

https://blog.csdn.net/william_n/article/details/104001798  //help to work

http://www.chinawebanalytics.cn/谷歌分析,你的中文翻译可以严谨一些吗/  //一些中文翻译的问题.

后续补充

...
 

你可能感兴趣的:(功能场景-FUNCTIONAL,SCENARIO)