Wide Angle Analytics Nuxt3 模块
用于 Nuxt 的 Wide Angle Analytics 模块
通过我们的官方插件，在您的 Nuxt 3.x 应用程序中启用隐私友好的网络分析。
Wide Angle Analytics 是一款功能强大、严格遵守 GDPR 的 Google Analytics 替代品。
如何开始
您只需几个步骤即可在 Nuxt 项目中启用 Wide Angle Analytics。无需复杂的配置，因为我们合理的默认设置为您提供了开箱即用的可靠且以隐私为中心的部署。
- 访问 Wide Angle 网站并创建一个帐户。您可以享受 14 天免费试用。无需信用卡。了解更多。
- 创建新站点并激活它。
- 在您的 Vue 应用程序中安装
wideangle-vuejs插件。
npx nuxi@latest module add wideangle
- 启用和配置模块。
export default defineNuxtConfig({
modules: ['wideangle-nuxt'],
runtimeConfig: {
public: {
wideangle: {
siteId: "8D27G3B9ACA01F4241"
}
}
}
})
配置 Wide Angle Analytics 插件
Wide Angle Analytics 插件必须使用配置对象进行初始化，因为存在没有默认值的必需设置。
| 选项 | 描述 | 必需 | 默认 | 示例 |
|---|---|---|---|---|
| siteId | Wide Angle 站点设置中的站点 ID | ✅ | 无 | 8D27G3B9ACA01F4241 |
| domain | 托管脚本的域，可在 Wide Angle Analytics 站点设置中找到 | ❌ | stats.wideangle.co | your.domain.com |
| fingerprint | 脚本是否应使用浏览器指纹识别；根据适用法律，这可能需要收集同意 | ❌ | false | true |
| suppressDnt | 脚本是否应忽略“请勿跟踪”浏览器设置。如果未启用，则如果用户的浏览器启用了 DNT，则不会发送任何事件 | ❌ | false | true |
| includeParams | 一个查询参数数组，可以作为跟踪事件的一部分传递。默认情况下，事件中只传递 utm_* 和 ref 参数 | ❌ | [] | ['sessionId', 'offset'] |
| excludePaths | 一个 URL 路径数组，不应触发默认事件，例如页面浏览、页面离开 | ❌ | [] | ['^/wp-admin/.*', ] |
| ignoreHash | 如果启用，URL 片段的更改不会触发页面浏览事件 | ❌ | false | true |
| consentMarker | Cookie 的名称（无论是否有值），其存在被视为隐含同意；如果未定义，则同意不由 cookie 决定 | ❌ | 不适用 | WAA_CONSENT=true |
您可以在 Wide Angle Analytics 文档中找到有关这些设置的更多详细信息。
示例
export default defineNuxtConfig({
modules: ['wideangle-nuxt'],
runtimeConfig: {
public: {
wideangle: {
siteId: "8D27G3B9ACA01F4241",
domain: "your.domain.com",
fingerprint: false,
suppressDnt: true,
includeParams: ['q', 'customerId'],
excludePaths: ['^/admin.*'],
ignoreHash: true,
consentMarker: `WAA_CONSENT=true`
}
}
}
})
使用
Wide Angle Analytics 提供了一个可在您的组件中使用的可组合项。
<template>
<button @click="sendEvent">Send Event</button>
</template>
<script setup>
import { useWideAngle } from '#imports';
const sendEvent = () => {
useWideAngle().dispatchEvent('basket-open', {'page': 'catalogue'}, {'item-price': 599.00, 'basket-total': 1299.00});
}
</script>
您可以在此存储库中找到一个功能齐全的示例。
跟踪页面浏览量
无需操作。跟踪器脚本会自动发出页面浏览和页面离开事件。
跟踪事件
Wide Angle 支持三种特殊事件
- 点击
- 下载
- 自定义操作
站点必须在使用前在 Wide Angle Analytics 配置中启用这些事件。否则，跟踪器脚本将不会发送这些事件。有关如何启用事件处理，请参阅官方文档。
跟踪点击
当前，点击事件会根据元素数据属性自动发出。
跟踪下载
根据配置模式，当以下任一情况发生时，下载事件将自动触发
- 正在下载带有可识别扩展名的文件，或
- 当链接被标记为
data-waa-name属性时。
跟踪自定义操作
自定义操作最灵活，可以直接从 Vue 组件触发。因此，它们的使用不受 Shadow DOM 的限制。
示例
<template>
<button @click="sendEvent()">Send Event</button>
</template>
<script setup>
import { useWideAngle } from '#imports'
const sendEvent = async () => {
const params = {
session: 'cjhw92nf9aq',
cohort: 'c1233'
}
useWideAngle().dispatchEvent('interest', params);
}
</script>
模块资产
您可以在我们的媒体页面上找到高分辨率的 Wide Angle Analytics 标志和图标。
记录同意
Wide Angle Analytics，由于其隐私优先、匿名处理网络流量分析的方法，默认情况下不需要同意。
但是，我们确实提供了多种工具来支持在您的用例中需要收集同意时进行收集。
默认选择退出
如果访问者浏览器在浏览器中启用了 DoNotTrack 设置，则将理解为选择退出，并且不会发出跟踪事件。
您的网站不能通过指定 suppressDnt 设置来覆盖此行为。
wideangle: {
siteId: "8D27G3B9ACA01F4241",
suppressDnt: true
}
## 基于 Cookie 的选择加入或选择退出
Wide Angle 可以配置为将 cookie 的存在或具有特定值的 cookie 视为隐含同意。缺少 cookie 将被视为隐含选择退出。
带有 cookie 标记的示例配置，期望 cookie 名称为 WAA_CONSENT，值为 true
wideangle: {
siteId: "8D27G3B9ACA01F4241",
consentMarker: "WAA_CONSENT=true"
}
编程同意
Wide Angle 服务提供了两种额外的方法，允许记录跟踪同意
recordConsent(subjectId: String): void，和revokeConsent()
在 waa 服务上调用上述方法将覆盖其他同意机制（即 DoNotTrack 和 cookie 标记）。
使用示例
<script setup>
import { useWideAngle } from '#imports'
useWideAngle().recordConsent('FHJ44111');
</script>