nextjs-google-analytics

Nextjs Google Analytics

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.

Installation

npm install --save nextjs-google-analytics

Usage

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:

• Vercel
• Netlify

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.

Scripts

Use the GoogleAnalytics components to load the gtag scripts. You can add them to _app and this will take care of including the necessary scripts for every page, but you could also 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;

Page views

To track page views, call the usePagesViews hook inside _app.js, make sure to include the necessary script with the GoogleAnalytics component:

// /pages/_app.js

import { GoogleAnalytics, usePagesViews } from "nextjs-google-analytics";

const App = ({ Component, pageProps }) => {
  usePagesView();

  return (
    <>
      <GoogleAnalytics />
      <Component {...pageProps} />
    </>
  );
};

export default App;

The module also exports a pageView method that you can use if you need more grain control.

Custom event

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>
  );
}

TypeScript

The module is written in TypeScript and type definitions are included.

LICENSE

MIT