Google Analytics for Next.js with support for GTM server container
npm install nextjs-google-analytics-gtm
Google Analytics for Next.js
``
npm install --save nextjs-google-analytics-gtm
This is a fork which allows users to use the original package by Mauricio Robayo, but with a custom GTM server-side container.
To do this 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):
`js
// 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 (
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:
`js
// pages/_app.js
import { GoogleAnalytics, usePagesViews } from "nextjs-google-analytics";
const App = ({ Component, pageProps }) => {
usePagesViews();
return (
<>
);
};
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:
`js
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 (
This is the Contact 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:
`js
// pages/_app.js
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 (
<>
);
};
export default App;
`
If you are using TypeScript,you can import NextWebVitalsMetric from next/app:
`ts
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!