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 標誌和圖示。