首页 > 其他分享 >给你的博客添加数据统计功能

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

时间:2024-07-13 11:53:45浏览次数:13  
标签:路由 博客 Analytics 添加 统计 百度 VuePress

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]);
      }
    }
    // continue
    next();
  });
};

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

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

然后点击检查:

​​​

网站分析

一般 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
      }
    ]
  ]
}

删除媒体资源

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

​​

谷歌还是百度?

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

参考

标签:路由,博客,Analytics,添加,统计,百度,VuePress
From: https://www.cnblogs.com/PeterJXL/p/18299899

相关文章

  • 识别视频中的人数并统计出来
    目的:使用Python和pysimpleguil以及opencv写一个统计人流量的软件。要求:1加载选定的视频2通过形态学特征识别人,3统计人数并且在界面上显示出来,4保存识别出人数的信息。步骤1:安装必要的库首先,确保你已经安装了Python。然后,安装PySimpleGUI和OpenCV。你可以使用pip来安......
  • 【学习记录】”搭建属于自己的博客论坛“
        我们这里搭建的博客论坛是Discuz论坛。    1.准备前置工作        Discuz论坛安装在Linux的CentOS7上(这里暂时不考虑买服务器,因为买了的效果和我接下来学习的步骤基本类似,如果有需要可自行购买。)对于纯小白来说我们的前置工作是下载一个VMware......
  • 动态添加HTML时onclick函数参数传递
    onclick函数动态传参1.参数为数值类型时:var tmp=123;var strHTML="<divonclick=func(" +tmp+")>点击弹出数据及其类型</div>";info.append(strHTML); function func(tmp){    alert(typeof tmp+"" +tmp);}string12......
  • 利用Python实现分析给定文本字符串中的字符统计信息
    设计一个名为TextAnalyzer的Python类,该类用于分析给定文本字符串中的字符统计信息。类应具有以下功能:初始化:类初始化时接受一个字符串参数text,并将其存储为类的属性。字符计数:实现一个方法count_characters(),返回一个字典,其中键为文本中出现的不同字符(包括空格和标点符......
  • <c++>斗破苍穹游戏(转载·博客园)喜欢的一键三连~
    #include<stdio.h>#include<ctime>#include<time.h>//suiji#include<windows.h>//SLEEP函数structPlayer//玩家结构体,并初始化player{charname[21];intattack;intdefense;inthealth;longintmax_health;intlevel;intexp;intrange_exp;......
  • WordPress给网站右侧边栏添加百度一下协助SEO优化
    前言大家在做网站的时候,seo会是一个问题,我们可以让用户在浏览我们网站的时候协助我们seo废话不多说,先看一下成品是什么样子的吧!效果演示作用这个小工具可以协助网站优化百度SEO,让用户在浏览我们网站的时候协助我们seo,最早是在emlog程序才有的,现在WordPress程序也是......
  • 【期末考试复习】概率论与数理统计(知识点模式 - 复习题2)
    题目:设随机变量XXX的概率密度函数为f(x......
  • Java怎么统计每个项目下的每个类别的数据
    为了演示如何在Java中统计每个项目下的每个类别的数据,我们可以考虑一个简单的场景:假设我们有一个电商系统,需要统计每个商品分类在每个店铺下的销售数量。这里我们将使用Java的集合框架,如HashMap和ArrayList,来存储和统计数据。1.使用Java的集合框架HashMap和ArrayList来存储和统计......
  • 从0开始搭建博客
    1.概述本篇博客,我教大家从0开始搭建一个bolo博客,bolo博客和solo博客的区别是皮肤更加多,并且可以帐号密码登录。本篇博客主要的内容如下:linux安装docker,设置docker镜像加速docker安装nginxdocker的一些常用的命令docker安装mysql数据库docker安装solo博客......
  • docker 添加字体
    一、安装Arial字体安装fontconfig$RUNapt-getupdate&&apt-getinstall-yfontconfig获取字体window系统ttf文件、目录拷贝至项目Arial:C:\Windows\Fonts\ArialSTSONG:C:\Windows\Fonts\STSONG.TTF在线下载ArialSTSONG拷贝Arial字体$CO......