#### Install the gtag types package Install `@types/gtag.js` as a dev dependency with your preferred package manager: ```bash pnpm add -D @types/gtag.js ``` ```bash yarn add @types/gtag.js -D ``` ```bash npm install @types/gtag.js -D ``` #### Create a declaration file Next, create an `index.d.ts` file in the root of your current working directory: ```ts /// declare module "gtag.js"; declare global { interface Window { dataLayer?: object[]; } } export {}; ``` The reason that we declare this global in our declaration file: ```ts declare global { interface Window { dataLayer?: object[]; } } ``` is to ensure that the `window.dataLayer` array of objects is defined in the global context. This is an important detail because in the `dangerouslySetInnerHTML` of a script we'll set up shortly, we have the following raw js being executed: ```js window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '${gAnalytics.GA_MEASUREMENT_ID}', { page_path: window.location.pathname, }); ``` #### Update the tsconfig file Ensure that your `tsconfig.json` is configured to handle and track this new declaration file: ```json { "$schema": "https://json.schemastore.org/tsconfig", "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["./src/*"] }, "plugins": [ { "name": "next" } ], // rest... }, "include": [ "index.d.ts", "next-env.d.ts", "**/*.tsx", "**/*.ts", ".next/types/**/*.ts", // rest... ], "exclude": ["node_modules"] } ``` #### Create an analytics workup file Then, create an `analytics.ts` file in the `utils` directory. If using a top-level `src` folder (my personal preference) then this file should be located at `src/utils/analytics.ts`. Otherwise, create the file at `utils/analytics.ts`: ```ts export const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID ?? ""; export const GA_STREAM_ID = process.env.NEXT_PUBLIC_GA_STREAM_ID ?? ""; export const pageview = (url: URL | string) => { window.gtag("config", GA_MEASUREMENT_ID, { page_path: url }); }; export const event = ( action: Gtag.EventNames, { event_category, event_label, value, search_term, ...props }: Gtag.EventParams ) => { window.gtag("event", action, { event_category, event_label, value, search_term, ...props }); }; export const logException = ( url: URL, { description, fatal, ...rest }: Gtag.EventParams ) => { pageview(url); if (description) { window.gtag("event", "exception", { description, fatal, ...rest }); } }; ``` The `GA_MEASUREMENT_ID` env variable is an identifier provided by google analytics following the creation of a new property. It should begin with `G-*` for all Google Analytics 4 (GA4) properties. The `GA_STREAM_ID` env variable is defined on the same info screen that the tracking ID is retrieved from on new property creation. It should consist of numbers only. To reference either of these values for an existing property, navigate to your google analytics dashboard, select "Admin" on the left toolbar. Then, under "Data Collection and Modification" select "Data Streams". This will take you to a "Web Stream Details" screen that provides both the stream and measurement ids. #### Integrate analytics workup in the root layout file Import the "next/script" Script component and your analytics workup via a wildcard `import` into the root `layout.tsx` file ```tsx import Script from "next/script"; import * as gAnalytics from "@/utils/analytics"; ``` Add the following two Scripts between the closing body and html tags in the returned jsx: ```tsx export default function RootLayout({ children }: Readonly<{ children: React.ReactNode; }>) { return ( {children}