营销
Clarity
在您的 Nuxt 应用中使用 Clarity。
Clarity 由微软提供，是一个屏幕录像和热图工具，可帮助您了解用户如何与您的网站互动。
Nuxt 脚本提供了一个注册表脚本可组合函数 useScriptClarity 以便轻松地在您的 Nuxt 应用中集成 Clarity。
在您的 Nuxt 应用中全局加载 Clarity 的最简单方法是使用 Nuxt 配置。或者，您可以直接使用 useScriptClarity 可组合函数。
全局加载
如果您不打算发送自定义事件，可以使用 环境覆盖 在开发过程中禁用脚本。
export default defineNuxtConfig({
scripts: {
registry: {
clarity: {
id: 'YOUR_ID'
}
}
}
})
useScriptClarity
useScriptClarity 可组合函数让您能够对 Clarity 在您的网站上的加载时间和方式进行细粒度控制。
const { proxy } = useScriptClarity({
id: 'YOUR_ID'
})
// example
proxy.clarity("identify", "custom-id", "custom-session-id", "custom-page-id", "friendly-name")
请遵循 注册表脚本 指南以了解有关高级用法的更多信息。
ClarityApi
type ClarityFunctions = ((fn: 'start', options: { content: boolean, cookies: string[], dob: number, expire: number, projectId: string, upload: string }) => void)
& ((fn: 'identify', id: string, session?: string, page?: string, userHint?: string) => Promise<{
id: string
session: string
page: string
userHint: string
}>)
& ((fn: 'consent') => void)
& ((fn: 'set', key: any, value: any) => void)
& ((fn: 'event', value: any) => void)
& ((fn: 'upgrade', upgradeReason: any) => void)
& ((fn: string, ...args: any[]) => void)
export interface ClarityApi {
clarity: ClarityFunctions & {
q: any[]
v: string
}
}
配置模式
首次设置脚本时，您必须提供选项。
export const ClarityOptions = object({
/**
* The Clarity token.
*/
id: pipe(string(), minLength(10)),
})
示例
仅在生产环境中使用 Clarity，同时使用 clarity 发送转换事件。
<script setup lang="ts">
const { proxy } = useScriptClarity()
// noop in development, ssr
// just works in production, client
function sendConversion() {
proxy.clarity('event', 'conversion')
}
</script>
<template>
<div>
<button @click="sendConversion">
Send Conversion
</button>
</div>
</template>