同意管理 - Nuxt Scripts 中文文档

尝试在 StackBlitz 上的实时示例：Cookie 同意示例或细粒度同意示例。

背景

许多第三方脚本包含根据隐私法规需要用户同意的跟踪 Cookie。Nuxt Scripts 通过 useScriptTriggerConsent 组合函数简化了此过程，允许仅在获得用户同意后加载脚本。

用法

useScriptTriggerConsent 组合函数提供灵活的交互选项，适用于各种场景。

完整可用选项请参见 API 文档。

以函数形式接受

使用 useScriptTriggerConsent 的最简单方式是在用户同意时调用 accept 方法。

以下示例展示了如何编写代码来处理该流程：

export const agreedToCookiesScriptConsent = useScriptTriggerConsent()

<script setup lang="ts">
import { agreedToCookiesScriptConsent } from '#imports'

useScript('https://www.google-analytics.com/analytics.js', {
  trigger: agreedToCookiesScriptConsent
})
</script>

<script setup lang="ts">
import { agreedToCookiesScriptConsent } from '#imports'
</script>

<template>
  <button @click="agreedToCookiesScriptConsent.accept()">
    接受 Cookies
  </button>
</template>

以可解析布尔值接受

另外，你可以将一个响应式引用传递给同意状态给 useScriptTriggerConsent 组合函数。当同意状态为 true 时，脚本将自动加载。

const agreedToCookies = ref(false)
useScript('https://www.google-analytics.com/analytics.js', {
  trigger: useScriptTriggerConsent({
    consent: agreedToCookies
  })
})

在同意后延迟加载脚本

有时你可能希望在特定事件后再触发脚本加载，且仅在用户已同意时加载。

此时可以使用 postConsentTrigger，它的 API 与 useScript 组合函数中的 trigger 相同。

const agreedToCookies = ref(false)
useScript('https://www.google-analytics.com/analytics.js', {
  trigger: useScriptTriggerConsent({
    consent: agreedToCookies,
    // 用户同意后延迟 3 秒加载
    postConsentTrigger: () => new Promise<void>(resolve =>
      setTimeout(resolve, 3000),
    ),
  })
})

打包远程脚本

通过将第三方脚本与您的应用打包来优化它们。

脚本事件页面

了解如何向您的分析提供商发送页面事件。