/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 vote227 views1 answer
How to make nextjs image component responsive
Javascript Next.js
1 vote261 views1 answer
Strart a nextjs project
Javascript Next.js
3 votes286 views1 answer
React icons in nextJS
Javascript Next.js
48 votes266 views1 answer
Emmet not working in react nextjs
Javascript Next.js
43 votes301 views2 answers
Run nextjs in separate port
Javascript Next.js
0 vote234 views1 answer
Next js image contentful
Javascript Next.js
23 votes258 views2 answers
Add favicon to next js static site
Javascript Next.js
0 vote232 views1 answer
How to connect next js with postgresql localhost
Javascript Next.js
0 vote218 views1 answer
How to update the react version in next js app
Javascript Next.js
0 vote224 views1 answer
Next js styled components classname did not match
Javascript Next.js