Skip to content

Analytics specifically designed for Next.js

License

Notifications You must be signed in to change notification settings

happykit/analytics

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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',
});