多龙-插孔-乌米
仅限生产
这个插件在开发中总是不活跃的,只活跃于生产,以避免污染分析统计.
安装
Npm 安装插件 :
npm install --save @dipakparmar/docusaurus-plugin-umami
或带线:
yarn add @dipakparmar/docusaurus-plugin-umami
或带pnm:
pnpm install @dipakparmar/docusaurus-plugin-umami
或带面包:
bun install @dipakparmar/docusaurus-plugin-umami
配置
添加插件和网站ID及分析域 docusaurus.config.js数字 :
module.exports = {
plugins: [
[
"@dipakparmar/docusaurus-plugin-umami",
/** @type {import('@dipakparmar/docusaurus-plugin-umami').Options} */
({
websiteID: "your-website-id", // Required
analyticsDomain: "analytics.mydomain.com", // Required
scriptName: "script.js", // Optional, defaults to script.js
dataHostURL: "", // Optional
dataAutoTrack: true, // Optional, defaults to true
dataDoNotTrack: false, // Optional, defaults to false
dataCache: false, // Optional, defaults to false
dataDomains: "", // Optional, comma separated list of domains, *Recommended*
dataExcludeSearch: false, // Optional, defaults to false
dataExcludeHash: false, // Optional, defaults to false
dataTag: "", // Optional
dataBeforeSend: "beforeSendHandler", // Optional
enableRecorder: false, // Optional, defaults to false. Loads recorder.js for session replays & heatmaps
}),
],
],
};
选项
接受字段 :
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
websiteID | string | 需求 | 独有的网站ID 从你的Umami分析. |
analyticsDomain | string | 需求 | 你负责的Umami分析器所在区域. |
scriptName | string | script.js | 您的自定义跟踪脚本名称 . |
dataHostURL | string | 默认情况下, Umami 会将数据发送到脚本所在的地方. 您可以覆盖此数据以发送到另一个位置 . | |
dataAutoTrack | boolean | true | 默认情况下, Umami 自动跟踪所有页面视图和事件 。 您可以使用 tracker 函数禁用此行为并跟踪事件 . |
dataDoNotTrack | boolean | false | 配置 Umami 以尊重访问者的 Do Not track 设置 . |
dataCache | boolean | false | 如果从同一个用户那里获得很多页面视图,例如在论坛网站上,可以缓存一些数据来提高跟踪脚本的性能. |
dataDomains | string | 如果您希望跟踪器只运行在特定域上,可以将其添加到跟踪器脚本中. 这是一个已划定域名的逗号列表. 如果您在中程/ 开发环境中工作, 将会有所帮助 . | |
dataExcludeSearch | boolean | false | 配置跟踪器以不记录URL中的查询参数. |
dataExcludeHash | boolean | false | 配置跟踪器以不记录 URL 散列 . |
dataTag | string | 添加一个 标签 到您网站的数据进行分解(例如A/B测试). | |
dataBeforeSend | string | 定义在发送数据前要调用的函数 。 用于在数据发送到服务器前修改数据. | |
enableRecorder | boolean | false | 装入 Umami 的 recorder.js 要启用的脚本 会话重放 财务报告和审定财务报表 热映射。其中哪一个被记录在 Umami 仪表板上 切入每个网站. |
autoIdentify | boolean | false | 指定一个稳定的匿名身份(长期存在于 localStorage因此,访问者的会议通过 身份识别。 。 。 . 见下文隐私说明. Honors Do Not track / Global 隐私控制 . |
autoIdentifyStorageKey | string | umami.anonymous-id | localStorage 用于坚持 autoIdentify 匿名身份证. |
自定义事件跟踪
追踪器装入后,即可录入 自定义事件 两条路.
数据属性( 无 JS)
添加 data-umami-event (和可选) data-umami-event-*对任何要素:
<button data-umami-event="Signup" data-umami-event-plan="pro">
Sign up
</button>
输入客户端帮助器
从 /client 输入一个安全,输入的 API 。 在SSR期间和被推迟的跟踪器脚本装入之前的帮助者没有操作,所以他们可以安全地呼叫任何地方:
import {
track,
identify,
useUmami,
} from "@dipakparmar/docusaurus-plugin-umami/client";
// Fire a custom event
track("Signup", { plan: "pro" });
// Assign a distinct id to the session — https://docs.umami.is/docs/distinct-ids
identify({ id: "[email protected]" });
// Inside a React component
function SignupButton() {
const { track } = useUmami();
return <button onClick={() => track("Signup", { plan: "pro" })}>Sign up</button>;
}
两种方法都在内部运作 .mdx 文件 - data-umami-event 属性通过,你可以 import 文件顶端的帮手。 因为帮助者在服务器侧面渲染时没有操作,因此在Docusaurus提前回复您的页面时,他们可以安全拨打(useUmami() 是一个钩子,所以在MDX doc上方或一个组件内部称呼它,而不是有条件的.
标记 通过
dataTag选项data-tag脚本属性,而不是跟踪 API —— 参见 Umami 标签。 。 。 .
匿名会话分组autoIdentify(中文(简体) )
设定 autoIdentify: true 要让插件在第一次访问时生成随机的ID, 请坚持 localStorage,以及 identify() 它在每一个负载上——所以一个访客的会话被分组在一起(同一个浏览器=同一个ID). 它的选入和荣誉 Do Not track / Global 隐私控制.
⚠️ 隐私. 持久的识别特征是GDPR/ePrivacy下的个人数据以及一般数据 需要用户同意 ——使这否定了由美默认的无饼干,无同意的姿态. 使用
localStorage而不是饼干 没有 改变这一点;法律待遇相同。 您负责获得必要的同意.同意办法,请假
autoIdentify关闭和呼叫identify()从/client在你同意后进入你自己.
参考:
- Docusuarus 插件读取示例 https://github.com/sgromkov/docusaurus-plugin-yandex-metera (英语)
- 插件结构 : https://docusaurus.io/docs/api/plugin-methods#实例
- Umami 分析跟踪器配置 : https://umami.is/docs/tracker-confignation (英语)