Plausible Analytics

StarterKit Pro makes it easy to integrate Plausible Analytics, a privacy-friendly web analytics alternative, using the next-plausible library.

Optional Feature

Plausible Analytics isn’t included by default to keep the core lean. Install it if you need to track analytics or custom events to monitor user behavior.

Installation

First, install the necessary package:

Terminal

npm install next-plausible

Basic Setup

To enable Plausible tracking across your application, import the PlausibleProvider component and wrap your application's content within it in your root layout file (app/layout.tsx).

You'll need your Plausible domain name.

Update Root Layout

Import and include the PlausibleProvider component in app/layout.tsx:

app/layout.tsx

import PlausibleProvider from "next-plausible";
// ... other imports
 
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <PlausibleProvider domain="starterkitpro.com" trackOutboundLinks>
          {children}
          {/* ... other components */}
        </PlausibleProvider>
      </body>
    </html>
  );
}

Replace "starterkitpro.com" with your actual domain configured in Plausible.

With this setup, page views and outbound link clicks (if trackOutboundLinks is true) will be automatically tracked by Plausible.

Tracking Custom Events

Beyond automatic tracking, you can track specific user interactions using the usePlausible hook.

Import `usePlausible`

Import the hook into the client component where you want to track the event:

import { usePlausible } from "next-plausible";

Call Plausible Event on Interaction

Get the plausible function from the hook and call it within an event handler. For example, tracking a purchase button click:

components/shared/purchase-button.tsx

"use client";
 
import { usePlausible } from "next-plausible";
import { Button } from "@/components/ui/button";
// ... rest of your imports
 
export const PurchaseButton = ({ variantId }: { variantId: string }) => {
  const plausible = usePlausible();
 
  const handleClick = () => {
    // ... rest of your purchase logic
 
    // Send custom event to Plausible
    plausible("purchase_click", {
      props: {
        variantId, // Pass custom properties relevant to the event
      },
    });
 
    // ... rest of your purchase logic
  };
 
  return <Button onClick={handleClick}>Purchase Now</Button>;
};

The first argument to the plausible function is the event name (e.g., purchase_click, signup). The optional second argument is an object where you can pass custom properties (props) associated with the event for segmentation in Plausible.

Setting Up Your Plausible Account

To use Plausible Analytics, you first need to set up an account and add your website:

Register: Go to plausible.io and sign up for an account.
Add Your Website: After logging in, you'll be prompted to add your website. Enter the domain name you want to track (e.g., starterkitpro.com).
Find Your Domain: The domain name you enter here is the value you need for the domain prop in the PlausibleProvider component in your app/layout.tsx file.