feat: align Tracking component props with CMS data

app/[lang]/Tracking.tsx

@@ -1,7 +1,8 @@
 "use client"
-import "client-only"
+import "client-only" // NEEDED?
 
-import { useParams, usePathname, useSearchParams } from "next/navigation"
+import { TrackingData, TrackingProps } from "@/types/components/tracking"
+import { usePathname, useSearchParams } from "next/navigation"
 import { useEffect } from "react"
 
 type WindowWithDataLayer = Window & {
@@ -10,8 +11,10 @@ type WindowWithDataLayer = Window & {
 
 declare const window: WindowWithDataLayer
 
-function createPageObject(pathName: string, queryString?: string) {
-  const [lang, ...segments] = pathName.split("/").filter((v: string) => v)
+function createPageObject(trackingData: TrackingData) {
+  const [lang, ...segments] = trackingData.pathName
+    .split("/")
+    .filter((v: string) => v)
 
   // Better to get lang from useParams() instead?? ⬆️
 
@@ -33,16 +36,16 @@ function createPageObject(pathName: string, queryString?: string) {
   const { host: domain, href: pageurl } = window.location
 
   const page_obj = {
-    pagename: "<a unique name of the page>", // CMS
-    pagetype: "<the type of page or content group>", // CMS
+    pagename: trackingData.pageName,
+    pagetype: trackingData.pageType,
     pageurl, // is window.location.href viable?
     ...sitesections,
-    createDate: "< the date when page is created>", // CMS
-    publishDate: "< the date when page is published>", // CMS
+    createDate: trackingData.createdDate,
+    publishDate: trackingData.publishedDate,
     domain, // is window.location.host viable?
     errorcode: null, // handle
-    querystring: queryString || "",
-    pageid: "<unique id of the page>", // CMS
+    querystring: trackingData.queryString || "",
+    pageid: trackingData.pageId,
     sessionid: "<unique identifier of session>", // base on what?
     domainlanguage: lang,
     hotelbrand: "scandic", // "<scandic or scandicgo)>", what is this based on?
@@ -51,16 +54,16 @@ function createPageObject(pathName: string, queryString?: string) {
   return page_obj
 }
 
-export default function Tracking() {
+export default function Tracking({ pageData }: TrackingProps) {
   const pathName = usePathname()
   const queryString = useSearchParams().toString()
-
   useEffect(() => {
     if (!window.datalayer) {
       console.log("creating datalayer 🧑‍🔧")
       window.datalayer = {}
     } else {
-      const pageObject = createPageObject(pathName, queryString)
+      const trackingData = { ...pageData, pathName, queryString }
+      const pageObject = createPageObject(trackingData)
 
       window.datalayer.page = pageObject
 
@@ -74,7 +77,7 @@ export default function Tracking() {
       // datalayer.user = user_obj;
       console.log("🤖 datalayer: ", window.datalayer)
     }
-  }, [pathName, queryString])
+  }, [pathName, queryString, pageData])
 
   return null
 }

types/components/tracking.ts

@@ -0,0 +1,19 @@
+export type TrackingProps = {
+  pageData: {
+    pageId: string
+    createdDate: string
+    publishedDate: string
+    pageName: string
+    pageType: string
+  }
+}
+
+export type TrackingData = {
+  pathName: string
+  queryString: string
+  pageId: string
+  pageName: string
+  pageType: string
+  publishedDate: string
+  createdDate: string
+}