nextjs-google-analytics-gtm

v1.1.12

Published

3 years ago

Google Analytics for Next.js with support for GTM server container

Downloads

369

0High
0Medium
0Low

emilianogarcialopez

gtag google analytics next.js analytics google tag manager gtm ga

Nextjs Google Analytics

Google Analytics for Next.js

Installation

npm install --save nextjs-google-analytics-gtm

Usage

Note:

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.

Scripts

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;

Page views

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 (
    <>
      <Component {...pageProps} />
    </>
  );
};

export default App;

The module also exports a pageView function that you can use if you need more 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>
  );
}

Web Vitals

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 { 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) {
  // ...
}

TypeScript

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

Contributing

Contributions, issues and feature requests are welcome!

Show your support

Give a ⭐️ if you like this project!

LICENSE

MIT