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 插件。

npm install wideangle-nuxt

启用并配置模块。

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
supressDnt	脚本是否应忽略“请勿跟踪”浏览器设置。如果未启用，则如果用户的浏览器启用了 DNT，则不会发送任何事件	❌	false	true
includeParams	可以作为跟踪事件的一部分传递的查询参数数组。默认情况下，只有 `utm_*` 和 `ref` 参数会传递到事件中	❌	`[]`	`['sessionId', 'offset']`
excludePaths	不应触发默认事件（如页面浏览、页面离开）的 URL 路径数组	❌	`[]`	`['^/wp-admin/.*', ]`
ignoreHash	如果启用，则 URL 片段的更改不会触发页面浏览事件	❌	false	true

您可以在 Wide Angle Analytics 文档中找到有关这些设置的更多详细信息。

示例

export default defineNuxtConfig({
  modules: ['wideangle-nuxt'],

  runtimeConfig: {
    public: {
      wideangle: {
        siteId: "8D27G3B9ACA01F4241",
        domain: "your.domain.com",
        fingerprint: false,
        supressDnt: true,
        includeParams: ['q', 'customerId'],
        excludePaths: ['^/admin.*'],
        ignoreHash: true
      }
    }  
  }
})

用法

Wide Angle Analytics 提供了一个 waa 实例，然后可以将其注入到您的组件中。

useWaaEvent('purchase', {'basket_element': 'dress'}, {'basket_item_price': 123.44});

您将在该存储库中找到一个功能齐全的示例。

跟踪页面浏览量

无需任何操作。跟踪器脚本会自动发出**页面浏览**和**页面离开**事件。

跟踪事件

Wide Angle 支持三种专门的事件

点击
下载
自定义操作

在使用之前，站点必须在 Wide Angle Analytics 配置中启用这些事件。否则，跟踪器脚本将不会发送这些事件。请参阅官方文档，了解如何启用事件处理。

跟踪点击

目前，**点击事件**是根据元素数据属性自动发出的。

跟踪下载

根据配置的模式，**下载事件**将在以下任一情况下自动触发：

正在下载具有识别扩展名的文件，或者
链接使用 data-waa-name 属性标记。

跟踪自定义操作

自定义操作最灵活，可以直接从 Vue 组件触发。因此，它们的用法不受 Shadow DOM 的限制。

示例

<template>
  <button @click="sendEvent()">Send Event</button>    
</template>

<script setup>
import { useWaaEvent } from '#imports'
const sendEvent = async () => {
  const params = {
    session: 'cjhw92nf9aq',
    cohort: 'c1233'
  }  
  useWaaEvent('interest', params);  
}
</script>

模块资产

您可以在我们的媒体页面上找到高分辨率的 Wide Angle Analytics 徽标和图标。