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

Nuxt Hotjar

トラッキングと分析のために、Hotjar を簡単にNuxtアプリケーションに追加できます。

✨ リリースノート

機能

🔥 HotjarをNuxtアプリケーションに簡単に追加
👮 データプライバシー
🏷️ 完全型指定
🦾 SSRサポート

設定

npx nuxi@latest module add hotjar

設定方法

nuxt.config.ts の modules セクションに nuxt-module-hotjar を追加し、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`	`数値`	`undefined`	Hotjar の `site_id`。
`scriptVersion`	`数値`	`6`	デフォルトは6です。変更する必要はありません。
`debug`	`ブール値`	`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