🚀 Integrate Google Analytics in next.js with ease
npm i @blackbox-vision/next-google-analytics
yarn add @blackbox-vision/next-google-analytics
-
Generate a Google Analytics account if you don't have one.
-
Get the Google Analytics tracking ID.
-
Create a
.env.local
with following content:
NEXT_PUBLIC_GOOGLE_ANALYTICS=your_tracking_id
- 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.