Enable privacy-friendly web analytics in your Nuxt 3.x application with our official plugin.

Wide Angle Analytics is powerful, strictly-GDPR compliant Google Analytics alternative.

You can enable Wide Angle Analytics in your Nuxt projects in just a few steps. No complex configuration needed, as our sane defaults provide you with a reliable and privacy-centric deployment out of the box.

1. Go to the Wide Angle website and create an account. You can enjoy a free 14-day trail. No Credit Card is required. Learn more.
2. Create a new site and activate it.
3. Install the wideangle-vuejs plugin in your Vue application.

npm install wideangle-nuxt

4. Enable and configure the module.

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

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

The Wide Angle Analytics plugin must be initialized with a configuration object as there are required settings without defaults.

You can find more details about these settings in the Wide Angle Analytics documentation.

Example:

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
      }
    }  
  }
})

The Wide Angle Analytics provides an instance of waa which can be then injected to your component.

import { useWideAngle } from '#imports'

useWideAngle('purchase', {'basket_value': '45.00'})

You will find a fully functional example in this repository.

No action necessary. The tracker script automatically issues Page View and Page Leave events.

Wide Angle supports three specialized events:

• clicks
• downloads
• custom actions

Site has to have these events enabled in the Wide Angle Analytics configuration prior to usage. Otherwise the tracker script will not send these events. Consult the official documentation regarding how to enable event handling.

Currently Click Events are emitted automatically based on element data attributes.

Depending on the configured mode, the Download Event will fire automatically when either:

• a file with recognized extension is being downloaded, or
• when a link is marked with data-waa-name attribute.

Custom actions are the most flexible and can be triggered directly from Vue components. As such, their usage is not limitted due to the Shadow DOM.

Example:

<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>

You can find a high-resolution Wide Angle Analytics logo and icon on our media page.