Wide Angle Analytics Nuxt3モジュール

Wide Angle Analytics Large Logo

Nuxt用Wide Angle Analyticsモジュール

公式プラグインを使用して、Nuxt 3.x アプリケーションでプライバシーに配慮したウェブ解析を有効化します。

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

はじめに

Wide Angle Analyticsは、Nuxtプロジェクトでわずか数ステップで有効化できます。複雑な設定は必要ありません。当社の適切なデフォルト設定により、信頼性が高くプライバシーを中心としたデプロイメントをすぐに利用できます。

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	スクリプトでDo Not Trackブラウザ設定を無視するかどうか。有効になっていない場合、ユーザーのブラウザで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は、3つの特別なイベントをサポートしています。

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

トラッカースクリプトがこれらのイベントを送信するためには、サイトで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のロゴとアイコンは、メディアページにあります。