Next JS 13 GTM using @analytics/google-tag-manager

GlobalNextAnalytics.tsx

import {
  PropsWithChildren,
  FC,
  createContext,
  useState,
  useEffect,
} from "react";
import Analytics, { AnalyticsInstance } from "analytics";
import googleTagManager from "@analytics/google-tag-manager";
import { useRouter } from "next/router";

export const GlobalNextAnalyticsContext = createContext<{
  analytics?: AnalyticsInstance;
}>({});

export const GlobalNextAnalyticsProvider: FC<
  PropsWithChildren & {
    appName: string;
    gtmId: string;
  }
> = ({ children, appName, gtmId }) => {
  // Global State
  const { asPath } = useRouter();
  const [analytics, setAnalytics] = useState<AnalyticsInstance | undefined>(
    undefined
  );

  // On Mount set up analytics
  useEffect(() => {
    setAnalytics(
      Analytics({
        // Call this whatever you like.
        app: appName,
        plugins: [
          // Only register GMT in production
          ...(process.env.NODE_ENV === "production"
            ? [
                googleTagManager({
                  containerId: gtmId, // GTM_CONTAINER_ID,
                  enabled: true,
                }),
              ]
            : []),
        ],
      })
    );
  }, []);

  // On page change fire page change
  useEffect(() => {
    if (analytics) {
      analytics?.page();
    }
  }, [analytics, asPath]);

  return (
    <GlobalNextAnalyticsContext.Provider value={{ analytics }}>
      {children}
    </GlobalNextAnalyticsContext.Provider>
  );
};