https://github.com/happykit/analytics
Analytics specifically designed for Next.js
https://github.com/happykit/analytics
analytics next nextjs pageviews react reactjs
Last synced: about 1 year ago
JSON representation
Analytics specifically designed for Next.js
- Host: GitHub
- URL: https://github.com/happykit/analytics
- Owner: happykit
- License: mit
- Created: 2020-07-31T16:54:10.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-12-09T11:16:17.000Z (over 4 years ago)
- Last Synced: 2025-04-02T07:04:09.848Z (over 1 year ago)
- Topics: analytics, next, nextjs, pageviews, react, reactjs
- Language: TypeScript
- Homepage: https://happykit.dev
- Size: 407 KB
- Stars: 37
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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](https://happykit.dev/signup) 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](https://bundlephobia.com/result?p=@happykit/analytics)
- No external runtime, so no costly additional request to load a runtime
- Written in TypeScript
## Installation
Add the package to your project
```sh
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:
```js
import { useAnalytics } from '@happykit/analytics';
function MyApp({ Component, pageProps }) {
useAnalytics({ publicKey: '' }); // <-- add this
return ;
}
export default MyApp;
```
> Create a free account on [happykit.dev](https://happykit.dev/signup) to get your _HappyKit Public Key_
Using TypeScript?
```ts
import { useAnalytics } from '@happykit/analytics';
import type { AppProps } from 'next/app'
function MyApp({ Component, pageProps }: AppProps) {
useAnalytics({ publicKey: 'HAPPYKIT KEY' }); // <-- add this
return
}
export default MyApp
```
You can read more about using a custom `_app.js` component [here](https://nextjs.org/docs/advanced-features/custom-app).
## Options
`useAnalytics(options)` accepts the following options object:
- `publicKey` **string** (required): The public key for this project from [happykit.dev](https://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:
```js
useAnalytics({
publicKey: 'pk_live_5093bcd381',
skip: pageView => pageView.pathname === '/some-ignored-path',
});
```