营销
Hotjar
在您的 Nuxt 应用程序中使用 Hotjar。
Hotjar 是一款屏幕录制和热图工具，可帮助您了解用户如何与您的网站互动。
在您的 Nuxt 应用程序中全局加载 Hotjar 的最简单方法是使用 Nuxt 配置。或者，您可以直接使用 useScriptHotjar 可组合项。
全局加载
如果您不打算发送自定义事件，则可以使用 环境覆盖 在开发中禁用脚本。
export default defineNuxtConfig({
scripts: {
registry: {
hotjar: {
id: 123456, // your id
}
}
}
})
useScriptHotjar
可组合项 useScriptHotjar 使您可以精细控制 Hotjar 何时以及如何在您的网站上加载。
const { proxy } = useScriptHotjar({
id: 123546,
})
// example
proxy.hj('identify', 123456, {
name: 'John Doe',
email: '[email protected]'
})
请遵循 注册表脚本 指南以了解有关高级用法的更多信息。
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[]
}
}
配置模式
您必须在首次设置脚本时提供选项。
export const HotjarOptions = object({
id: number(),
sv: optional(number()),
})
示例
仅在生产环境中使用 Hotjar，同时使用 hj 发送转换事件。
<script setup lang="ts">
const { hj } = useScriptHotjar()
// noop in development, ssr
// just works in production, client
function sendConversion() {
hj('event', 'conversion')
}
</script>
<template>
<div>
<button @click="sendConversion">
Send Conversion
</button>
</div>
</template>