Analytics

I currently support the following analytics providers:

• Pirsch
• Plausible

Every integration supports the basic analytics features such as page views, unique visitors and referrers.

Custom events are also fully supported, allowing you to track user actions from within your app (for example signups, logins, and purchases).

Pirsch

Environment variables

In order to get started tracking with Pirsch we need to get the tracking ID.

Sign up for an account if you don't have one and go through their onboarding process.

Once complete, simply head to your dashboard settings page and click on the Integration subheading.

Copy the Identification Code and add it to your environment variables.

.env
NEXT_PUBLIC_PIRSCH_ID="your tracking id"

Enable site-wide tracking

To enable analytics within your app, go to @/app/providers.tsx and add the following code:

@/app/providers.tsx
import { useMounted } from "@/hooks/useMounted";
import { useEffect } from "react";
import { pirschClient } from "@/lib/analytics/pirsch";

const mounted = useMounted();

useEffect(() => {
if (mounted) {
    pirschClient.hit(); // Track a page view on initial load
}
}, [mounted]);

Enable custom events

You can track any custom goal or event you like by importing the pirschClient and calling the customEvent function.

More details on how Pirsch event tracking works can be found here in their documentation.

Here's an example of how you can track when someone clicks on a button to start a checkout process:

import { pirschClient } from "@/lib/analytics/pirsch";

pirschClient.customEvent(
    "Checkout Started",
    5,
    { url: planCheckoutUrl },                                   // use dynamic variables
    { revenue: planPrice, currency: "USD", plan: planTitle }    // use dynamic variables  
);

You could wrap this into a function and use it whenever your logic requires.

const handleCheckout = () => {
    // Your checkout logic here
    pirschClient.customEvent(
        "Checkout Started",
        5,
        { url: planCheckoutUrl },                           // use dynamic variables
        { revenue: 99, currency: "USD", plan: 'Starter' }   // use dynamic variables
    );
}

Finally, you can render a button that calls this function when clicked.

<Button onClick={handleCheckout}>Buy Now</Button>

Plausible

Environment variables

To get started with Plausible, sign up for an account and create a new site.

Once you've created a site, enter the domain into your environment variables.

.env
NEXT_PUBLIC_PLAUSIBLE_DOMAIN="your domain"

Enable site-wide tracking

To enable site-wide analytics, we need to import the PlausibleProvider and wrap it around our app.

Go to @/app/providers.tsx and add the following code, making sure that {children} is wrapped inside the provider component:

@/app/providers.tsx
import PlausibleProvider from "next-plausible";

<PlausibleProvider trackOutboundLinks revenue domain={process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN || ""}>
    {children}
</PlausibleProvider>

Enable custom events

Plausible supports custom events out of the box. You can track any custom goal or event you like by importing and calling the usePlausible hook.

example.tsx
import { usePlausible } from "next-plausible";

const plausible = usePlausible();

plausible("Checkout Started", {
    revenue: {
        amount: planPrice,
        currency: "USD",
    },
    props: {
        planTitle,
        planPrice,
    },
});

You can wrap this into a function and use it whenever your logic requires, for example when clicking a button to start a checkout session.

example.tsx
const handleCheckout = () => {
    // Your checkout logic here
    plausible("Checkout Started", {
        revenue: {
            amount: 99,
            currency: "USD",
        },
        props: {
            planTitle: "Starter",
            planPrice: 99,
        },
    });
}

Finally, you can render a button that calls this function when clicked.

<Button onClick={handleCheckout}>Buy Now</Button>