Introduction

This guide will show you how to integrate analytics for your app. You can choose between Google Analytics and Plausible.

Google Analytics is free, but uses cookies, so you’ll probably want/need to implement the Cookie Consent Modal when using it.

Plausible is an open-source, privacy-friendly alternative to Google Analytics. You DO NOT have to use the cookie consent modal with Plausible, as it does not use cookies. It’s also easier to use than Google if you use their hosted service, but be aware it is a paid feature. It is completely free if you want to self-host it, although this comes with some additional setup steps.

Need help? Ask us on Discord! (You need to purchase the pro plan!↗)

Ask us on Discord

Plausible

Hosted Plausible

Once you’ve signed up, you’ll be taken to your dashboard. Create your site by adding your domain. Your domain is also your PLAUSIBLE_SITE_ID in your .env.server file. Make sure to add it.

.env

PLAUSIBLE_SITE_ID=<your domain without www>

After adding your domain, you’ll be taken to a page with your Plausible script tag. Copy and paste this script tag into the layout.tsx file on boilerpro-frontend.

layout.tsx

export default function RootLayout({
	children,
}: Readonly<{
	children: React.ReactNode;
}>) {
	[...]
	return (
		<html lang="en">
			{/* you can put your analytics scripts here */}
			<head>
				{/* Add Plausible */}
				<PlausibleProvider
					domain={process.env.PLAUSIBLE_SITE_ID}
					// use "enabled" and "trackLocalhost" to make plausible work on localhost
					enabled={true}
					trackLocalhost={true}
					// use "taggedEvents" to track custom events created on Plausible dashboard
					// taggedEvents={true}
				/>
        [...]

Go back to your Plausible dashboard, click on your username in the top right, and click on the Settings tab. Scroll down, find your API key and paste it into your .env file under the PLAUSIBLE_API_KEY variable.

Self-hosted Plausible

Plausible, being an open-source project, allows you to self-host your analytics. This is a great option if you want to keep your data private and not pay for the hosted service.

coming soon… until then, check out the official documentation (opens in a new tab)

Google Analytics

coming soon...

In the meantime, you can check out the official documentation (opens in a new tab) to get started with Google Analytics.

Get Started Authentication