feat(layout): enhance analytics component to track page URL and title

ahmet-cetinkaya-other · Jan 3, 2025 · 9df9cae · 9df9cae
1 parent 694a5f4
commit 9df9cae
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/src/presentation/src/shared/layouts/MainLayout.astro b/src/presentation/src/shared/layouts/MainLayout.astro
@@ -4,6 +4,7 @@ import Navbar from "~/presentation/src/shared/layouts/components/Navbar.astro";
 import FooterSection from "~/presentation/src/shared/layouts/components/FooterSection.astro";
 import { useI18nStatic } from "~/presentation/src/shared/hooks/useI18n";
 import Analytics from "./components/Analytics.astro";
+import { SEO } from "../constants/constants";
 
 type Props = MetaProps;
 
@@ -27,7 +28,7 @@ const { currentLocale } = useI18nStatic(Astro.url);
       canonicalURL={canonicalURL}
       themeColor="#F38310"
     />
-    <Analytics />
+    <Analytics pathName={Astro.url.pathname} title={title ?? SEO.title} />
     <!-- Other -->
   </head>
   <body

diff --git a/src/presentation/src/shared/layouts/components/Analytics.astro b/src/presentation/src/shared/layouts/components/Analytics.astro
@@ -1,12 +1,17 @@
 ---
-
+type Props = {
+  pathName: string;
+  title: string;
+};
+const props = Astro.props;
 ---
 
 <!-- Analytics -->
 <script defer src="https://analytics.ahmetcetinkaya.me/script.js" data-website-id="66bca9d1-0bab-43b6-b318-7d41bfd2f4c6"
 ></script>
 
-<script>
-  declare const umami: any;
-  document.addEventListener("astro:after-swap", () => umami.track());
+<script define:vars={{ pathName: props.pathName, title: props.title }}>
+  document.addEventListener("astro:after-swap", () =>
+    umami.track((props) => ({ ...props, url: pathName, title: title })),
+  );
 </script>