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

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

基本用法

現在您必須使用 composable useHotjar 在您的應用程式中初始化 Hotjar

// In you app.vue file for example when you user has given consent:

const { initialize } = useHotjar()

function onConsent() {
  initialize()
}

Composables

`useHotjar`

SSR 安全的 useHotjar composable 提供對以下項目的訪問：

初始化方法

您可以像這樣使用它

const { initialize } = useHotjar()

類型宣告

function useHotjar(): {
  initialize: () => void
}

模組選項

選項	類型	預設值	描述
`hotjarId`	`number`	`未定義`	您的 Hotjar `site_id`。
`scriptVersion`	`number`	`6`	預設值為 6，您不一定需要更改它。
`debug`	`boolean`	`false`	偵錯模式

鳴謝

@hotjar/browser

開發

# 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