diff --git a/app/[lang]/Tracking.tsx b/app/[lang]/Tracking.tsx index 8714ed9c7..7984032f5 100644 --- a/app/[lang]/Tracking.tsx +++ b/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: "", // CMS - pagetype: "", // 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: "", // CMS + querystring: trackingData.queryString || "", + pageid: trackingData.pageId, sessionid: "", // base on what? domainlanguage: lang, hotelbrand: "scandic", // "", 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 } diff --git a/types/components/tracking.ts b/types/components/tracking.ts new file mode 100644 index 000000000..00afb55e3 --- /dev/null +++ b/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 +}