给你的博客添加数据统计功能

20.数据统计

我们可以给博客添加统计功能,这里以百度统计和谷歌统计为例。

百度统计

添加网站

登陆百度统计后台:百度统计——一站式智能数据分析与应用平台,并登录,然后进入产品:

在这里插入图片描述

在使用设置–网站列表中,点击新增网站:

在这里插入图片描述

添加网站域名、网站首页等信息:

在这里插入图片描述

引用代码

添加完后,会自动跳转到代码获取页面,我们可以看到根据我们填写的站点信息生成的监控代码,注意这段代码是有特殊标示的,你需要根据自己的站点信息生成并使用:

在这里插入图片描述

在这里插入图片描述

接下来就是引用代码了。由于 VuePress 是一个单页面应用,切换的过程并不会加载页面,也就不会触发百度统计;因此我们需要监听路由的改变,手动上传数据。而 VuePress 是基于 Vue 的,可以配置监听路由:应用级别的配置

由于 VuePress 是一个标准的 Vue 应用,你可以通过创建一个 .vuepress/enhanceApp.js 文件来做一些应用级别的配置,当该文件存在的时候,会被导入到应用内部。enhanceApp.js 应该 export default 一个钩子函数,并接受一个包含了一些应用级别属性的对象作为参数。你可以使用这个钩子来安装一些附加的 Vue 插件、注册全局组件,或者增加额外的路由钩子等:

// 使用异步函数也是可以的
export default ({
Vue, // VuePress 正在使用的 Vue 构造函数
options, // 附加到根实例的一些选项
router, // 当前应用的路由实例
siteData, // 站点元数据
isServer // 当前应用配置是处于 服务端渲染 或 客户端
}) => {
// ...做一些其他的应用级别的优化
}

VuePress 的路由是用 Vue Router,我们可以配置一个全局前置守卫。怎么手动上传数据呢?这个我们可以查看百度统计的文档,有讲到针对这种单页应用如何在 JS 中调用 PV 跟踪代码:

_hmt.push(['_trackPageview', pageURL]); // pageURL:指定要统计PV的页面URL。此项必选。

总结,我们在 .vuepress 文件夹下新建一个 enhanceApp.js 文件,代码写入:

export default ({ router }) => {/*** 路由切换事件处理*/router.beforeEach((to, from, next) => {//触发百度的pv统计if (typeof _hmt != "undefined") {if (to.path) {_hmt.push(["_trackPageview", to.fullPath]);}}// continuenext();});
};

现在我们在本地再运行下代码,然后点击文章,包括点击文章中的锚点,在控制台查看网络请求,可以看到上报了数据:

在这里插入图片描述

部署后,我们也可以在百度统计后台检查:

在这里插入图片描述

然后点击检查:

在这里插入图片描述

网站分析

一般 20 分钟后,可以查看网站分析数据:
在这里插入图片描述

pv 即 page view,表示页面浏览量

谷歌统计

谷歌统计和百度统计类似,也是差不多的步骤。登陆谷歌分析后台,如果是第一次登陆,会跟着指示创建账号,所谓账号,通常是一个公司或者组织:

在这里插入图片描述

创建账户分 3 步:

  1. 账号开设
  2. 媒体资源设置
  3. 关于您的商家

注意:随着时间的推移,创建账户的步骤可能不同,仅供参考。

添加媒体资源

首先是账号开设,先填个账户名称然后下一步

在这里插入图片描述

接下来添加媒体资源,所谓媒体资源,一般就是指网站或 APP,你也可以理解为百度的站点,每个媒体资源都有一个唯一的追踪 ID,就是我们要拿到的 ga(Google Analytics 的缩写)。

在添加媒体资源的时候,一定要注意,我们需要点击 「查看高级选项」,打开创建 「Universal Analytics 媒体资源」开关,至于是勾选 「同时创建 Google Analytics 4 和 Universal Analytics」 还是「仅创建 Universal Analytics」则都可以。

在这里插入图片描述

第三步然后按需选择,然后创建:

在这里插入图片描述

最后同意服务条款:

在这里插入图片描述

然后我们就可以看到 GA 了:

在这里插入图片描述

在这里插入图片描述

VuePress 配置

VuePress 直接提供了 @vuepress/plugin-google-analytics​ 插件,使用该插件,无须我们手动监听路由改变,上节所说的三种情形下都会触发数据上报。

我们直接参照 官方文档 进行安装:

yarn add -D @vuepress/plugin-google-analytics
# OR npm install -D @vuepress/plugin-google-analytics

注意:如果你的项目正在使用 Google analytics 插件,推荐使用 Yarn 而不是 npm 来安装所有依赖。因为在这种情形下,npm 会生成错误的依赖树。

JS 配置:

module.exports = {plugins: [['@vuepress/google-analytics',{'ga': '' // UA-00000000-0}]]
}

删除媒体资源

如果你添加错了,可以删除:

在这里插入图片描述

在这里插入图片描述

谷歌还是百度?

至于使用谷歌还是百度,因人而异,在国内,谷歌因为一些原因,会导致加载速度降低,当然你也可以两者都用。

参考

  • Google Analytics 分析(GA)是什么?为什么全世界都在用? - 知乎
  • 如何获取 GA(Google Analytics 的简称)统计代码? - 江门市美誉网络技术有限公司

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/46825.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

图解KMP算法,带你彻底吃透KMP

模式串匹配——KMP算法 KMP算法一直是一个比较难以理解的算法,本篇文章主要根据《大话数据结构》中关于KMP算法的讲解,结合自己的思考,对于KMP算法进行一个比较详细的解释。 由于博主本人水平有限,难免会出现一些错误。如果发现…

WPF学习(7) --MVVM模式

1. MVVM模式概述 MVVM模式由三个主要部分组成: Model(模型):包含应用程序的业务逻辑和数据。通常是数据对象和数据访问层。View(视图):用户界面部分,展示数据并与用户进行交互。通…

C语言课程回顾:十、C语言之 指针

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 C语言之 指针 10 指针10.1 地址指针的基本概念10.2 变量的指针和指向变量的指针变量10.2.1 定义一个指针变量10.2.2 指针变量的引用10.2.3 指针变量作为函数参数10.2.4 指针变…

电脑远程开关机

1. 远程开机 参考:https://post.smzdm.com/p/664774/ 1.1 Wake On LAN - 局域网唤醒(需要主板支持,一般都支持) 要使用远程唤醒,有几种方式:使用类似向日葵开机棒(很贵)、公网ip&…

MongoDB教程(六):mongoDB复制副本集

💝💝💝首先,欢迎各位来到我的博客,很高兴能够在这里和您见面!希望您在这里不仅可以有所收获,同时也能感受到一份轻松欢乐的氛围,祝你生活愉快! 文章目录 引言一、MongoD…

如何给woocommerce订单列表加上产品图片的参数列

在WooCommerce中,由于订单列表(如订单管理页面上的列表)通常是通过管理界面(admin dashboard)的模板和PHP逻辑来呈现的,而不是通过前端的模板,因此直接在订单列表中显示产品图片需要一些自定义的…

使用Bind提供的域名解析服务

前言:本博客仅作记录学习使用,部分图片出自网络,如有侵犯您的权益,请联系删除 目录 一、DNS域名解析服务 二、安装Bind服务程序 1、正向解析 2、反向解析 三、部署从服务器 四、安全的加密传输 五、部署缓存服务器 六、分…

浅析班组建设在企业发展中的重要作用

众所周知,企业的成功与否往往取决于其内部管理的精细化和团队的高效协作。而班组作为企业最基层的管理单元,其建设质量直接关系到企业的整体运营效率和竞争力。今天,深圳天行健企业管理咨询公司将从多个维度分析班组建设在企业发展中的重要作…

Jetson-AGX-Orin gstreamer+rtmp+http-flv 推拉流

Jetson-AGX-Orin gstreamerrtmphttp-flv 推拉流 Orin是ubuntu20.04 ARM64架构的系统,自带gstreamer 1、 测试摄像头 测试摄像头可以用v4l2-ctl命令或者用gst-launch-1.0 #用v4l2-ctl测试摄像头,有尖角符号持续打印则正常 v4l2-ctl -d /dev/video0 --set-fmt-vid…

Hadoop:HDFS-磁盘读写速度检测(实用)

1、下载工具 sudo yum install -y fio2、顺序读测试 sudo fio -filename/home/atguigu/test.log -direct1 -iodepth 1 -thread -rwread -ioenginepsync -bs16k -size2G -numjobs10 -runtime60 -group_reporting -nametest_r结果 Run status group 0 (all jobs):READ: bw360M…

【Kylin】Kylin入门

1. Kylin介绍 Apache Kylin是一个开源的、分布式的分析型数据仓库,它提供在Hadoop/Spark之上的SQL查询接口以及多维分析(OLAP)能力,用于支持超大规模数据。最初由eBay开发并贡献至开源社区。Kylin特别适用于大数据环境&#xff0…

【Python】深入了解 defaultdict:轻松处理默认值与复杂数据结构

文章目录 1. 深入理解 Python 中的 defaultdict:简化数据结构处理的利器2. defaultdict 基础概念3. 创建 defaultdict 实例3.1 基本用法3.2 使用其他工厂函数 4. defaultdict 的应用场景4.1 计数器4.2 分组数据 5. defaultdict 的高级用法5.1 嵌套 defaultdict5.2 自…

为什么流程图在项目管理中如此重要?

在我们的日常学习生活中,是不是感觉工作复杂繁琐,知识杂乱无章呢?那么流程图能够完美的解决这个问题,本文将会用一篇文章告诉你什么是流程图,流程图简单来说就是一种以图形方式表示算法、工作流程或过程的图表&#xf…

云服务器重置密码后,xshell远程连接不上,重新启用密码登录方式

云服务器重置密码后 ,xshell连接出现不能使用密码登录 解决方案:以下来自阿里云重新启用密码登录方式帮助文档 为轻量应用服务器创建密钥且重启服务器使密钥生效后,服务器会自动禁止使用root用户及密码登录。如果您需要重新启用密码登录方式&…

零基础自学爬虫技术该从哪里开始入手?

零基础自学爬虫技术可以从以下几个方面入手: 一、学习基础编程语言 Python 是爬虫开发的首选语言,因此首先需要学习 Python 编程语言的基础知识。这包括: 语法基础:学习 Python 的基本语法,如变量定义、数据类型、控…

数据结构-java中链表的存储原理及使用方式

目录 链表(线性表的链式存储) 代码实例:(链表构建,头插尾插) LinkedList LinkedList的使用: 1、构造方法 2、操作方法 LinkedList 和 ArrayList 的区别 链表(线性表的链式存储…

基于python的图像去水印

1 代码 import cv2 import numpy as npdef remove_watermark(image_path, output_path):# 读取图片image cv2.imread(image_path)# 转换为灰度图gray cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)# 使用中值滤波去除噪声median_filtered cv2.medianBlur(gray, 5)# 计算图像的梯…

windows11安装qemu启动树莓派2b连接网卡和openssh-server

》》。下载window下的tap驱动 下载tap-window6(https://github.com/OpenVPN/tap-windows6/releases/download/9.26.0/dist.win7.zip) 》》。下载树莓派2b的img镜像 树莓派(raspberry pi)学习9: Qemu虚拟机联网(主机和虚拟机互访、虚拟机可上网)_qemu …

PyCharm 查找功能指南

1. 在文件内查找 1.1 快捷键:Ctrl F 在当前文件中查找文本时,可以使用快捷键 Ctrl F 来打开查找对话框。输入要查找的文本后,PyCharm 会高亮显示所有匹配的结果,并允许你逐个导航。 1.1.1 实用技巧 智能匹配: PyCh…

【Python学习笔记】:Python爬取音频

【Python学习笔记】:Python爬取音频 背景前摇(省流可以不看): 人工智能公司实习,好奇技术老师训练语音模型的过程,遂请教,得知训练数据集来源于爬取某网页的音频。 很久以前看B站同济子豪兄的《…