diff --git a/site/content/howto/analytics.md b/site/content/howto/analytics.md
new file mode 100644
index 00000000..25fb35e1
--- /dev/null
+++ b/site/content/howto/analytics.md
@@ -0,0 +1,77 @@
+# How to add Google Analytics?
+
+>[!todo] Prerequisites
+>- [Google Analytics account](https://support.google.com/analytics/answer/9304153?hl=en)
+>- [Google tag ID](https://support.google.com/analytics/answer/12270356?hl=en#:~:text=A%20Measurement%20ID%20is%20an,same%20as%20your%20destination%20ID.)
+
+The following piece of code adds pageview tracking functionality to the custom Next.js App in `/pages/_app.tsx`, but you can use it only in specific pages if you want.
+
+```tsx
+// /pages/_app.tsx
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import Script from "next/script";
+
+// Step 0:
+// Add your Google tag ID to your local .env.local file, e.g. under GA_TRACKING_ID
+
+// Step 1: create the following pageview function
+const pageview = ({
+ url,
+ analyticsID,
+}: {
+ url: string;
+ analyticsID: string;
+}) => {
+ if (typeof window.gtag !== undefined) {
+ window.gtag("config", analyticsID, {
+ page_path: url,
+ });
+ }
+};
+
+export default function MyApp({ Component, pageProps }) {
+ const router = useRouter();
+
+ // ... your code
+
+ // Step 3: Add the following useEffect to trigger pageview on each route change
+ useEffect(() => {
+ const handleRouteChange = (url) => {
+ pageview(url, GA_TRACKING_ID);
+ };
+ router.events.on("routeChangeComplete", handleRouteChange);
+ return () => {
+ router.events.off("routeChangeComplete", handleRouteChange);
+ };
+ }, [router.events]);
+
+ return (
+ {/* Step 4: Install Google Analytics tag */}
+ <>
+
+
+
+ >
+ );
+};
+```
+
+>[!info]
+> For more info on measuring pageviews with Google Analytics see [Google Analytics documentation](https://developers.google.com/analytics/devguides/collection/gtagjs/pages).
\ No newline at end of file