How to Add Analytics in Next.js with Plausible - Coding

In this article, we will learn how to add analytics to our Next.js app using Plausible. Adding analytics to any app is a crucial aspect of web development as it helps in understanding how the website is performing for users and how many visitors the website is getting. We will accomplish this by integrating Plausible for analytics.

Prerequisites

Approach

To integrate Plausible Analytics with a Next.js app, add your site to Plausible, create a Next.js app, install the next-plausible library, configure PlausibleProvider in your app’s layout, and track custom events like button clicks for analytics.

Using pages router in Next

To track your whole website, you can simply go inside the “pages/_app.js” files (or “src/pages/_app.js” if you are using src folder) and inside that you can import the “PlausibleProvider” from the “next-plausible” and cover your application inside it, as shown below:

import PlausibleProvider from 'next-plausible'

export default function MyGFGApp({ Component, pageProps }) {
  return (
    <PlausibleProvider domain="<your-domain>">
      <Component {...pageProps} />
    </PlausibleProvider>
  )

To enable localhost tracking, you can set the attributes “trackLocalhost” and “enabled” in your PlausibleProvider as shown below:

<PlausibleProvider trackLocalhost enabled domain="<your-domain>">
      <Component {...pageProps} />
 </PlausibleProvider>

Note: If you want to add plausible analytics to a single page only, then instead of wrapping the whole application inside the PlausibleProvider, you can wrap that single page to track analytics for that page only.

Using app router in Next

Next.js 13 came up with the app router which is a newer way to create pages and structure your website. To integrate the Plausible inside app router, you can simple include the “PlausibleProvider” inside your root layout i.e. “app/layout.js” (or “src/app/layout.js if you are using src folder”) and put it inside the “<head>” tag as shown below:

import PlausibleProvider from "next-plausible";
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <PlausibleProvider
          domain="<your-domain>"
        />
      </head>
      <body className={inter.className}>{children}</body>
    </html>
  );
}

For enabling the localhost tracking, you can add the “trackLocalhost” and “enabled” attributes to the “PlausibleProvider” as shown below:

 <PlausibleProvider
    domain="<your-domain>"
    trackLocalhost
    enabled
/>

Tracking custom events in plausible

To track custom events, you can use the “usePlausible” hook provided by “next-plausible” and can easily track custom events as shown below:

import { usePlausible } from 'next-plausible'

const plausible = usePlausible();
const anyFunction= () => {
    // your code
    plausible(<event-name>, {
        props: {
            "custom-prop-1": "value1",
        "custom-prop-2": "value2"
    },
  });
};

Props accepted by the plausible function:

Event name: Name of the event which you want to track. For example: “my-btn-clicked”, “my-input-clicked” etc
Props: Any custom properties your want to send with the event. For example: time of event, event specific values etc.

Note: You need to activate the goals conversion tab and custom properties tab under your site setting on your plausible dashboard to track custom events.

Steps to add your site on plausible

Step 1: Go to https://plausible.io/ and create an account (if not already created) or login into your account.

Step 2: You will be prompted to ask your website details like domain and timzone to be reported. Fill them as shown in the image below:

Plausible add site info

Step 3: Click on “Add snippet” to add your website. You’ll be redirected to the below page:

Plausible add snippet page

Step 4: Click on the “Verify your integration to start collecting data” button, which will redirect you to the analytics dashboard and you’ll be able to see the analytics once we start the tracking.

Plausible verifying your integration page

Steps to create the Next.js application

Step 1: To create your app, run the following npx command in your terminal to start the creation process:

npx create-next-app@latest

Step 2: Provide the necessary details to create your app as shown in the image below.

Providing the necessary details to create-next-app

Step 3: Navigate to the project directory.

cd gfg-next-app

Step 4: Installing the next-plausible module using the below command:

npm i next-plausible

Step 5: Run the development server using the below command:

npm run dev

Project Structure:

Folder structure | How to Add Analytics in Next.js with Plausible

The updated dependencies in package.json file will look like:

"dependencies": {
  "next": "14.2.3",
  "next-plausible": "^3.12.0",
  "react": "^18",
  "react-dom": "^18"
},

Example 1: In this example, let’s add the “PlausibleProvider” from the “next-plausible” in our app and start tracking the page views in our plausible dashboard.

JavaScript

// inside src/app/layout.js

import { Inter } from "next/font/google";
import "./globals.css";
import PlausibleProvider from "next-plausible";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "GeeksforGeeks",
  description: "How to Add Analytics in Next.js with Plausible",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <PlausibleProvider
          trackLocalhost
          enabled
          domain="my-gfg-test-app.com"
        />
      </head>
      <body className={inter.className}>{children}</body>
    </html>
  );
}

JavaScript

// inside src/app/page.js

export default function Home() {
  return (
    <div className="p-4">
      <h1 className="text-3xl font-bold">GeeksforGeeks</h1>
      <h2 className="text-lg">
        How to Add Analytics in Next.js with Plausible
      </h2>
    </div>
  );
}

Output: As you can see in the below output images, now whenever we’ll go to any route in our website, it will track that and show us the analytics in the plausible dashboard which includes unique visitors, total pageviews, total visits, views per visit, top pages, top sources, locations, devices and many more metrics, with just few lines of code.

Example 1: Homepage of our Next.app

Example 1: Output plausible dashboard

Example 2: In this example, let’s create a custom button click event and track that event using plausible.

JavaScript

"use client";
// inside src/app/page.js
import { usePlausible } from "next-plausible";

export default function Home() {
  const plausible = usePlausible();
  const handleClick = () => {
    // your code
    plausible("Button clicked", {
      props: {
        btnText: "Click me",
        btnLocation: "Home page",
      },
    });
  };
  return (
    <div className="p-4">
      <h1 className="text-3xl font-bold">GeeksforGeeks</h1>
      <h2 className="text-lg">
        How to Add Analytics in Next.js with Plausible
      </h2>
      <button
        className="bg-green-400 px-4 py-2 rounded-lg text-white"
        onClick={handleClick}
      >
        Click me
      </button>
    </div>
  );
}

Output: As you can see whenever we click the button, the event will be registered through plausible and could be seen in the dashboard with the props which we had passed to the “plausible” function.

Example 2: Webpage

Ecample 2: Plausible Dashboard Goal Conversion

Example 2: Plausible Dashboard Custom Properties

Reference: next-plausible github link

Reffered: https://www.geeksforgeeks.org

ReactJS

Related
How To Get And Process A Stream Response With Axios in NextJS ?
How To Create A Custom Image Loader In NextJS?
How To Create React Multiple File Upload Using NextJS And Typescript?
How To Set Up Mongoose With Typescript In NextJS ?
How To Use React Context In NextJS With Typescript?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	19