hotjar
nuxt-module-hotjar

將 HotJar 新增到您的 Nuxt 應用程式
9.2K 下載6 星v1.3.4
damevindamevin

343866793-35f88f27-93d3-4fe1-9479-798414ea7353

Nuxt Hotjar

輕鬆將 Hotjar 新增到您的 Nuxt 應用程式中，用於跟蹤和分析。

npm versionnpm downloadsLicenseNuxt

功能

  • 🔥 輕鬆將 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
}

模組選項

選項型別預設描述
hotjarIdnumber未定義您的 Hotjar site_id。
scriptVersionnumber6預設值為 6，您不一定需要更改它。
除錯booleanfalse除錯模式

鳴謝

開發

# 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