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.

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.