Track page_loaded event

Author: st-jliu

pages/_app.js

@@ -5,22 +5,39 @@ if (typeof window === 'undefined') {
 
 import "../styles/base.scss";
 import { useState, useEffect } from "react";
+import { useRouter } from "next/router";
 
 import SelectedContext from "../ctx/SelectedContext";
 
 import { checkTheme } from "../utils/helpers";
+import { trackPageLoaded } from "../utils/gtm";
 import Nav from "../components/Nav";
 import SelectionBar from "../components/SelectionBar";
 import PopularContext from "../ctx/PopularContext";
 import { SessionProvider } from "next-auth/react";
 
 function winstall({ Component, pageProps: { session, ...pageProps } }) {
+  const router = useRouter();
+
   const [selectedApps, setSelectedApps] = useState([]);
   const selectedAppValue = { selectedApps, setSelectedApps };
 
   const [popular, setPopular] = useState([]);
   const popularApps = { popular, setPopular };
 
+  useEffect(() => {
+    // Track page views on route change
+    const handleRouteChange = (url) => {
+      trackPageLoaded(url);
+    };
+
+    router.events.on("routeChangeComplete", handleRouteChange);
+
+    return () => {
+      router.events.off("routeChangeComplete", handleRouteChange);
+    };
+  }, [router.events]);
+
   useEffect(() => {
     checkTheme();
 

utils/gtm.js

@@ -0,0 +1,18 @@
+/**
+ * Google Tag Manager DataLayer Helper
+ */
+
+/**
+ * Push a page view event to GTM dataLayer
+ * @param {string} url - The page URL/path
+ */
+export const trackPageLoaded = (url) => {
+  if (typeof window !== "undefined" && window.dataLayer) {
+    window.dataLayer.push({
+      event: "page_loaded",
+      page_location: window.location.href,
+      page_path: url,
+      page_title: document.title
+    });
+  }
+};