Nuxt Hotjar
轻松地将 Hotjar 添加到您的 Nuxt 应用程序中，用于跟踪和分析。
功能
- 🔥 轻松将 Hotjar 添加到您的 Nuxt 应用程序中
- 👮 数据隐私
- 🏷️ 完全类型化
- 🦾 支持 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 | 数字 | 未定义 | 您的 Hotjar site_id。 |
scriptVersion | 数字 | 6 | 默认值为 6，您不需要更改它。 |
debug | 布尔值 | 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