/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 vote160 views1 answer
Tailwindcsss next js change font
Javascript Next.js
-1 vote140 views1 answer
Import css file in next js
Javascript Next.js
0 vote149 views1 answer
Get cuurent route name nextjs
Javascript Next.js
5 votes248 views3 answers
Nextjs starter
Javascript Next.js
0 vote146 views1 answer
Add google tag manager to next js
Javascript Next.js
0 vote154 views1 answer
How to connect next js with postgresql localhost
Javascript Next.js
0 vote158 views1 answer
Nextjs global scss variables
Javascript Next.js
0 vote173 views1 answer
Nextjs error can not find next/bable
Javascript Next.js
48 votes256 views1 answer
Emmet not working in react nextjs
Javascript Next.js
0 vote150 views1 answer
Next js cannot find module 'next/babel'
Javascript Next.js