Published on

Why I chose plausible analytics with my Next.js site

Last Modified on
Last modified on
Authors
Why I chose plausible analytics with my Next.js site
Photo by Jason Dent on Unsplash

If you have been following my site recently, you already know that I just revamped it. I migrated from using GatsbyJS to Next.js. Best decision I have ever made. Choosing @Timlrx's tailwind-nextjs-starter-blog as an introduction to Next.js is also the best decision I have ever made. And I am in good company there! Last but not least, using Vercel (the creators of Next.js) for hosting is absolutely the best decision I have ever made! I will be writing a short post about that as well.

The learning curve is still there, especially if one wants to master something, and master it well. And I definitely do!

My latest, biggest challenge was to add analytics to my site while still being able to use Giscus Github comments. This ended up being a bit of a "sticky wicket". I did come up with a nice solution fairly quickly, but it took a good deal of persistence, curiosity, and tenacity! I just refused to give up. Not having some sort of tracking of my website content just was not going to be an option. Not being able to use Giscus on my Next.js site ALSO was not an option.

First I went with the most obovious choice: implementing Google Analytics simply because it is what I used on the GatsbyJS implementation of my site. But much has changed since I integrated GA with GatsbyJS, and I am specifically referring to privacy issues which are continuously being raised around Google business practices.

In order for Google Analytics to be able to track ALL pages/routes on a React driven application, there has to be a way to track the change in state that occur when a visitor switches from one page/route to another.

The Next.js TailwindCSS starter blog does provide code for implementing Google Analytics that circumvents the script src error which arises when we try to add script tags to our _document.js or _app.js Next.js components. Adding Google Analytics to the script-src 'self' 'unsafe-eval' 'unsafe-inline' properties as part of the value of the ContentSecurityPolicy object inside the next.config.js file CAN make Google Analytics scripts work inside _app.js and/or _document.js, BUT then Giscus stops working. It becomes an either/or situation. Either you keep Google Analytics and drop Giscus, or you keep Giscus and drop Google Analytics. I went with dropping Google Analytics, and immmediately looked for an alternative.

First (and last) I turned to the options presented by @Timlrx's tailwind-nextjs-starter-blog. He provides us with the following choices, available for viewing inside the data/sitemetadata.js file: Plausible Analytics, Simple Analytics, Umami Analytics, and Google Analytics.

I already knew that Google Aanalytics was out of the question. I checked out Umami Analytics, but that required self hosting, which is free and open source, but I was not ready to invest the time that it would require to set up. I simply don't have that luxury! I chose to check out Plausible Analytics, which in the end, I feel offer me more for $9/month (after a 30 day free trial) than Simple Analytics. And so far, I have not had to use an API key, either. It, and Simple Analytics, and Umami, are big on Privacy, which is a great thing, and probably why Plausible (and I'm sure Simple Analytics and Umami) works well with Giscus.

But I skipped an important step! Plausible did not work out of the tailwind-nextjs-starter-blog box. I still got the CSP error. What was I going to do? I knew there had to be some kind of solution. After all, GatsbyJS developers, a static React framework, were able to implement Google Analytics there with the help of third party GatsbyJS plugins!

Low and behold, there was a third party Next.js plugin which solved my Plausible CSP error issue. It is called next-plausible (NOT next/plausible), and you have to install it in your application. It is not included out of the box. it is definitely worth checking out. The Github repository contains clear, simple, and comprehensive documentation regarding how to integrate it with your Next.js application. And YES. It covers ALL your site's routes.

The only other thing you have to do, which is not mentioned on the next-plausible repository, but necessary if using Tim's tailwind-nextjs-starter-blog, is to add the follwoing to your next.config.js file:

// next.config.js
// You might need to insert additional domains in script-src if you are using external services
const ContentSecurityPolicy = `
  script-src 'self' 'unsafe-eval' 'unsafe-inline'  plausible.io giscus.app;
  img-src * blob: data:;
  media-src 'none';
  connect-src *;
  font-src 'self';
  frame-src giscus.app
`

This is also where I added Google Analytics, but that resulted in being bumped off of Giscus! Not the case with Plausible! Bye bye Google Analytics! There is a reason so many alternatives are popping up all over the place.

Happy and successful site tracking!

View on GitHub