🚀 Integrate Google Analytics in next.js with ease

npm i @blackbox-vision/next-google-analytics

yarn add @blackbox-vision/next-google-analytics

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:

NEXT_PUBLIC_GOOGLE_ANALYTICS=your_tracking_id

1. Create a custom app and add the following contents:

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

You can track custom events with this API by doing the following:

import { googleAnalytics } from "@blackbox-vision/next-google-analytics";

googleAnalytics.event("my_event", {
  my_param: "xyz",
});

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.