Skip to content

VitePress 使用百度统计

介绍

百度统计是百度推出的一款稳定、专业、安全的数据统计与分析工具,旨在为web系统管理者提供权威、准确、实时的流量质量和访客行为分析,助力日常指标监控,并为系统优化、提升投资回报率等目标提供指导。

一、主要功能

  1. 流量分析

    • 用户可以通过百度统计查看一段时间内用户网站的流量变化趋势,及时了解网民对用户网站的关注情况及各种推广活动的效果。
  2. 来源分析

    • 用户可以通过百度统计了解各种来源类型给用户网站带来的流量情况,包括搜索引擎(精确到具体搜索引擎、具体关键词)、推介网站、直达等。通过来源分析,用户可以及时了解到哪种类型的来源给用户带来更多访客。
  3. 网站分析

    • 用户可以通过百度统计查看访客对用户网站内各个页面的访问情况,及时了解哪些页面最吸引访客以及哪些页面最容易导致访客流失,从而帮助用户更有针对性地改善网站质量。
  4. 推广效果监控

    • 百度统计与百度推广完美结合,用户无需设置任何额外参数,即可直接监控到最细粒度的推广点击效果。对于其他渠道的投放、推广效果,百度统计也提供了指定广告跟踪方式,通过utm加码方式即可完成监控部署。
  5. 定制分析

    • 通过统计中页面上下游、转化路径等定制分析,定位访客流失环节,有针对地查漏补缺。后续通过热力图等工具有效地分析点击分布和细分点击属性,摸清访客行为,提升网站吸引力和易用性。

详细教程

一、准备

  • 需要有一个的账号。

二、获取百度统计代码

登录百度统计账号后,按照以下步骤获取统计代码: alt text 新增网站完成后,复制统计代码到网站head alt text

这串代码就能够为我们收集网站访问的各种数据。

三、在 VitePress 中集成百度统计代码

在站点配置head中放百度统计代码块。

配置文件:docs/.vitepress/config.mts

首先,在站点的配置文件中添加百度统计的脚本标签到每个页面的<head>部分。

javascript
import { defineConfig } from 'vitepress';

export default defineConfig({
    head: [
        // 注入百度统计代码
        ['script',
            {},
            `var _hmt = _hmt || [];(function() {var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?2XXXXXXXXXXXX";
            var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();`
        ],
    ],
    // 其他配置项...
});

自定义主题文件:docs/.vitepress/theme/index.ts

接下来,在自定义主题文件中添加路由监听事件,以便在单页面应用(SPA)中正确统计页面访问。

javascript
import DefaultTheme from 'vitepress/theme';

export default {
    extends: DefaultTheme,
    enhanceApp({ app, router }) {
        // 监听路由变化,触发百度统计事件
        router.onBeforeRouteChange = (to) => {
        if (typeof _hmt !== 'undefined') {
            _hmt.push(['_trackPageview', to]);
            }
        }
    }
};

四、检查与验证

  1. 部署站点:确保您的站点已经部署并可以通过网络访问。
  2. 访问页面:通过不同的浏览器和设备访问您的站点,模拟用户行为。 alt text
  3. 检查百度统计后台:登录百度统计后台,查看是否有新的访问数据记录。确保每个页面的访问都被正确统计。 alt text