diff --git a/gtag.d.ts b/gtag.d.ts
new file mode 100644
index 00000000..e02ce14e
--- /dev/null
+++ b/gtag.d.ts
@@ -0,0 +1,3 @@
+///
+
+declare module "gtag.js";
diff --git a/package.json b/package.json
index 6738feab..c638524d 100644
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
"@semantic-release/npm": "^9.0.1",
"@semantic-release/release-notes-generator": "^10.0.3",
"@types/graphql": "^14.5.0",
+ "@types/gtag.js": "^0.0.18",
"@types/jest": "^29.2.4",
"@types/react-beautiful-dnd": "^13.1.3",
"@types/react-slick": "^0.23.12",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 40415dcf..8f60a6d5 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,7 @@
import Provider from "@/provider/MainProvider";
import React from "react";
+import * as gtag from "@/hooks/useGtag";
+import Script from "next/script";
export const metadata = {
title: "BSM",
@@ -11,8 +13,27 @@ export default function RootLayout({
}: {
children: React.ReactNode;
}) {
+ gtag.useGtag();
return (
+
+
{children}
diff --git a/src/hooks/useGtag.ts b/src/hooks/useGtag.ts
new file mode 100644
index 00000000..e5ea4b50
--- /dev/null
+++ b/src/hooks/useGtag.ts
@@ -0,0 +1,40 @@
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+
+export const GA_TRACKING_ID = "G-J8DK7F6M37";
+
+export const pageview = (url: URL) => {
+ window.gtag("config", GA_TRACKING_ID, {
+ page_path: url,
+ });
+};
+
+export const event = (
+ action: Gtag.EventNames,
+ { event_category, event_label, value }: Gtag.EventParams,
+) => {
+ window.gtag("event", action, {
+ event_category,
+ event_label,
+ value,
+ });
+};
+
+export const useGtag = () => {
+ const router = useRouter();
+
+ useEffect(() => {
+ if (process.env.NODE_ENV === "development") return;
+
+ const handleRouteChange = (url: URL) => {
+ pageview(url);
+ };
+
+ router.events.on("routeChangeComplete", handleRouteChange);
+ router.events.on("hashChangeComplete", handleRouteChange);
+ return () => {
+ router.events.off("routeChangeComplete", handleRouteChange);
+ router.events.off("hashChangeComplete", handleRouteChange);
+ };
+ }, [router.events]);
+};
diff --git a/yarn.lock b/yarn.lock
index f35ef15c..d018b802 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1832,6 +1832,11 @@
dependencies:
graphql "*"
+"@types/gtag.js@^0.0.18":
+ version "0.0.18"
+ resolved "https://registry.yarnpkg.com/@types/gtag.js/-/gtag.js-0.0.18.tgz#d6bc7cb1acc64ff4f4e4be918d401c53fe9ccf20"
+ integrity sha512-GJxnIvuXuVhKaHfsOdzGipoOoXq72y3mdcncc9h6i6E7nlz89zBEj2wrLM7bqO5Xk9Lm2B94MwdQsSwRlaPSWw==
+
"@types/hast@^2.0.0":
version "2.3.8"
resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.8.tgz#4ac5caf38b262b7bd5ca3202dda71f0271635660"