hotjar
nuxt-module-hotjar

NuxtアプリケーションにHotJarを追加
9.2Kダウンロード6スターv1.3.4
damevindamevin

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

Nuxt Hotjar

あなたのNuxtアプリケーションに、トラッキングとアナリティクス用のHotjarを簡単に追加できます。

npm versionnpm downloadsLicenseNuxt

機能

  • 🔥 NuxtアプリケーションにHotjarを簡単に追加
  • 👮 データプライバシー
  • 🏷️ 完全な型付け
  • 🦾 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コンポーザブルは以下へのアクセスを提供します。

  • initializeメソッド

このように使うことができます。

const { initialize } = useHotjar()

型宣言

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

モジュールオプション

オプションタイプデフォルト説明
hotjarIdnumber未定義Hotjarのsite_id。
scriptVersionnumber6デフォルトは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