/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 vote209 views1 answer
Nextjs amp
Javascript Next.js
2 votes276 views1 answer
Next js active link
Javascript Next.js
0 vote158 views1 answer
Next js css not working
Javascript Next.js
25 votes284 views1 answer
Next js disable ssr
Javascript Next.js
48 votes268 views1 answer
Emmet not working in react nextjs
Javascript Next.js
0 vote164 views1 answer
Nextjs starter template with auth
Javascript Next.js
0 vote159 views1 answer
Back button next js
Javascript Next.js
0 vote174 views1 answer
Pass object to query on Router.push NextJs
Javascript Next.js
1 vote269 views1 answer
Strart a nextjs project
Javascript Next.js
0 vote170 views1 answer
How to connect next js with postgresql localhost
Javascript Next.js