Nuxt Hotjar
轻松为你的 Nuxt 应用添加 Hotjar 以进行跟踪和分析。
功能特性
- 🔥 轻松为你的 Nuxt 应用添加 Hotjar
- 👮 数据隐私
- 🏷️ 完全类型化
- 🦾 SSR 支持
设置
npx nuxi@latest module add hotjar
配置
将 nuxt-module-hotjar 添加到 nuxt.config.ts 的 modules 部分，并提供你的 Hotjar 站点 ID 和脚本版本。
为了使 Nuxt Hotjar 运行，它需要使用你的站点 ID 初始化（这是我们模块中的 hotjarId）。你可以在此页面，就在你的站点名称之前找到你的站点 ID。
export default defineNuxtConfig({
modules: [
'nuxt-module-hotjar'
],
hotjar: {
hotjarId: 1234567,
scriptVersion: 6,
// optionally you can turn on debug mode for development
debug: true
}
})
基本用法
现在你必须使用组合式函数 useHotjar 在你的应用中初始化 Hotjar
// In you app.vue file for example when you user has given consent:
const { initialize } = useHotjar()
function onConsent() {
initialize()
}
组合式函数
useHotjar
SSR 安全的 useHotjar 组合式函数提供对以下内容的访问：
- 初始化方法
你可以像这样使用它
const { initialize } = useHotjar()
类型声明
function useHotjar(): {
initialize: () => void
}
模块选项
| 选项 | 类型 | 默认值 | 描述 |
|---|---|---|---|
hotjarId | number | undefined | 你的 Hotjar site_id。 |
scriptVersion | number | 6 | 默认值为 6，你没有必要更改它。 |
debug | boolean | false | 调试模式 |
鸣谢
开发
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release