Analytics
I mentioned my top choices for analytics tools (Pirsch & Plausible), but feel free to integrate any other tool you prefer and place it in the <head> of the layout.tsx file.
Google Analytics
Setup
Complete these steps to add Google Analytics to your website.
Step 1
On the Google Analytics dashboard, pick your project, click on the Analytics tab, and then click Enable.
Step 2
Add the @next/third-parties package to your project using your preferred package manager.
Step 3
Add this component to the root layout. It wraps around the tracking script to integrate smoothly with Next.js.
Step 4
Deploy your app to Vercel to see the analytics in the dashboard.
Events
Here’s how to track form button submit events with custom event goals in Plausible: Custom Event Goals Documentation.
Google Analytics
Setup
Complete these steps to add Google Analytics to your website.
Step 1
On the Google Analytics dashboard, pick your project, click on the Analytics tab, and then click Enable.
Step 2
Add the @next/third-parties package to your project using your preferred package manager.
Step 3
Add this component to the root layout. It wraps around the tracking script to integrate smoothly with Next.js.
Step 4
Deploy your app to Vercel to see the analytics in the dashboard.
Events
Here’s how to track form button submit events with custom event goals in Plausible: Custom Event Goals Documentation.
Pirsch Analytics
Setup
Complete these steps to add Pirsch Analytics to your website. Simple like that.
Step 1
Create a new site on Pirsch.
Step 2
Some browsers and ad-blockers might block the requests to the Pirsch JavaScript file. To fix this, Launch Express automatically includes a rule in next.config.js that redirects requests to the correct file. This rule is already set up, so you don’t need to do anything.
Step 3
Get insights into your website traffic with Pirsch Analytics. You can copy the tracking script from the dashboard and add it to your website.
Paste the script in the <head> tag of the layout.tsx file of your website.
Events
Pirsch lets you track specific events on your webpage. Check the documentation for more details.
Plausible Analytics
Setup
Complete these steps to add Plausible Analytics to your website.
Step 1
Create a new site on Plausible.
Step 2
Some browsers and ad-blockers might prevent the Plausible Analytics JavaScript file from loading. To solve this add a rule in next.config.js that reroutes requests to the correct Plausible Analytics file.
Step 3
Get insights into your website traffic with Plausible Analytics. You can copy the tracking script from the dashboard and add it to your website.
Paste the script in the <head> tag of the layout.tsx file of your website.
Events
Here’s how to track form button submit events with custom event goals in Plausible: Custom Event Goals Documentation.
PostHog Analytics
Setup
Complete these steps to add PostHog Analytics to your website.
Step 1
Create a new site on PostHog.
Step 2
PostHog is already installed in your project. You just need to add the token to the .env file.
Events
PostHog lets you track specific events on your webpage. Check the documentation for more details.
Plausible Analytics
Setup
Complete these steps to add Plausible Analytics to your website.
Step 1
Create a new site on Plausible.
Step 2
Some browsers and ad-blockers might prevent the Plausible Analytics JavaScript file from loading. To solve this add a rule in next.config.js that reroutes requests to the correct Plausible Analytics file.
Step 3
Get insights into your website traffic with Plausible Analytics. You can copy the tracking script from the dashboard and add it to your website.
Paste the script in the <head> tag of the layout.tsx file of your website.
Events
Here’s how to track form button submit events with custom event goals in Plausible: Custom Event Goals Documentation.
Simple Analytics
Setup
Complete these steps to add Simple Analytics to your website.
Step 1
Create a new site on Simple Analytics.
Step 2
Some browsers and ad-blockers might prevent the Simple Analytics JavaScript file from loading. To solve this add a rule in next.config.js that reroutes requests to the correct Simple Analytics file.
Step 3
Get insights into your website traffic with Simple Analytics. You can copy the tracking script from the dashboard and add it to your website.
Paste the script in the <head> tag of the layout.tsx file of your website. Import the Script component from next/script.
Events
Here’s how to track form button submit events with custom event goals in Plausible: Custom Event Goals Documentation.
Vercel Analytics
Setup
Complete these steps to add Vercel Analytics to your website.
Step 1
On the Vercel dashboard, pick your project, click on the Analytics tab, and then click Enable.
Step 2
Add the @vercel/analytics package to your project using your preferred package manager.
Step 3
Add this component to the root layout. It wraps around the tracking script to integrate smoothly with Next.js.
Step 4
Deploy your app to Vercel to see the analytics in the dashboard.
Events
Here’s how to track form button submit events with custom event goals in Plausible: Custom Event Goals Documentation.
After Adding the Script
After adding the script, you can view the analytics in the dashboard. You can see the number of visitors, page views, and referrers. You can also see the number of visitors per country and the most visited pages.
If you need more analytics documentations or have any questions, feel free to ask in the Discord community or contact us here.