Documentation menu

How to add privacy-focused web analytics to Nuxt application

The Nuxt is a framework built on top of Vue.js. You can enable Wide Angle Analytics in your Nuxt website or Nuxt application just like any other Vue code. In addition to that, we also provide Nuxt module, which makes the experience even better.

Our module is available on GitHub and is also published to the NPM.

Getting Started - a Video Tutorial

We created a video tutorial, which is available on YouTube. Please note, that when you click on the link or the image below, you will be redirected to a third-party website.

Enable Privacy-Friendly Web Analytics in your Nuxt 3 Application - YouTube thumbnail

Step-by-step Guide of adding web analytics to Nuxt project

1. Create a Nuxt Project

Please refer to official Nuxt documentation regarding project creation. At the time of writing, a new project can be initialized in the following way:

npx nuxi@latest init nuxt-with-analytics

2. Add Wide Angle Analytics Module

npm install wideangle-nuxt

Before testing integration with your Nuxt project, make sure that your site has an Active status in the Wide Angle Analytics.

3. Configure Runtime Configuration

Wide Angle Analytics tracker script is enabled only in the client code. This is important if you rely on the Server-Side Rendering (SSR). If that's the case, you have to consider that you won't be able to interact with the tracker outside the client runtime. If you intend to emit events from your server component, then consider integrating with our event ingestion API.

The minimal configuration requires only the siteId, with all other settings having predefined defaults.

export default defineNuxtConfig({
  modules: ['wideangle-nuxt'],
  runtimeConfig: {
    public: {
      wideangle: {
        siteId: "XXXXXXXXXXXXXXXX"  
      }
    }
  }
})

4. Customizing Default Configuration

The Wide Angle Analytics modules support few settings with predefined defaults.

option description required default example
siteId The Site ID from Wide Angle Site settings none 8D27G3B9ACA01F4241
domain Domain hosting the script, can be found in Wide Angle Analytics Site settings stats.wideangle.co your.domain.com
fingerprint Should script use browser fingerprinting; this might require collecting consent depeing on the applicable laws false true
supressDnt Should script ingore Do Not Track browser setting. If not enabled, not events will be sent if user's browser has DNT enabled false true
includeParams An array of query parameters that can be passed as part of a tracking event. By default, only utm_* and ref parameters are passed in the event [] ['sessionId', 'offset']
excludePaths An array of URL paths that should not trigger default events such as page view, page leave [] ['^/wp-admin/.*', ]
ignoreHash If enabled, change in the URL fragment will not trigger page view event false true

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

5. How to track customer events?

The Wide Angle module offers a composable function, which, when imported, allows you to dispatch custom events and actions. You can learn more about Custom Actions in the dedicated documentation section.

You can include up to 4 custom parameters. Use the event name and parameters to enable reporting on these action on the dashboard.

<template>
  <div>
    <button @click="recordConversion" @mouseover="recordIntent">SIGN UP</button>
  </div>
</template>

<script setup>
import { useWaaEvent } from '#imports';

const recordConversion = () => {
  useWaaEvent('conversion', {action: 'signup-form', source: 'landing'});
}


const recordIntent = () => {
  useWaaEvent('intent', {action: 'signup-form', source: 'landing'});
}

</script>

Need additional help?

If you still require help with setting-up Wide Angle Analytics in your Nuxt project, please reach out to our support. If you would like to report a bug in our NPM packages, you can also raise an issue on GitHub.

Still need help? In that case please contact our support via, email or chat.