happykit / analytics

Analytics specifically designed for Next.js

Website  •  Twitter

   

Add analytics to your Next.js application with a single React Hook. This package integrates your Next.js application with HappyKit Analytics. Create a free happykit.dev account to get started.

Key Features

• Track page views and unique visitors
• Integrate using a single React Hook
• Next.js specific dynamic route tracking (e.g. /[user])
• GDPR compliant by default. No cookie notice necessary.
• Tiny: 1kB minified + gzipped
• No external runtime, so no costly additional request to load a runtime
• Written in TypeScript

Installation

Add the package to your project

npm install @happykit/analytics

Integration

You'll need to add a single useAnalytics call to your application. The best place to do this is in pages/_app.js.

Set up a pages/_app.js file with this content:

import { useAnalytics } from '@happykit/analytics';

function MyApp({ Component, pageProps }) {
  useAnalytics({ publicKey: '<Your HappyKit Public Key>' }); // <-- add this

  return <Component {...pageProps} />;
}

export default MyApp;

Create a free account on happykit.dev to get your HappyKit Public Key

Using TypeScript?

import { useAnalytics } from '@happykit/analytics';
import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  useAnalytics({ publicKey: 'HAPPYKIT KEY' }); // <-- add this

  return <Component {...pageProps} />
}

export default MyApp

You can read more about using a custom _app.js component here.

Options

useAnalytics(options) accepts the following options object:

• publicKey string (required): The public key for this project from happykit.dev.
• skip function (optional): This function is called with the created page view record. Return true to avoid tracking it.
• skipHostnames array of strings (optional): An array of hostnames which will not be tracked. Defaults to ["localhost"]. HappyKit tracks page views from preview deployments by default. The data is kept separate from your production data.
• delay number (optional): The number of milliseconds to wait before reporting a page view. Defaults to 5000. This is used for batching purposes. This is used only if the browser supports navigator.sendBeacon. Otherwise page views are sent immediately.

Example:

useAnalytics({
  publicKey: 'pk_live_5093bcd381',
  skip: pageView => pageView.pathname === '/some-ignored-path',
});