How To Add GDPR-compliant Analytics to Nuxt 3

December 9, 2022
#nuxt #analytics
Desk setup showing charts and other analytical data in bright purple lights with cyan accent lights over small plants. 3D-rendered with AI.

I am not affiliated with Plausible.io, and I am also only in my trial period of the product. This blog post is meant to show you how to install it and why.

Why is GDPR-compliant analytics desireable?

A lot of websites use Google Analytics on their websites. This is fine but they collect some personal data from you, which require websites using it to add a GDPR-popup on their site (yes, those annoying "Cancel", "Allow All", "Allow some" banners or popups).

I believe that in this time and age, privacy becomes more and more important. That is why I try to run an as privacy-friendly website as possible. The fact that I don't have to add the GDPR-banner is just a sweet bonus.

There are some privacy-friendly analytics tools out there, but I decided to give Plausible.io a shot.

What is Plausible.io?

Plausible.io is a lightweight, open-source, and privacy-focused alternative to Google Analytics. It allows you to track your website's performance and gather valuable insights about your visitors without compromising their privacy.

The downside of this tool, compared to Google Analytics is, that it has a price tag. The smallest tier costs 9€/month, which is a fair price in my opinion. That's well worth my visitors' privacy.

What does Plausible.io track?

It tracks just enough to give you a good idea how your blog posts perform:

  • Views per page
  • Unique visitors (this is done by storing an anonymized combination of IP-address and User-Agent)
  • Bounce Rate
  • Visit duration
  • Current visitors
  • Countries where visitors are from

How to add Plausible.io to Nuxt 3?

First off, you need to register an account with Plausible. Don't worry, you can try it out for free for 30 days.

Adding Plausible.io to your Nuxt 3 site is incredibly easy, as there is a Nuxt-3-compatible module available: @nuxtjs/plausible.

Install the module:

# yarn
yarn add -D @nuxtjs/plausible
# pnpm
pnpm add -D @nuxtjs/plausible
# npm
npm i -D @nuxtjs/plausible

Add it to your nuxt.config.js:

export default defineNuxtConfig({
  modules: ['@nuxtjs/plausible'],
});

This is all you need to get started. For further options, consult the official documentation.

Custom tracking events

You can also track custom events, for example when a certain action is executed.

useTrackEvent('newsletter_signup');
useTrackEvent('document_download ', { props: { document: 'Demo PDF' } });

Summary

It is always good to have privacy-friendly tracking tools installed on your website. But at the end it is up to you as owner of the website what you provide for your users.

I am currently also evaluating out Netlify Analytics. It has the same price tag, and no changes on the website are necessary.

🚀 If you liked this article, follow me on X. That is where I am most active.
📸 Photo by Midjourney (prompts by Marc Backes)