How to add privacy-focused web analytics to Nuxt application

Nuxt is a versatile, open-source framework based on Vue.js designed to create modern web applications. It streamlines the development process by providing a structured framework that encompasses everything from rendering modes to fetching data, with a focus on enhancing user experience and developer productivity. Nuxt.js supports three rendering modes: single-page applications, server-side rendering, and statically generated sites, making it highly adaptable for various use cases. This capability allows developers to optimize their applications for performance and SEO effectively.

Nuxt.js is renowned for its convention over configuration philosophy, which simplifies project setups and reduces the time developers spend on boilerplate code. It offers features like automatic routing, powerful state management integrations with Vuex, and easy static deployment. The framework also promotes best coding practices and includes a robust plugin architecture that is ideal for extending the functionality of a Nuxt.js application. With a strong community and ongoing enhancements by its maintainers, Nuxt.js is a reliable and future-proof choice for developers looking to leverage Vue.js in their projects.

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.

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.