Hyde Blog

主题

Hyde2025-04-06 10:18:09Teek
1028
4.5m
Get...

51.la统计 原创 ​

简介 ​

提示

为 VitePress 站点引入 51.la 的网站数据统计能力。

注册 ​

版权 ​

提示

本文是在 博主粥里有勺糖 文章：《为 VitePress 站点引入 51.la 的网站数据统计能力。》 基础上增加了自己实践过程的一些细节，转载无需和我联系，但请注明文章来源。如果侵权之处，请联系博主进行删除，谢谢~

安装 ​

sh
pnpm add vitepress-plugin-51la
sh
npm add vitepress-plugin-51la
sh
yarn add vitepress-plugin-51la

使用 ​

  • 在 docs\.vitepress\config.mts 中引入插件

    提示

    id 和 ck 为必填项，路径在 51.la 后台-配置-参数配置-统计代码-获取 SDK 追踪代码-同步安装（推荐）

    ts
    <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({id:"你的id",ck:"你的ck"})</script>
ts
import { defineConfig } from "vitepress";
import { La51Plugin } from "vitepress-plugin-51la";

export default defineConfig({
  vite: {
    // ↓↓↓↓↓
    plugins: [
      La51Plugin({
        id: "your-id",
        ck: "your-ck",
      }),
    ],
    // ↑↑↑↑↑
  },
});

构建 ​

构建后即可生效，自动向页面中注入51.la统计代码

sh
pnpm docs:build

验证 ​

提示

详情查看官方文档：点击跳转

自己配置 ​

提示

vite 插件配置和 head 配置任选其一即可

ts
vite: {
    // ↓↓↓↓↓
    plugins: [
      La51Plugin({
        id: "your-id", //动态掩码，防止 SDK 被盗刷
        ck: "your-ck", //一个网站多个统计 ID 的数据分离标识
        autoTrack: true, //开启事件分析功能,用于定义和追踪用户在产品（网站/APP等）上的各类行为，如点击、浏览、停留等。默认为false
        hashMode: true, // 开启单页面应用模式,如使用了Vue / React等框架构建的单页面应用网站，默认为true
        screenRecord: true, //开启屏幕录制功能,默认为false
        apply: "build", //'build' 构建时生效，'serve' 开发时生效，'all' 所有阶段生效
        importMode: "sync", //sync' 同步加载，'async' 异步加载，'old' 旧式安装
      }),
    ],
    // ↑↑↑↑↑
  },
ts
head: [
  // 添加 51.la 统计脚本
  [
    "script",
    {
      charset: "UTF-8",
      id: "LA_COLLECT",
      src: "//sdk.51.la/js-sdk-pro.min.js",
    },
  ],
  // 初始化统计脚本
  [
    "script",
    {},
    `
        // 等待页面加载完成后初始化
        window.addEventListener('DOMContentLoaded', () => {
          if (typeof LA !== 'undefined') {
            LA.init({
              id: 'xxxxxxxxx', // 您应用的统计掩码
              ck: 'xxxxxxxxxxxxx', // 您应用的固定key值
              autoTrack: true, //开启事件分析功能
              hashMode: true, // 开启单页面应用模式
              screenRecord: true, //开启屏幕录制功能,默认为false
            });
          }
        });
      `,
  ],
];

更多用法 ​

  • 构建开发都生效
ts
La51Plugin({
  id: "your-id",
  ck: "your-ck",
  apply: "all",
});
  • 异步引入
ts
La51Plugin({
  id: "your-id",
  ck: "your-ck",
  importMode: "async",
});
  • 完整配置
ts
export interface LA51PluginOptions {
  /**
   * 动态掩码，防止 SDK 被盗刷
   */
  id: string;
  /**
   * 一个网站多个统计 ID 的数据分离标识
   */
  ck: string;
  /**
   * 引入方式
   * @default 'sync'
   * @doc 'sync' 同步加载，'async' 异步加载，'old' 旧式安装
   */
  importMode?: "sync" | "async" | "old";
  /**
   * 生效阶段
   * @default 'build'
   * @doc 'build' 构建时生效，'serve' 开发时生效，'all' 所有阶段生效
   */
  apply?: "build" | "serve" | "all";
  /**
   * 开启事件分析功能
   * @default false
   */
  autoTrack?: boolean;
  /**
   * 使用单页面应用统计，如使用了Vue / React等框架构建的单页面应用网站
   * @default true
   */
  hashMode?: boolean;
  /**
   * 屏幕录制
   * @default false
   */
  screenRecord?: boolean;
  /**
   * 统计分析 SDK 地址
   * @default '//sdk.51.la/js-sdk-pro.min.js'
   */
  sdk?: string;
  /**
   * 事件分析 SDK Prefix
   *
   * 默认和SDK同域根目录
   * 详细说明见 https://www.yuque.com/dvqnxr/ztsh8g/ysygdp#MK9RJ
   */
  prefix?: string;
}

常见问题 ​

1.网站底部数据挂件没有显示数据？

  • docs\.vitepress\theme\components\TeekLayoutProvider.vue注册入口使用#layout-top插槽注册组件，保证 js 加载顺序
  • 请检查 id 和 ck 是否正确
  • 需在 body 标签内
  • 是否开启了域名强制匹配，可在51.la参数设置-基本信息统计域名和域名强匹配检查

更多常见问题请阅读 文档

最近更新