Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bradgarropy/next-google-analytics
📊 google analytics for next.js
https://github.com/bradgarropy/next-google-analytics
eslint google google-analytics jest next prettier react typescript
Last synced: 3 months ago
JSON representation
📊 google analytics for next.js
- Host: GitHub
- URL: https://github.com/bradgarropy/next-google-analytics
- Owner: bradgarropy
- License: mit
- Created: 2022-02-03T18:20:03.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2022-02-15T19:19:58.000Z (almost 3 years ago)
- Last Synced: 2024-10-13T04:39:01.619Z (3 months ago)
- Topics: eslint, google, google-analytics, jest, next, prettier, react, typescript
- Language: TypeScript
- Homepage: https://npmjs.com/package/@bradgarropy/next-google-analytics
- Size: 728 KB
- Stars: 24
- Watchers: 2
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- Contributing: contributing.md
- License: license
Awesome Lists containing this project
README
# 📊 next google analytics
[![version][version-badge]][npm]
[![downloads][downloads-badge]][npm]
[![size][size-badge]][bundlephobia]
[![github actions][github-actions-badge]][github-actions]
[![coverage][codecov-badge]][codecov]
[![typescript][typescript-badge]][typescript]
[![contributing][contributing-badge]][contributing]
[![contributors][contributors-badge]][contributors]
[![discord][discord-badge]][discord]
_[Google Analytics 4][ga4] for [Next.js][nextjs]._
## 📦 Installation
This package is hosted on [`npm`][npm].
```bash
npm install @bradgarropy/next-google-analytics
```
## 🥑 Usage
This component integrates [Google Analytics 4][ga4] into your [Next.js][nextjs] website. It downloads and initializes the `gtag` script, and no further setup is required. In order to work, this component must be placed in the `pages/_app.js` file.
```jsx
// pages/_app.js
import GoogleAnalytics from "@bradgarropy/next-google-analytics"
const App = ({Component, pageProps}) => {
return (
<>
>
)
}
```
To ensure that Google Analytics is working, you can check a few things.
1. A network request was made to `https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX`.
2. `window.dataLayer` exists and includes your Measurement ID.
3. When you navigate your site, items are added to the `window.dataLayer` array.
## 📖 API Reference
### ``
| Name | Required | Default | Example | Description |
| :-------------- | :------: | :-----: | :--------------- | :------------------------------------------------- |
| `measurementId` | `true` | | `"G-XXXXXXXXXX"` | Google Analytics [Measurement ID][measurement-id]. |
The example below shows how to use the component.
```jsx
```
## ❔ Questions
🐛 report bugs by filing [issues][issues]
📢 provide feedback with [issues][issues] or on [twitter][twitter]
🙋🏼♂️ use my [ama][ama] or [twitter][twitter] to ask any other questions
## ✨ contributors
[codecov]: https://app.codecov.io/gh/bradgarropy/next-google-analytics
[contributing]: https://github.com/bradgarropy/next-google-analytics/blob/master/contributing.md
[contributors]: #-contributors
[npm]: https://www.npmjs.com/package/@bradgarropy/next-google-analytics
[codecov-badge]: https://img.shields.io/codecov/c/github/bradgarropy/next-google-analytics?style=flat-square
[version-badge]: https://img.shields.io/npm/v/@bradgarropy/next-google-analytics.svg?style=flat-square
[downloads-badge]: https://img.shields.io/npm/dt/@bradgarropy/next-google-analytics?style=flat-square
[contributing-badge]: https://img.shields.io/badge/PRs-welcome-success?style=flat-square
[contributors-badge]: https://img.shields.io/github/all-contributors/bradgarropy/next-google-analytics?style=flat-square
[issues]: https://github.com/bradgarropy/next-google-analytics/issues
[twitter]: https://twitter.com/bradgarropy
[ama]: https://bradgarropy.com/ama
[bundlephobia]: https://bundlephobia.com/result?p=@bradgarropy/next-google-analytics
[size-badge]: https://img.shields.io/bundlephobia/minzip/@bradgarropy/next-google-analytics?style=flat-square
[github-actions]: https://github.com/bradgarropy/next-google-analytics/actions
[github-actions-badge]: https://img.shields.io/github/workflow/status/bradgarropy/next-google-analytics/%F0%9F%9A%80%20release?style=flat-square
[typescript]: https://www.typescriptlang.org/dt/search?search=%40bradgarropy%2Fnext-google-analytics
[typescript-badge]: https://img.shields.io/npm/types/@bradgarropy/next-google-analytics?style=flat-square
[discord]: https://bradgarropy.com/discord
[discord-badge]: https://img.shields.io/discord/748196643140010015?style=flat-square
[ga4]: https://analytics.google.com
[nextjs]: https://nextjs.org
[measurement-id]: https://www.youtube.com/watch?v=eWpTwBO9bNg&t=27s
