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.

Contents