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.

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.

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.