@alphasquad/saleor-template-advance 0.1.0

package/src/app/hooks/useGTMEngagement.ts

@@ -0,0 +1,71 @@
+"use client";
+
+import { useEffect, useRef } from 'react';
+import { gtmScrollDepth, gtmEngagementTime } from '../utils/googleTagManager';
+
+export function useGTMEngagement(gtmId?: string | null) {
+  const startTimeRef = useRef<number>(Date.now());
+  const scrollThresholdsRef = useRef<Set<number>>(new Set());
+  const lastScrollTimeRef = useRef<number>(Date.now());
+  const engagementTimerRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    // Don't track if GTM ID is not provided
+    if (!gtmId) return;
+    startTimeRef.current = Date.now();
+    
+    // Track scroll depth
+    const handleScroll = () => {
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+      const scrollPercent = Math.round((scrollTop / docHeight) * 100);
+      
+      // Track scroll milestones: 25%, 50%, 75%, 90%
+      const milestones = [25, 50, 75, 90];
+      for (const milestone of milestones) {
+        if (scrollPercent >= milestone && !scrollThresholdsRef.current.has(milestone)) {
+          scrollThresholdsRef.current.add(milestone);
+          gtmScrollDepth(milestone, window.location.pathname, gtmId);
+        }
+      }
+      
+      lastScrollTimeRef.current = Date.now();
+    };
+
+    // Track engagement time every 15 seconds
+    const trackEngagementTime = () => {
+      const currentTime = Date.now();
+      const timeSinceLastScroll = currentTime - lastScrollTimeRef.current;
+      
+      // Only track if user has been active recently (scrolled within last 30 seconds)
+      if (timeSinceLastScroll < 30000) {
+        const engagementTime = currentTime - startTimeRef.current;
+        gtmEngagementTime(engagementTime, gtmId);
+      }
+    };
+
+    // Set up event listeners
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    
+    // Track engagement time every 15 seconds
+    engagementTimerRef.current = setInterval(trackEngagementTime, 15000);
+
+    // Cleanup
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      if (engagementTimerRef.current) {
+        clearInterval(engagementTimerRef.current);
+      }
+      
+      // Track final engagement time on unmount
+      const finalEngagementTime = Date.now() - startTimeRef.current;
+      if (finalEngagementTime > 1000) { // Only track if user spent more than 1 second
+        gtmEngagementTime(finalEngagementTime, gtmId);
+      }
+    };
+  }, [gtmId]);
+
+  return null; // This hook doesn't return anything, just tracks events
+}
+
+export default useGTMEngagement;

package/src/app/hooks/useGoogleAnalytics.ts

@@ -0,0 +1,145 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { usePathname } from "next/navigation";
+import { 
+  trackPageView, 
+  trackUserEngagement, 
+  trackScrollDepth,
+  trackTimingEvent,
+  trackCustomEvent
+} from "@/app/utils/googleAnalytics";
+
+export const useGoogleAnalytics = (measurementId?: string | null) => {
+  const pathname = usePathname();
+  const pageStartTime = useRef<number>(Date.now());
+  const lastScrollDepth = useRef<number>(0);
+  const engagementInterval = useRef<NodeJS.Timeout | null>(null);
+  const [timeOnPage, setTimeOnPage] = useState<number>(0);
+
+  useEffect(() => {
+    const currentTime = Date.now();
+    pageStartTime.current = currentTime;
+    setTimeOnPage(0);
+
+    trackPageView(window.location.href, undefined, measurementId);
+
+    const handleScroll = () => {
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+      const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
+      const scrollPercent = Math.round((scrollTop / scrollHeight) * 100);
+
+      if (scrollPercent > lastScrollDepth.current && scrollPercent % 25 === 0) {
+        lastScrollDepth.current = scrollPercent;
+        trackScrollDepth(scrollPercent, measurementId);
+      }
+    };
+
+    const handleBeforeUnload = () => {
+      const timeSpent = Date.now() - pageStartTime.current;
+      trackTimingEvent("time_on_page", timeSpent, "engagement", measurementId);
+      trackUserEngagement(timeSpent, measurementId);
+    };
+
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "hidden") {
+        const timeSpent = Date.now() - pageStartTime.current;
+        trackUserEngagement(timeSpent, measurementId);
+      } else {
+        pageStartTime.current = Date.now();
+      }
+    };
+
+    const updateTimeOnPage = () => {
+      const currentTimeOnPage = Date.now() - pageStartTime.current;
+      setTimeOnPage(currentTimeOnPage);
+    };
+
+    engagementInterval.current = setInterval(updateTimeOnPage, 1000);
+
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+
+    return () => {
+      if (engagementInterval.current) {
+        clearInterval(engagementInterval.current);
+      }
+      
+      const timeSpent = Date.now() - pageStartTime.current;
+      trackTimingEvent("time_on_page", timeSpent, "engagement", measurementId);
+      trackUserEngagement(timeSpent, measurementId);
+
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [pathname, measurementId]);
+
+  return {
+    timeOnPage: Math.floor(timeOnPage / 1000),
+  };
+};
+
+export const useTrackEntrance = (measurementId?: string | null) => {
+  const pathname = usePathname();
+
+  useEffect(() => {
+    const referrer = document.referrer;
+    const isEntrance = !referrer || !referrer.includes(window.location.hostname);
+
+    if (isEntrance) {
+      trackPageView(window.location.href, undefined, measurementId);
+      
+      const urlParams = new URLSearchParams(window.location.search);
+      const utmSource = urlParams.get("utm_source");
+      const utmMedium = urlParams.get("utm_medium");
+      const utmCampaign = urlParams.get("utm_campaign");
+
+      if (utmSource || utmMedium || utmCampaign) {
+        trackCustomEvent("entrance_with_utm", {
+          utm_source: utmSource,
+          utm_medium: utmMedium,
+          utm_campaign: utmCampaign,
+          page_location: window.location.href,
+        }, measurementId);
+      }
+
+      trackCustomEvent("page_entrance", {
+        entrance_page: pathname,
+        referrer: referrer || "direct",
+        is_new_session: true,
+      }, measurementId);
+    }
+  }, [pathname, measurementId]);
+};
+
+export const useTrackExit = (measurementId?: string | null) => {
+  const pathname = usePathname();
+
+  useEffect(() => {
+    const handleBeforeUnload = () => {
+      trackCustomEvent("page_exit", {
+        exit_page: pathname,
+        time_on_page: Date.now() - performance.now(),
+      }, measurementId);
+    };
+
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "hidden") {
+        trackCustomEvent("page_exit", {
+          exit_page: pathname,
+          exit_type: "tab_hidden",
+        }, measurementId);
+      }
+    };
+
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [pathname, measurementId]);
+};

package/src/app/layout.tsx

@@ -0,0 +1,149 @@
+import Layout from "@/app/components/layout/rootLayout";
+import { ThemeProvider } from "@/app/components/theme/theme-provider";
+import ConditionalGoogleAnalytics from "./components/analytics/ConditionalGoogleAnalytics";
+import ConditionalGTMNoscript from "./components/analytics/ConditionalGTMNoscript";
+import type { Metadata } from "next";
+import { Archivo, Days_One } from "next/font/google";
+import type React from "react";
+import "swiper/css";
+import "swiper/css/autoplay";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import AnalyticsScripts from "./components/analytics/AnalyticsScripts";
+import { TokenExpirationHandler } from "./components/auth/TokenExpirationHandler";
+import ApolloWrapper from "./components/providers/ApolloWrapper";
+import GoogleTagManagerProvider from "./components/providers/GoogleTagManagerProvider";
+import { ServerAppConfigurationProvider } from "./components/providers/ServerAppConfigurationProvider";
+import { getClientSafeConfiguration } from "./utils/serverConfigurationService";
+import RecaptchaProvider from "./components/providers/RecaptchaProvider";
+import "./globals.css";
+import GoogleAnalyticsProvider from "./components/providers/GoogleAnalyticsProvider";
+import { getStoreName } from "./utils/branding";
+import YMMStatusProvider from "./components/providers/YMMStatusProvider";
+import { getSiteUrl } from "@/lib/seo/site";
+import {
+  generateOrganizationSchema,
+  generateWebsiteSchema,
+} from "@/lib/schema";
+
+const archivo = Archivo({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-archivo",
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
+});
+
+const daysOne = Days_One({
+  weight: "400",
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-days-one",
+});
+
+const appIcon = "/favicon.ico";
+
+export const metadata: Metadata = {
+  metadataBase: getSiteUrl(),
+  title: getStoreName(),
+  description:
+    "Your premier online destination for quality products with fast shipping and exceptional service",
+  openGraph: {
+    title: getStoreName(),
+    description:
+      "Your premier online destination for quality products with fast shipping and exceptional service",
+    type: "website",
+    url: "/",
+    images: [
+      {
+        url: "/Logo.png",
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: getStoreName(),
+    description:
+      "Your premier online destination for quality products with fast shipping and exceptional service",
+    images: ["/Logo.png"],
+  },
+  icons: {
+    icon: [
+      {
+        url: appIcon,
+        sizes: "32x32",
+        type: "image/png",
+      },
+    ],
+    shortcut: [
+      {
+        url: appIcon,
+        sizes: "32x32",
+        type: "image/png",
+      },
+    ],
+  },
+};
+
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  // Fetch configuration on server side
+  const configuration = await getClientSafeConfiguration();
+  const baseUrl = (process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000").replace(
+    /\/$/,
+    ""
+  );
+  const storeName = getStoreName();
+  const orgSchema = generateOrganizationSchema(storeName, baseUrl, "/Logo.png", []);
+  const webSchema = generateWebsiteSchema(storeName, baseUrl, "/search");
+
+  return (
+    <html lang="en" className={`${archivo.variable} ${daysOne.variable}`}>
+      <head>
+        <script
+          // Mark JS as enabled early to support progressive-enhancement patterns
+          // (hide SSR fallbacks once client takes over).
+          dangerouslySetInnerHTML={{
+            __html: "document.documentElement.dataset.js='1';",
+          }}
+        />
+        {configuration?.google?.search_console_verification_content && (
+          <meta
+            name="google-site-verification"
+            content={configuration.google.search_console_verification_content}
+          />
+        )}
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(orgSchema) }}
+        />
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(webSchema) }}
+        />
+      </head>
+      <body className="min-h-screen bg-background font-sans antialiased">
+        <ApolloWrapper>
+          <ServerAppConfigurationProvider configuration={configuration}>
+            <ConditionalGTMNoscript />
+            <ThemeProvider>
+              <RecaptchaProvider>
+                <AnalyticsScripts />
+                <GoogleAnalyticsProvider>
+                  <GoogleTagManagerProvider>
+                    <YMMStatusProvider />
+                    <TokenExpirationHandler />
+                    <Layout>{children}</Layout>
+                  </GoogleTagManagerProvider>
+                </GoogleAnalyticsProvider>
+              </RecaptchaProvider>
+            </ThemeProvider>
+            <ConditionalGoogleAnalytics />
+          </ServerAppConfigurationProvider>
+        </ApolloWrapper>
+      </body>
+    </html>
+  );
+}

package/src/app/not-found.tsx

@@ -0,0 +1,31 @@
+import Link from "next/link";
+
+export default function NotFoundPage() {
+  return (
+    <main className="min-h-[70vh] flex items-center justify-center px-6 py-16">
+      <div className="max-w-xl w-full text-center space-y-6">
+        <h1 className="text-5xl md:text-6xl font-primary uppercase tracking-tight">
+          404
+        </h1>
+        <p className="text-[var(--color-secondary-600)]">
+          The page you are looking for does not exist.
+        </p>
+        <div className="flex items-center justify-center gap-4">
+          <Link
+            href="/"
+            className="px-4 py-2 bg-[var(--color-primary-600)] text-white hover:opacity-90 transition-opacity"
+          >
+            Go Home
+          </Link>
+          <Link
+            href="/products/all"
+            className="px-4 py-2 border border-[var(--color-secondary-300)] hover:bg-[var(--color-secondary-100)] transition-colors"
+          >
+            Browse Products
+          </Link>
+        </div>
+      </div>
+    </main>
+  );
+}
+

package/src/app/order-confirmation/layout.tsx

@@ -0,0 +1,19 @@
+import type { Metadata } from "next"
+import { getStoreName } from "@/app/utils/branding"
+
+export const metadata: Metadata = {
+  title: `Order Confirmation - ${getStoreName()}`,
+  description: "Your order has been confirmed. View order details, tracking information, and estimated delivery date.",
+  robots: {
+    index: false,
+    follow: false,
+  },
+}
+
+export default function OrderConfirmationLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return children
+}

package/src/app/order-confirmation/page.tsx

@@ -0,0 +1,12 @@
+import { Suspense } from "react";
+
+import Summary from "./summary";
+import LoadingUI from "../components/reuseableUI/loadingUI";
+
+export default function OrderConfirmationPage() {
+  return (
+    <Suspense fallback={<LoadingUI />}>
+      <Summary />
+    </Suspense>
+  );
+}