开发环境:
![页面应用访问统计 - GA [Google Analytics]](http://www.xhstdz.com/file/upload/image/214.jpg "页面应用访问统计 - GA [Google Analytics]")
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
2.2 注册账号
2.3 选择测量的平台类型, 这里选择了web+app 仍为测试版本
2.4 选择 分类, 以及时区, 显示货币单位
2.5 勾选条框, 然后点击'我接受'
结果跳转到该页面
2.6 这里先选择 'web', 点击进入如下页面, 输入信息, 创建stream.
2.7 点击获取刚才创建的stream
出现如下页面 //重要的信息: MEASUREMENT ID G-02SXXXXX
2.8 将上面的红色部分的代码作为第一项复制并粘贴到要测量的每个网页的<head>中。
<!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-02XXXXX"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date());
gtag('config', 'G-02S9FZP6ZG'); </script>
这里是单页面, 将上面文本框中的 JS 代码插入到 的 标签之前
如下:
然后我们需要配置 Roast 应用的 Vue Router 支持 Google Analytics，在 文件末尾添加如下代码：
resources/assets/js/app.js //备注：//这里似乎不用, 因为即便不加上,也是可以统计访问数据, 但是可能只是统计到了一个页面的访问 TBD， 这里先加上.
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, 如下:
中文翻译参考:
使用不同浏览器登录应用访问，出现两个访问用户。
可以看到, 已经统计到用户访问相关信息.
具体更多用法, 调研并实践后补充.
后续整理