google analytics nextjs

Solutions on MaxInterview for google analytics nextjs by the best coders in the world

showing results for - "google analytics nextjs"

13 Apr 2018

1do the following in _document.js or wherever you defined Head:
2
3<Head>
4  <script
5    async
6    src="https://www.googletagmanager.com/gtag/js?id=[Tracking ID]"
7  />
8
9  <script
10    dangerouslySetInnerHTML={{
11      __html: `
12            window.dataLayer = window.dataLayer || [];
13            function gtag(){dataLayer.push(arguments);}
14            gtag('js', new Date());
15            gtag('config', '[Tracking ID]');
16        `,
17    }}
18  />
19</Head>

source

Jessim

01 Apr 2020

1npm i -D @types/gtag.js
2

source

Ana Paula

06 Oct 2019

1export const GA_TRACKING_ID = "<INSERT_TAG_ID>";
2
3// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
4export const pageview = (url: URL): void => {
5  window.gtag("config", GA_TRACKING_ID, {
6    page_path: url,
7  });
8};
9
10type GTagEvent = {
11  action: string;
12  category: string;
13  label: string;
14  value: number;
15};
16
17// https://developers.google.com/analytics/devguides/collection/gtagjs/events
18export const event = ({ action, category, label, value }: GTagEvent): void => {
19  window.gtag("event", action, {
20    event_category: category,
21    event_label: label,
22    value,
23  });
24};
25

source

Kessy

28 Aug 2020

1import { AppProps } from "next/app";
2import { useRouter } from "next/router";
3import { useEffect } from "react";
4import * as gtag from "../lib/gtag";
5const isProduction = process.env.NODE_ENV === "production";
6
7const App = ({ Component, pageProps }: AppProps): JSX.Element => {
8  const router = useRouter();
9
10  useEffect(() => {
11    const handleRouteChange = (url: URL) => {
12      /* invoke analytics function only for production */
13      if (isProduction) gtag.pageview(url);
14    };
15    router.events.on("routeChangeComplete", handleRouteChange);
16    return () => {
17      router.events.off("routeChangeComplete", handleRouteChange);
18    };
19  }, [router.events]);
20  // eslint-disable-next-line react/jsx-props-no-spreading
21  return <Component {...pageProps} />;
22};
23
24export default App;
25
26

source

similar questions

router nextjs what is next js adding google analytics to angular nextjs reportwebvitals function next js data fetching with swr scss next js next js google script add google analytics to website laravel nuxt facebook graph api next js script tag google auth with nextjs set up google analytics global css not working in next js when added google analytics next js newsletter next js link add google tag manager to next js browserlist nextjs nextjs carousel where to add google analytics code

queries leading to this page