Marketing
Hotjar
Hotjar is a screen recorder and heatmap tool that helps you understand how users interact with your website.
The simplest way to load Hotjar globally in your Nuxt App is to use Nuxt config. Alternatively you can directly use the useScriptHotjar composable.
Loading Globally
If you don't plan to send custom events you can use the Environment overrides to disable the script in development.
export default defineNuxtConfig({
scripts: {
registry: {
hotjar: {
id: 123456, // your id
}
}
}
})
export default defineNuxtConfig({
$production: {
scripts: {
registry: {
hotjar: {
id: 123456, // your id
}
}
}
}
})
export default defineNuxtConfig({
scripts: {
registry: {
hotjar: true,
}
},
// you need to provide a runtime config to access the environment variables
runtimeConfig: {
public: {
scripts: {
hotjar: {
id: 123456, // NUXT_PUBLIC_SCRIPTS_HOTJAR_ID
},
},
},
},
})
useScriptHotjar
The useScriptHotjar composable lets you have fine-grain control over when and how Hotjar is loaded on your site.
const { proxy } = useScriptHotjar({
id: 123546,
})
// example
proxy.hj('identify', 123456, {
name: 'John Doe',
email: '[email protected]'
})
Please follow the Registry Scripts guide to learn more about advanced usage.
HotjarApi
export interface HotjarApi {
hj: ((event: 'identify', userId: string, attributes?: Record<string, any>) => void)
& ((event: 'stateChange', path: string) => void)
& ((event: 'event', eventName: string) => void)
& ((event: string, arg?: string) => void)
& ((...params: any[]) => void) & {
q: any[]
}
}
Config Schema
You must provide the options when setting up the script for the first time.
export const HotjarOptions = object({
id: number(),
sv: optional(number()),
})
Example
Using Hotjar only in production while using hj to send a conversion event.
<script setup lang="ts">
const { proxy } = useScriptHotjar()
// noop in development, ssr
// just works in production, client
function sendConversion() {
proxy.hj('event', 'conversion')
}
</script>
<template>
<div>
<button @click="sendConversion">
Send Conversion
</button>
</div>
</template>
On this page