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	腳本是否應使用瀏覽器指紋識別；這可能需要收集同意書，具體取決於適用的法律	❌	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>