# @blackbox-vision/next-google-analytics

> Integrate Google Analytics in next.js with ease

Latest version **0.2.2** (published 2023-10-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @blackbox-vision/next-google-analytics
pnpm add @blackbox-vision/next-google-analytics
yarn add @blackbox-vision/next-google-analytics
bun add @blackbox-vision/next-google-analytics
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.2 |
| Published | 2023-10-16 |
| First published | 2021-07-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 33.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Manuel Tuero |
| Maintainers | jonatansalas, manutuero |

## Links

- npm: https://www.npmjs.com/package/@blackbox-vision/next-google-analytics
- Homepage: https://github.com/BlackBoxVision/next-google-analytics#readme
- npm.io page: https://npm.io/package/@blackbox-vision/next-google-analytics

## Recent versions

- 0.2.2 (latest) — 2023-10-16
- 0.2.1 — 2023-10-16
- 0.2.0 — 2023-10-16
- 0.1.1 — 2021-07-18
- 0.1.0 — 2021-07-18
- 0.0.2 — 2021-07-08
- 0.0.1 — 2021-07-07

## README

# Next Google Analytics [![npm version](https://badge.fury.io/js/%40blackbox-vision%2Fnext-google-analytics.svg)](https://badge.fury.io/js/%40blackbox-vision%2Fnext-google-analytics) [![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](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 (
    <>
      <GoogleAnalytics id={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS} />
      <Component {...pageProps} />
    </>
  );
}

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.

---
_Source: https://npm.io/package/@blackbox-vision/next-google-analytics · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._