Feature/ga4 (#15)

romanindev · web-flow · commit f32d8c9742ac · 2026-03-21T10:37:02.000+01:00
diff --git a/index.html b/index.html
@@ -1,6 +1,18 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-LKVJ6R5XLV"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+
+      gtag('config', 'G-LKVJ6R5XLV');
+    </script>
+
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -1,4 +1,5 @@
 import { Box, Container, Link, Stack, Typography } from '@mui/material';
+import { createTrackedLinkHandler } from '../../services/analytics-handlers.ts';
 
 export const Footer = () => {
   return (
@@ -27,6 +28,11 @@ export const Footer = () => {
               target="_blank"
               rel="noreferrer"
               underline="hover"
+              onClick={createTrackedLinkHandler('npm', {
+                location: 'footer',
+                url: 'https://github.com/dfsyncjs/dfsync',
+                label: 'npm',
+              })}
             >
               npm
             </Link>
@@ -35,6 +41,11 @@ export const Footer = () => {
               target="_blank"
               rel="noreferrer"
               underline="hover"
+              onClick={createTrackedLinkHandler('github', {
+                location: 'footer',
+                url: 'https://github.com/dfsyncjs/dfsync',
+                label: 'GitHub',
+              })}
             >
               GitHub
             </Link>
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -3,6 +3,7 @@ import { AppBar, Box, Button, Container, Toolbar } from '@mui/material';
 import { Link as RouterLink } from 'react-router-dom';
 import { Brand } from '../Brand/Brand';
 import { ThemeToggle } from '../ThemeToggle/ThemeToggle';
+import { createTrackedLinkHandler } from '../../services/analytics-handlers.ts';
 
 export const Header = () => {
   return (
@@ -20,14 +21,28 @@ export const Header = () => {
         <Toolbar disableGutters sx={{ minHeight: 72, gap: 2, justifyContent: 'space-between' }}>
           <Brand />
           <Box sx={{ flexShrink: 0 }}>
-            <Button component={RouterLink} to="/docs" color="inherit">
+            <Button
+              component={RouterLink}
+              to="/docs"
+              color="inherit"
+              onClick={createTrackedLinkHandler('docs', {
+                location: 'header',
+                url: 'https://github.com/dfsyncjs/dfsync',
+                label: 'Docs',
+              })}
+            >
               Docs
             </Button>
             <Button
               color="inherit"
               href="https://www.npmjs.com/package/@dfsync/client"
               target="_blank"
               rel="noreferrer"
+              onClick={createTrackedLinkHandler('npm', {
+                location: 'header',
+                url: 'https://github.com/dfsyncjs/dfsync',
+                label: 'npm',
+              })}
             >
               npm
             </Button>
@@ -37,6 +52,11 @@ export const Header = () => {
               target="_blank"
               rel="noreferrer"
               startIcon={<GitHubIcon />}
+              onClick={createTrackedLinkHandler('github', {
+                location: 'header',
+                url: 'https://github.com/dfsyncjs/dfsync',
+                label: 'GitHub',
+              })}
             >
               GitHub
             </Button>
diff --git a/src/components/Hero/Hero.tsx b/src/components/Hero/Hero.tsx
@@ -4,6 +4,7 @@ import { Box, Button, Chip, Container, Stack, Typography } from '@mui/material';
 import { Link as RouterLink } from 'react-router-dom';
 import { InstallCommand } from '../InstallCommand/InstallCommand';
 import { ProjectBadges } from '../ProjectBadges/ProjectBadges.tsx';
+import { createTrackedLinkHandler } from '../../services/analytics-handlers.ts';
 
 export const Hero = () => {
   return (
@@ -74,6 +75,11 @@ export const Hero = () => {
               target="_blank"
               rel="noreferrer"
               endIcon={<OpenInNewIcon />}
+              onClick={createTrackedLinkHandler('npm', {
+                location: 'hero',
+                url: 'https://github.com/dfsyncjs/dfsync',
+                label: 'View on npm',
+              })}
             >
               View on npm
             </Button>
@@ -84,6 +90,11 @@ export const Hero = () => {
               size="medium"
               to="/docs"
               startIcon={<ListIcon />}
+              onClick={createTrackedLinkHandler('docs', {
+                location: 'hero',
+                url: 'https://github.com/dfsyncjs/dfsync',
+                label: 'Documentation',
+              })}
             >
               Documentation
             </Button>
diff --git a/src/services/analytics-handlers.ts b/src/services/analytics-handlers.ts
@@ -0,0 +1,14 @@
+import { Analytics } from './analytics';
+
+export function createTrackedLinkHandler(
+  ctaName: string,
+  options: {
+    location?: string;
+    url?: string;
+    label?: string;
+  },
+) {
+  return () => {
+    Analytics.trackCta(ctaName, options);
+  };
+}
diff --git a/src/services/analytics.ts b/src/services/analytics.ts
@@ -0,0 +1,43 @@
+type AnalyticsEventName = 'cta_click' | 'page_view' | 'custom_event';
+
+type CtaName = 'github' | 'npm' | 'docs';
+
+type TrackEventParams = Record<string, string | number | boolean | undefined>;
+
+export class Analytics {
+  private static isEnabled(): boolean {
+    return typeof window !== 'undefined' && typeof window.gtag === 'function';
+  }
+
+  static track(eventName: AnalyticsEventName | string, params?: TrackEventParams): void {
+    if (!this.isEnabled()) return;
+
+    window.gtag!('event', eventName, params ?? {});
+  }
+
+  static trackCta(
+    ctaName: CtaName | string,
+    params?: {
+      location?: string;
+      url?: string;
+      label?: string;
+    },
+  ): void {
+    this.track('cta_click', {
+      cta_name: ctaName,
+      location: params?.location,
+      link_url: params?.url,
+      label: params?.label,
+    });
+  }
+
+  static trackPageView(path: string, title?: string): void {
+    if (!this.isEnabled()) return;
+
+    window.gtag!('event', 'page_view', {
+      page_path: path,
+      page_title: title,
+      page_location: typeof window !== 'undefined' ? window.location.href : undefined,
+    });
+  }
+}
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
@@ -0,0 +1,9 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+export {};
+
+declare global {
+  interface Window {
+    gtag?: (...args: any[]) => void;
+  }
+}
