Wide Angle Analytics Nuxt3モジュール

Nuxt用Wide Angle Analyticsモジュール

公式プラグインを使用して、Nuxt 3.xアプリケーションでプライバシーに配慮したWebアナリティクスを有効にします。

Wide Angle Analyticsは、強力で厳格なGDPR準拠のGoogle Analyticsの代替です。

始め方

Wide Angle AnalyticsをNuxtプロジェクトで有効にするには、わずか数ステップです。複雑な設定は不要で、デフォルトの設定により、信頼性の高いプライバシー重視のデプロイメントをすぐに利用できます。

1. Wide Angleのウェブサイトにアクセスしてアカウントを作成します。14日間の無料トライアルをお楽しみいただけます。クレジットカードは不要です。詳細はこちら。
2. 新しいサイトを作成し、アクティブ化します。
3. Vueアプリケーションにwideangle-vuejsプラグインをインストールします。

npx nuxi@latest module add wideangle

4. モジュールを有効にして構成します。

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

  runtimeConfig: {
    public: {
      wideangle: {
        siteId: "8D27G3B9ACA01F4241"
      }
    }
  }
})

Wide Angle Analyticsプラグインの構成

Wide Angle Analyticsプラグインは、デフォルト値のない必須設定があるため、設定オブジェクトで初期化する必要があります。

これらの設定の詳細については、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は3つの特殊なイベントをサポートしています。

• クリック
• ダウンロード
• カスタムアクション

サイトは、使用前に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は、プライバシーファーストで匿名のアプローチでWebトラフィック分析を行うため、デフォルトでは同意を必要としません。

ただし、お客様のユースケースで必要とされる場合に同意を収集するための複数のツールを提供しています。

デフォルトでオプトアウト

訪問者のブラウザでDoNotTrack設定が有効になっている場合、それはオプトアウトと見なされ、トラッキングイベントは発行されません。

ウェブサイトは、suppressDnt設定を指定することで、この動作を上書きすることはできません。

wideangle: {
  siteId: "8D27G3B9ACA01F4241",        
  suppressDnt: true
}

## クッキーに基づくオプトインまたはオプトアウト

Wide Angleは、クッキーの存在、または特定の値を持つクッキーの存在を暗黙の同意として処理するように設定できます。クッキーがない場合は、暗黙のオプトアウトとして処理されます。

クッキーマーカーを使用した設定例。WAA_CONSENTというクッキー名で、値がtrueであることを想定しています。

wideangle: {
  siteId: "8D27G3B9ACA01F4241",        
  consentMarker: "WAA_CONSENT=true"
}

プログラムによる同意

Wide Angleサービスは、トラッキング同意を記録するための2つの追加メソッドを提供します。

• recordConsent(subjectId: String): void、および
• revokeConsent()

waaサービスで上記のメソッドを呼び出すと、他の同意メカニズム（DoNotTrackやクッキーマーカーなど）は上書きされます。

使用例

<script setup>

import { useWideAngle } from '#imports'

useWideAngle().recordConsent('FHJ44111');

</script>