https://github.com/blackboxvision/next-google-analytics
🚀 Integrate Google Analytics in Next.js with ease
https://github.com/blackboxvision/next-google-analytics
google google-analytics nextjs
Last synced: about 1 year ago
JSON representation
🚀 Integrate Google Analytics in Next.js with ease
- Host: GitHub
- URL: https://github.com/blackboxvision/next-google-analytics
- Owner: BlackBoxVision
- License: mit
- Created: 2021-07-07T10:51:04.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2023-10-16T03:49:03.000Z (over 2 years ago)
- Last Synced: 2025-04-25T21:20:20.265Z (about 1 year ago)
- Topics: google, google-analytics, nextjs
- Language: TypeScript
- Homepage:
- Size: 3.82 MB
- Stars: 7
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Next Google Analytics [](https://badge.fury.io/js/%40blackbox-vision%2Fnext-google-analytics) [](https://opensource.org/licenses/MIT)
:rocket: Integrate Google Analytics in next.js with ease
## Installation
### NPM
```bash
npm i @blackbox-vision/next-google-analytics
```
### YARN
```bash
yarn add @blackbox-vision/next-google-analytics
```
## Integration Steps
1. Generate a Google Analytics account if you don't have one.
2. Get the Google Analytics tracking ID.
3. Create a `.env.local` with following content:
```bash
NEXT_PUBLIC_GOOGLE_ANALYTICS=your_tracking_id
```
3. Create a custom `app` and add the following contents:
```js
import { GoogleAnalytics } from '@blackbox-vision/next-google-analytics';
function MyApp({ Component, pageProps }) {
return (
<>
>
);
}
export default MyApp
```
## Track events
You can track custom events with this API by doing the following:
```js
import { googleAnalytics } from "@blackbox-vision/next-google-analytics";
googleAnalytics.event("my_event", {
my_param: "xyz",
});
```
## Compatibility
We're supporting next.js v11 only for now, but we've a `GoogleAnalyticsLegacy` component in the works and intentions to support older versions of next.