Google Analytics for Next.js
npm install --save nextjs-google-analytics-gtmThis package must be used with a GTM server container, so you MUST define the following environment variable:
NEXT_PUBLIC_GTM_DOMAIN="www.yourdomain.com" Your Google Analytics measurement id is read from NEXT_PUBLIC_GA_MEASUREMENT_ID environment variable, so make sure it is set in your production environment:
If the variable is not set or is empty, nothing will be loaded, making it safe to work in development.
To load it and test it on development, add:
NEXT_PUBLIC_GA_MEASUREMENT_ID="G-XXXXXXXXXX"
to your .env.local file.
Use the GoogleAnalytics component to load the gtag scripts. You can add it to a custom Document component and this will take care of including the necessary scripts for every page (or you could add it on a per-page basis if you need more control):
// pages/document.tsx
import Document, {
DocumentContext,
Html,
Head,
Main,
NextScript,
} from "next/document";
import { GoogleAnalytics } from "nextjs-google-analytics-gtm";
class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const initialProps = await Document.getInitialProps(ctx);
return initialProps;
}
render() {
return (
<Html>
<Head>
<GoogleAnalytics />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;To track all pages views, call the usePagesViews hook inside a custom App component, make sure to include the necessary gtag scripts with the GoogleAnalytics component:
// pages/_app.tsx
import { GoogleAnalytics, usePagesViews } from "nextjs-google-analytics";
const App = ({ Component, pageProps }) => {
usePagesViews();
return (
<>
<Component {...pageProps} />
</>
);
};
export default App;The module also exports a pageView function that you can use if you need more control.
You can use the event function to track a custom event:
import { useState } from "react";
import Page from "../components/Page";
import { event } from "nextjs-google-analytics";
export function Contact() {
const [message, setMessage] = useState("");
const handleInput = (e) => {
setMessage(e.target.value);
};
const handleSubmit = (e) => {
e.preventDefault();
event("submit_form", {
category: "Contact",
label: message,
});
setState("");
};
return (
<Page>
<h1>This is the Contact page</h1>
<form onSubmit={handleSubmit}>
<label>
<span>Message:</span>
<textarea onChange={handleInput} value={message} />
</label>
<button type="submit">submit</button>
</form>
</Page>
);
}To send Next.js web vitals to Google Analytics you can use a custom event on the reportWebVitals function inside a custom App component:
// pages/_app.tsx
import { event } from "nextjs-google-analytics";
export function reportWebVitals({ id, name, label, value }) {
event(name, {
category: label === "web-vital" ? "Web Vitals" : "Next.js custom metric",
value: Math.round(name === "CLS" ? value * 1000 : value), // values must be integers
label: id, // id unique to current page load
nonInteraction: true, // avoids affecting bounce rate.
});
}
const App = ({ Component, pageProps }) => {
return (
<>
<Component {...pageProps} />
</>
);
};
export default App;If you are using TypeScript,you can import NextWebVitalsMetric from next/app:
import type { NextWebVitalsMetric } from "next/app";
export function reportWebVitals(metric: NextWebVitalsMetric) {
// ...
}The module is written in TypeScript and type definitions are included.
Contributions, issues and feature requests are welcome!
Give a ⭐️ if you like this project!