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>