Plausible is made and hosted in Europe and complies with GDPR guidelines, which is a big advantage for me.

Easy to use and privacy-friendly Google Analytics alternative

Although Plausible complies with all data protection guidelines, it is also an efficient tool for website metric analysis. Plausible's simple integration is particularly attractive due to its affordability, open-source nature, and self-hosting flexibility. These features make Plausible a great addition to my development toolkit.

Why Plausible?

Before delving further into the setup process, let's review why Plausible is my preferred analytics solution.

Privacy focused: Being GDPR compliant and cookie-free, which respects user privacy right out of the box
Origin: Its European roots align well with projects aimed at European audiences, ensuring data protection regulations are met with ease
Performance Analysis: Despite its lightweight footprint, Plausible provides valuable insights into website performance and user engagement
Ease of Use: The simplicity of integrating Plausible into any project, alongside its affordability and open-source nature, makes it an excellent choice for developers and companies alike

Setting Up Plausible with Next.js

To integrate Plausible Analytics into your Next.js application, follow these steps, keeping in mind that you can either use Plausible's hosted service or self-host it for full data ownership.

Step 1: Installation

First, you need to install the next-plausible (GitHub) package, which makes it easy to integrate Plausible Analytics into your Next.js project. Run the following command in your Next.js project:

yarn add -E next-plausible

Step 2: Configure Plausible App Directory

Import the PlausibleProvider into your app/layout.jsx|tsx file and add it to the head to load the plausible scripts. There are other options, best found on GitHub. My configuration usually looks like this:

// app/layout.tsx
import PlausibleProvider from 'next-plausible'

const RootLayout = async ({ children }: { children: React.ReactNode }) => {
  return (
    <html>
      <head>
        <PlausibleProvider
          enabled={process.env.NEXT_PUBLIC_APP_ENV === 'production'}
          domain="mydomain.com"
          trackOutboundLinks
          scriptProps={{
            src: '/js/script.js',
            'data-api': '/api/event',
          }}
        />
      </head>
      <body>{children}</body>
    </html>
  );
};

export default RootLayout;

As you can see, I use my own variable (NEXT_PUBLIC_APP_ENV) to check whether the scripts should be enabled or not. Additionally, I enabled the trackOutboundLinks flag to track outbound links and specify scriptProps to indicate the source of the scripts. Rather than loading them directly from plausible.io, I load them via a rewrite through my own site's NGINX (e.g. mydomain.com/js/script.js). Please refer to the official instructions for further details. You can simply copy the snippet and use it. The script is cached, and adblockers cannot detect it.

Conclusion

By following these simple steps, you have successfully implemented Plausible in your project and can now evaluate your website's performance. Later, I will also write a post on how to evaluate and process the data further. Additionally, I regularly export the data from Plausible via API to generate more powerful statistics.

For more details and advanced configurations, refer to the official Plausible documentation and the next-plausible GitHub repository.

Implement Plausible Analytics in Next.js