diff --git a/app/[lang]/(live)/layout.tsx b/app/[lang]/(live)/layout.tsx index e2c59e1a8..697955bd3 100644 --- a/app/[lang]/(live)/layout.tsx +++ b/app/[lang]/(live)/layout.tsx @@ -64,15 +64,6 @@ export default function RootLayout({ data-cookieconsent="ignore" src="/Static/dist/js/ng/main.js?1705409330990" /> - {/* */} - {/* TODO: Ensure order (datalayer created before script is executed!) */} {/* Should this be moved to an app/layout instead? */} ) diff --git a/app/[lang]/(live)/not-found.tsx b/app/[lang]/(live)/not-found.tsx index 56fdd344c..1a6cc1ce6 100644 --- a/app/[lang]/(live)/not-found.tsx +++ b/app/[lang]/(live)/not-found.tsx @@ -1,13 +1,8 @@ -import Tracking from "./Tracking" - export default function NotFound() { return ( - <> -
-

Not Found

-

Could not find requested resource

-
- - +
+

Not Found

+

Could not find requested resource

+
) } diff --git a/app/[lang]/Tracking.tsx b/app/[lang]/Tracking.tsx index 80cb0cdbb..8714ed9c7 100644 --- a/app/[lang]/Tracking.tsx +++ b/app/[lang]/Tracking.tsx @@ -1,6 +1,8 @@ "use client" +import "client-only" -import { usePathname, useSearchParams } from "next/navigation" +import { useParams, usePathname, useSearchParams } from "next/navigation" +import { useEffect } from "react" type WindowWithDataLayer = Window & { datalayer: { [key: string]: any } @@ -11,11 +13,11 @@ declare const window: WindowWithDataLayer function createPageObject(pathName: string, queryString?: string) { const [lang, ...segments] = pathName.split("/").filter((v: string) => v) - // implement more solid approach for lang ⬆️ + // Better to get lang from useParams() instead?? ⬆️ function getSiteSections(segments: string[]) { const sitesections: { [key: string]: string } = {} - + // Adobe expects the properties sitesection1 - sitessection6, hence the for-loop below for (let i = 0; i < 6; i++) { const key = "value" + (i + 1) sitesections[key] = segments.slice(0, i + 1).join("|") @@ -28,21 +30,22 @@ function createPageObject(pathName: string, queryString?: string) { return sitesections } const sitesections = getSiteSections(segments) + const { host: domain, href: pageurl } = window.location const page_obj = { - pagename: "", - pagetype: "", - pageurl: "urlObject.href", + pagename: "", // CMS + pagetype: "", // CMS + pageurl, // is window.location.href viable? ...sitesections, - createDate: "< the date when page is created>", - publishDate: "< the date when page is published>", - domain: "", // is window.location.host viable? + createDate: "< the date when page is created>", // CMS + publishDate: "< the date when page is published>", // CMS + domain, // is window.location.host viable? errorcode: null, // handle querystring: queryString || "", - pageid: "", + pageid: "", // CMS sessionid: "", // base on what? domainlanguage: lang, - hotelbrand: "", // what is this based on? + hotelbrand: "scandic", // "", what is this based on? siteversion: "new-web", // good enough? } return page_obj @@ -52,33 +55,26 @@ export default function Tracking() { const pathName = usePathname() const queryString = useSearchParams().toString() - if (typeof window === "undefined") { - return null - } - if (!window.datalayer) { - console.log("creating datalayer 🧑‍🔧") - window.datalayer = {} - } + useEffect(() => { + if (!window.datalayer) { + console.log("creating datalayer 🧑‍🔧") + window.datalayer = {} + } else { + const pageObject = createPageObject(pathName, queryString) - const pageObject = createPageObject(pathName, queryString) + window.datalayer.page = pageObject - if (window.datalayer) { - window.datalayer.page = pageObject + // NOTE: Is this irrelevant för drop 1? + // var user_obj = { + // loginstatus: "", + // memberid: "", + // memberlevel: "", + // } - // NOTE: Is this irrelevant för drop 1? - // var user_obj = { - // loginstatus: "", - // memberid: "", - // memberlevel: "", - // } + // datalayer.user = user_obj; + console.log("🤖 datalayer: ", window.datalayer) + } + }, [pathName, queryString]) - // datalayer.user = user_obj; - console.log("🤖 datalayer: ", window.datalayer) - } return null - // <> - // - // }