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 | 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