Google Analytics for Next.js
This package optimizes script loading using Next.js Script
tag, which means that it will only work on apps using Next.js >= 11.0.0.
npm install --save nextjs-google-analytics
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 App 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/_app.js
import { GoogleAnalytics } from "nextjs-google-analytics";
const App = ({ Component, pageProps }) => {
return (
<>
<GoogleAnalytics />
<Component {...pageProps} />
</>
);
};
export default App;
By default, scripts are loaded using the afterInteractive
strategy, which means they are injected on the client-side and will run after hydration.
If you need more control, the component exposes the strategy prop to control how the scripts are loaded:
// pages/_app.js
import { GoogleAnalytics } from "nextjs-google-analytics";
const App = ({ Component, pageProps }) => {
return (
<>
<GoogleAnalytics strategy="lazyOnLoad" />
<Component {...pageProps} />
</>
);
};
export default App;
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.js
import { GoogleAnalytics, usePagesViews } from "nextjs-google-analytics";
const App = ({ Component, pageProps }) => {
usePagesViews();
return (
<>
<GoogleAnalytics />
<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.js
import { GoogleAnalytics, 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 (
<>
<GoogleAnalytics />
<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!