/Javascript/Next.js/Google analytics nextjs

Google analytics nextjs

npm i -D @types/gtag.js

Source: stackoverflow.com

Google analytics nextjs

export const GA_TRACKING_ID = "<INSERT_TAG_ID>";

// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const pageview = (url: URL): void => {
  window.gtag("config", GA_TRACKING_ID, {
    page_path: url,
  });
};

type GTagEvent = {
  action: string;
  category: string;
  label: string;
  value: number;
};

// https://developers.google.com/analytics/devguides/collection/gtagjs/events
export const event = ({ action, category, label, value }: GTagEvent): void => {
  window.gtag("event", action, {
    event_category: category,
    event_label: label,
    value,
  });
};

Source: stackoverflow.com

Google analytics nextjs

import { AppProps } from "next/app";
import { useRouter } from "next/router";
import { useEffect } from "react";
import * as gtag from "../lib/gtag";
const isProduction = process.env.NODE_ENV === "production";

const App = ({ Component, pageProps }: AppProps): JSX.Element => {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url: URL) => {
      /* invoke analytics function only for production */
      if (isProduction) gtag.pageview(url);
    };
    router.events.on("routeChangeComplete", handleRouteChange);
    return () => {
      router.events.off("routeChangeComplete", handleRouteChange);
    };
  }, [router.events]);
  // eslint-disable-next-line react/jsx-props-no-spreading
  return <Component {...pageProps} />;
};

export default App;

-2

Source: stackoverflow.com

Similar codes

0 vote396 views1 answer
Nextjs error can not find next/bable
Javascript Next.js
0 vote410 views1 answer
Next js image contentful
Javascript Next.js
29 votes456 views3 answers
Nextjs
Javascript Next.js
23 votes440 views2 answers
Add favicon to next js static site
Javascript Next.js
43 votes477 views2 answers
Run nextjs in separate port
Javascript Next.js
0 vote388 views1 answer
Next js styled components classname did not match
Javascript Next.js
0 vote466 views1 answer
Nextjs amp
Javascript Next.js
1 vote460 views1 answer
Multiple classname nextjs
Javascript Next.js
0 vote382 views1 answer
Window resize next js
Javascript Next.js
0 vote436 views1 answer
Add google tag manager to next js
Javascript Next.js