Wide Angle Analytics Nuxt3 模块

Wide Angle Analytics Large Logo

用于 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	脚本是否应使用浏览器指纹识别；这可能需要根据适用法律收集同意书	❌	假	真
suppressDnt	脚本是否应忽略“请勿跟踪”浏览器设置。如果未启用，则当用户的浏览器启用了 DNT 时，将不会发送任何事件	❌	假	真
includeParams	可以作为跟踪事件一部分传递的查询参数数组。默认情况下，只有 `utm_*` 和 `ref` 参数在事件中传递	❌	`[]`	`['sessionId', 'offset']`
excludePaths	不应触发默认事件（如页面浏览、页面离开）的 URL 路径数组	❌	`[]`	`['^/wp-admin/.*', ]`
ignoreHash	如果启用，则 URL 片段的更改不会触发页面浏览事件	❌	假	真
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 服务上调用上述方法将覆盖其他同意机制（即“请勿跟踪”和 Cookie 标记）。

用法示例

<script setup>

import { useWideAngle } from '#imports'

useWideAngle().recordConsent('FHJ44111');

</script>