Merge pull request #1 from abhinavkumar985:add-view-tracking

add view tracking

Author: abhinavkumar985

global.d.ts

@@ -0,0 +1,5 @@
+// global.d.ts
+interface Window {
+  dataLayer: any[];
+  gtag: (...args: any[]) => void;
+}

package-lock.json

@@ -22,6 +22,7 @@
   "devDependencies": {
     "@eslint/eslintrc": "^3",
     "@tailwindcss/postcss": "^4",
+    "@types/gtag.js": "^0.0.20",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^20",
     "@types/react": "^19",

package.json

@@ -1,8 +1,9 @@
 "use client";
 import { FaLinkedin, FaGithub, FaMedium } from 'react-icons/fa';
-import { motion } from "motion/react";
+import { motion, useInView } from "framer-motion"; // Import useInView
 import Timeline from '../ui/components/Timeline';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react'; // Import useRef
+import { trackContentView } from '../tracking';
 
 export default function About() {
     const [skills, setSkills] = useState<string[]>([]);
@@ -134,6 +135,46 @@ export default function About() {
         },
     ];
 
+    // Ref for the "My Journey" section
+    const journeySectionRef = useRef(null);
+    const isJourneySectionInView = useInView(journeySectionRef, { once: true }); // Trigger only once
+
+    useEffect(() => {
+        if (isJourneySectionInView) {
+            trackContentView('journey_start');
+        }
+    }, [isJourneySectionInView]);
+
+    // Ref for the "Introduction" section
+    const introSectionRef = useRef(null);
+    const isIntroSectionInView = useInView(introSectionRef, { once: true });
+
+    useEffect(() => {
+        if (isIntroSectionInView) {
+            trackContentView('introduction');
+        }
+    }, [isIntroSectionInView]);
+
+    // Ref for the "Top Links" (Social Links) section
+    const topLinksSectionRef = useRef(null);
+    const isTopLinksSectionInView = useInView(topLinksSectionRef, { once: true });
+
+    useEffect(() => {
+        if (isTopLinksSectionInView) {
+            trackContentView('top_link');
+        }
+    }, [isTopLinksSectionInView]);
+
+    // Ref for the "Skills" section
+    const skillsSectionRef = useRef(null);
+    const isSkillsSectionInView = useInView(skillsSectionRef, { once: true });
+
+    useEffect(() => {
+        if (isSkillsSectionInView) {
+            trackContentView('skills');
+        }
+    }, [isSkillsSectionInView]);
+
     return (
         <div className="min-h-screen" role="main" aria-labelledby="about-section">
             <section id="about" className="container mx-auto py-16 px-4">
@@ -142,6 +183,7 @@ export default function About() {
                     initial={{ opacity: 0, y: 20 }}
                     animate={{ opacity: 1, y: 0 }}
                     transition={{ duration: 0.8 }}
+                    ref={introSectionRef} // Assign ref
                     className="text-center"
                 >
                     <h1 id="about-section" className="text-5xl font-bold mb-4">
@@ -156,42 +198,51 @@ export default function About() {
                 </motion.div>
 
                 {/* Social Links */}
-                <div className="flex justify-center space-x-6 mt-8" aria-label="Social Media Links">
-                    <a
-                        href="https://www.linkedin.com/in/abhinavkumar985/"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-5xl hover:text-accent transition-colors"
-                        style={{ color: 'rgb(10, 102, 194)' }}
-                        aria-label="LinkedIn Profile"
-                    >
-                        <FaLinkedin />
-                    </a>
-                    <a
-                        href="https://github.com/abhinavkumar985"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-5xl hover:text-accent transition-colors"
-                        aria-label="GitHub Profile"
-                    >
-                        <FaGithub />
-                    </a>
-                    <a
-                        href="https://medium.com/@abhinavkumar985"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-5xl hover:text-accent transition-colors"
-                        aria-label="Medium Blog"
-                    >
-                        <FaMedium />
-                    </a>
-                </div>
+                <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.8 }}
+                    ref={topLinksSectionRef} // Assign ref
+                    className="text-center"
+                >
+                    <div className="flex justify-center space-x-6 mt-8" aria-label="Social Media Links">
+                        <a
+                            href="https://www.linkedin.com/in/abhinavkumar985/"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-5xl hover:text-accent transition-colors"
+                            style={{ color: 'rgb(10, 102, 194)' }}
+                            aria-label="LinkedIn Profile"
+                        >
+                            <FaLinkedin />
+                        </a>
+                        <a
+                            href="https://github.com/abhinavkumar985"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-5xl hover:text-accent transition-colors"
+                            aria-label="GitHub Profile"
+                        >
+                            <FaGithub />
+                        </a>
+                        <a
+                            href="https://medium.com/@abhinavkumar985"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-5xl hover:text-accent transition-colors"
+                            aria-label="Medium Blog"
+                        >
+                            <FaMedium />
+                        </a>
+                    </div>
+                </motion.div>
 
                 {/* Timeline Section */}
                 <motion.div
                     initial={{ opacity: 0, y: 20 }}
                     animate={{ opacity: 1, y: 0 }}
                     transition={{ duration: 0.8, delay: 0.2 }}
+                    ref={journeySectionRef} // Assign the ref here
                     className="mt-16"
                 >
                     <h2 className="text-4xl font-semibold text-center" id="timeline-section">
@@ -205,6 +256,7 @@ export default function About() {
                     initial={{ opacity: 0, y: 20 }}
                     animate={{ opacity: 1, y: 0 }}
                     transition={{ duration: 0.8, delay: 0.4 }}
+                    ref={skillsSectionRef} // Assign ref
                     className="mt-16"
                 >
                     <h2 className="text-3xl font-semibold text-center mb-8" id="skills-section">

src/app/about/page.tsx

@@ -5,6 +5,8 @@ import Navigation from "./ui/components/Navigation";
 import Footer from "./ui/components/Footer";
 import { ThemeProvider, useTheme } from "./ui/components/ThemeContext";
 import { useEffect } from "react";
+import { trackLink } from "./tracking";
+import AnalyticsProvider from "./ui/components/AnalyticsProvider";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -24,29 +26,6 @@ export default function RootLayout({
   const gtmId = process.env.NEXT_PUBLIC_GTM_ID;
   const { theme } = useTheme();
 
-  useEffect(() => {
-    // @ts-expect-error type error type error
-    const handleOutboundLinkClick = (event) => {
-      const link = event.target.closest('a');
-      if (link && link.href && !link.href.includes(window.location.hostname)) {
-        const d = new URL(link.href);
-        // @ts-expect-error type error type error
-        gtag('event', 'click', {
-          event_category: 'outbound',
-          event_label: link.href,
-          event_value: link.textContent.trim() || d.hostname, // Add link text as event_value
-          transport_type: 'beacon',
-        });
-      }
-    };
-
-    document.addEventListener('click', handleOutboundLinkClick);
-
-    return () => {
-      document.removeEventListener('click', handleOutboundLinkClick);
-    };
-  }, []);
-
   return (
     <html lang="en" className={theme}>
       <head>
@@ -64,33 +43,19 @@ export default function RootLayout({
 
         {/* Favicon */}
         <link rel="icon" href="/favicon.ico" />
-        {gtmId && (
-          <>
-            <script
-              async
-              src={`https://www.googletagmanager.com/gtag/js?id=${gtmId}`}
-            />
-            <script id="google-analytics">
-              {`
-                window.dataLayer = window.dataLayer || [];
-                function gtag(){dataLayer.push(arguments);}
-                gtag('js', new Date());
-                gtag('config', '${gtmId}');
-              `}
-            </script>
-          </>
-        )}
       </head>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        <ThemeProvider>
-          <Navigation />
-          <main className="grid p-8 pb-20 sm:p-20 sm:mt-8 lg:mt-0">
-            {children}
-          </main>
-          <Footer />
-        </ThemeProvider>
+        <AnalyticsProvider gtagId={gtmId || ''}>
+          <ThemeProvider>
+            <Navigation />
+            <main className="grid p-8 pb-20 sm:p-20 sm:mt-8 lg:mt-0">
+              {children}
+            </main>
+            <Footer />
+          </ThemeProvider>
+        </AnalyticsProvider>
       </body>
     </html>
   );

src/app/layout.tsx

@@ -0,0 +1,22 @@
+
+/**
+ * Track link click
+ * @param link 
+ */
+
+export const trackLink = (link: HTMLAnchorElement) => {
+    if (!window.gtag) return;
+    gtag('event', 'click', {
+        event_category: 'outbound',
+        event_label: link.href,
+        event_value: link.text || link.getAttribute('aria-label') || link.getAttribute('title'), // Add link text as event_value
+        transport_type: 'beacon',
+    });
+}
+
+export const trackContentView = (content: string) => {
+    if (!window.gtag) return;
+    gtag('event', 'view_content', {
+        item_name: content.split(" ").join("_"), // Name of the important information
+    });
+}

src/app/tracking.ts

@@ -0,0 +1,52 @@
+// providers/AnalyticsProvider.tsx
+'use client'; // This is a client component
+
+import React, { useEffect } from 'react';
+import Script from 'next/script';
+import { trackLink } from '@/app/tracking';
+
+interface AnalyticsProviderProps {
+    gtagId: string;
+    children: React.ReactNode;
+}
+
+const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ gtagId, children }) => {
+    useEffect(() => {
+        window.dataLayer = window.dataLayer || [];
+        function gtag() {
+            window.dataLayer.push(arguments);
+        }
+        window.gtag = gtag;
+        // @ts-expect-error
+        gtag('js', new Date());
+        // @ts-expect-error
+        gtag('config', gtagId);
+
+
+
+        // @ts-expect-error type error type error
+        const handleOutboundLinkClick = (event) => {
+            const link = event.target.closest('a');
+            if (link && link.href && !link.href.includes(window.location.hostname)) {
+                trackLink(link);
+            }
+        };
+
+        document.addEventListener('click', handleOutboundLinkClick);
+        return () => {
+            document.removeEventListener('click', handleOutboundLinkClick);
+        };
+    }, [gtagId]);
+
+    return (
+        <>
+            <Script
+                strategy="afterInteractive"
+                src={`https://www.googletagmanager.com/gtag/js?id=${gtagId}`}
+            />
+            {children}
+        </>
+    );
+};
+
+export default AnalyticsProvider;

src/app/ui/components/AnalyticsProvider.tsx

@@ -1,8 +1,21 @@
+"use client"; // Ensure this is a client component for hooks
+import { trackContentView } from '@/app/tracking';
+import { useEffect, useRef } from 'react';
 import { FaLinkedin, FaGithub, FaMedium, FaDev, FaStackOverflow } from 'react-icons/fa';
+import { useInView } from 'framer-motion'; // Import useInView
 
 const Footer = () => {
+    const footerRef = useRef(null);
+    const isInView = useInView(footerRef, { once: true }); // Trigger only once
+
+    useEffect(() => {
+        if (isInView) {
+            trackContentView('footer');
+        }
+    }, [isInView]);
+
     return (
-        <footer className="bg-gray-900 dark:bg-gray-700 text-gray-100 dark:text-gray-300 mx-auto py-16 px-4 main-footer" role="contentinfo">
+        <footer ref={footerRef} className="bg-gray-900 dark:bg-gray-700 text-gray-100 dark:text-gray-300 mx-auto py-16 px-4 main-footer" role="contentinfo">
             <div className="container mx-auto text-center">
                 {/* Main Text */}
                 <h2 className="text-3xl font-bold text-teal-400 dark:text-teal-300 font-mono" aria-label="Living, learning, and leveling up">