Analytics

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. Copy the GA-XYZ ID.

Step 2

Add the @next/third-parties package to your project using your preferred package manager.

  npm i @next/third-parties@latest

Step 3

Add this component to the root layout. It wraps around the tracking script to integrate smoothly with Next.js.

src/app/components/global/providers.tsx
import { GoogleAnalytics } from '@next/third-parties/google';

...
{/* Analytics */}
<GoogleAnalytics gaId={process.env.GOOGLE_ANALYTICS_ID!} />
...

Step 4

Add the GOOGLE_ANALYTICS_ID to the .env file.

.env
GOOGLE_ANALYTICS_ID=G-XYZ

Step 5

Deploy your app to see the analytics in action.

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. Copy the GA-XYZ ID.

Step 2

Add the @next/third-parties package to your project using your preferred package manager.

  npm i @next/third-parties@latest

Step 3

Add this component to the root layout. It wraps around the tracking script to integrate smoothly with Next.js.

src/app/components/global/providers.tsx
import { GoogleAnalytics } from '@next/third-parties/google';

...
{/* Analytics */}
<GoogleAnalytics gaId={process.env.GOOGLE_ANALYTICS_ID!} />
...

Step 4

Add the GOOGLE_ANALYTICS_ID to the .env file.

.env
GOOGLE_ANALYTICS_ID=G-XYZ

Step 5

Deploy your app to see the analytics in action.

Pirsch Analytics

Setup

Complete these steps to add Pirsch Analytics to your website. Simple like that.

Step 1

Create a new site on Pirsch and get the ID.

Step 2

Some browsers and ad-blockers might block the requests to the Pirsch JavaScript file. To solve this add a rule in next.config.js that reroutes requests to the correct Pirsch Analytics file.

next.config.ts
async rewrites() {
  return [
    {
      source: "/pa.js",
      destination: "https://api.pirsch.io/pa.js",
    },
  ];
},

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.

src/app/layout.tsx
<head>
  {/* Place here your Analytics script */}
  <!-- the script looks like the following: -->
  <script defer src="/pa.js" id="pianjs" data-code={process.env.PIRSCH_ID!}></script>
</head>
...

Step 4

Add the PIRSCH_ID to the .env file.

.env
PIRSCH_ID=XYZ

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 and get the domain.

Step 2

Add the next-plausible package to your project using your preferred package manager.

  npm i next-plausible@latest

Step 3

Get insights into your website traffic with Plausible Analytics.

src/app/components/global/providers.tsx
import PlausibleProvider from "next-plausible";

...
<PlausibleProvider domain={process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN!}>
  <QueryClientProvider client={queryClient}>
    {children}
  </QueryClientProvider>
</PlausibleProvider>
...

Step 4

Add the NEXT_PUBLIC_PLAUSIBLE_DOMAIN to the .env file.

.env
NEXT_PUBLIC_PLAUSIBLE_DOMAIN=XYZ

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 and get the key.

Step 2

Add the posthog-js package to your project using your preferred package manager. See the PostHog documentation for more details.

  npm install --save posthog-js@latest

Step 3

After installing the package, you just need to add the token to the .env file.

.env
NEXT_PUBLIC_POSTHOG_KEY=phc_...
NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com

Step 4

Create a new provider component and wrap your app with it.

src/app/components/global/providers.tsx

import posthog from 'posthog-js'
import { PostHogProvider } from 'posthog-js/react'
import { useEffect } from 'react'

  ...
  useEffect(() => {
    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
      api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
      capture_pageview: false // Disable automatic pageview capture, as we capture manually
    })
  }, [])

  return (
    ...
    <PostHogProvider client={posthog}>
      <QueryClientProvider client={queryClient}>
        {children}
      </QueryClientProvider>
    </PostHogProvider>
    ...
  )

Step 5

Deploy your app to see the analytics in action.

Events

PostHog lets you track specific events on your webpage. Check the documentation for more details.

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.

next.config.ts
async rewrites() {
  return [
    {
      source: "/latest.js",
      destination: "https://scripts.simpleanalyticscdn.com/latest.js",
    },
  ];
},

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.

Place the script in the providers component under the Analytics section. Import the Script component from next/script.

  import Script from "next/script";

src/app/components/global/providers.tsx
  ...
  {/* Analytics */}
  <Script data-collect-dnt="true" async src="/latest.js"></Script>
  ...

Step 4

Deploy your app to see the analytics in action.

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.

  npm i @vercel/analytics@latest

Step 3

Add this component to the providers component under the Analytics section.

src/app/components/global/providers.tsx
import { Analytics } from '@vercel/analytics/react';

...
{/* Analytics */}
<Analytics />
...

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.

Getting Started

Tutorial

Features

Resources

Components

Google Analytics

Setup

Google Analytics

Setup

Pirsch Analytics

Setup

Events

Plausible Analytics

Setup

Events

PostHog Analytics

Setup

Events

Simple Analytics

Setup

Events

Vercel Analytics

Setup

Events

After Adding the Script

Getting Started

Tutorial

Features

Resources

Components

​Google Analytics

​Setup

​Google Analytics

​Setup

​Pirsch Analytics

​Setup

​Events

​Plausible Analytics

​Setup

​Events

​PostHog Analytics

​Setup

​Events

​Simple Analytics

​Setup

​Events

​Vercel Analytics

​Setup

​Events

​After Adding the Script

Google Analytics

Setup

Google Analytics

Setup

Pirsch Analytics

Setup

Events

Plausible Analytics

Setup

Events

PostHog Analytics

Setup

Events

Simple Analytics

Setup

Events

Vercel Analytics

Setup

Events

After Adding the Script