WIP: tracking

app/[lang]/(live)/layout.tsx

@@ -64,15 +64,6 @@ export default function RootLayout({
           data-cookieconsent="ignore"
           src="/Static/dist/js/ng/main.js?1705409330990"
         />
-        {/* <Script id="datalayer-init">
-          {`
-            console.log('create datalayer 🚀')
-            var datalayer = datalayer || {}
-            
-            console.log('datalayer: ', datalayer)
-          `}
-        </Script> */}
-        {/* TODO: Ensure order (datalayer created before script is executed!) */}
         {/* Should this be moved to an app/layout instead? */}
         <Script id={"before"}>{`
         console.log('before script load')
@@ -92,6 +83,10 @@ export default function RootLayout({
         <SkipToMainContent lang={params.lang} />
         {children}
         <Footer lang={params.lang} />
+        <Script id="page-tracking">{`
+          console.log('🛰️.pageBottom')
+          typeof _satellite !== "undefined" && _satellite.pageBottom();
+        `}</Script>
       </body>
     </html>
   )

app/[lang]/(live)/not-found.tsx

@@ -1,13 +1,8 @@
-import Tracking from "./Tracking"
-
 export default function NotFound() {
   return (
-    <>
+    <main>
-      <main>
+      <h2>Not Found</h2>
-        <h2>Not Found</h2>
+      <p>Could not find requested resource</p>
-        <p>Could not find requested resource</p>
+    </main>
-      </main>
-      <Tracking />
-    </>
   )
 }

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: "<a unique name of the page>",
+    pagename: "<a unique name of the page>", // CMS
-    pagetype: "<the type of page or content group>",
+    pagetype: "<the type of page or content group>", // CMS
-    pageurl: "urlObject.href",
+    pageurl, // is window.location.href viable?
     ...sitesections,
-    createDate: "< the date when page is created>",
+    createDate: "< the date when page is created>", // CMS
-    publishDate: "< the date when page is published>",
+    publishDate: "< the date when page is published>", // CMS
-    domain: "", // is window.location.host viable?
+    domain, // is window.location.host viable?
     errorcode: null, // handle
     querystring: queryString || "",
-    pageid: "<unique id of the page>",
+    pageid: "<unique id of the page>", // CMS
     sessionid: "<unique identifier of session>", // base on what?
     domainlanguage: lang,
-    hotelbrand: "<scandic or scandicgo)>", // what is this based on?
+    hotelbrand: "scandic", // "<scandic or scandicgo)>", 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") {
+  useEffect(() => {
-    return null
+    if (!window.datalayer) {
-  }
+      console.log("creating datalayer 🧑‍🔧")
-  if (!window.datalayer) {
+      window.datalayer = {}
-    console.log("creating datalayer 🧑‍🔧")
+    } else {
-    window.datalayer = {}
+      const pageObject = createPageObject(pathName, queryString)
-  }
 
-  const pageObject = createPageObject(pathName, queryString)
+      window.datalayer.page = pageObject
 
-  if (window.datalayer) {
+      // NOTE: Is this irrelevant för drop 1?
-    window.datalayer.page = pageObject
+      // var user_obj = {
+      //   loginstatus: "<if the user is logged in or not>",
+      //   memberid: "<unique meeting package membership id for the user>",
+      //   memberlevel: "<member level of user>",
+      // }
 
-    // NOTE: Is this irrelevant för drop 1?
+      // datalayer.user = user_obj;
-    // var user_obj = {
+      console.log("🤖 datalayer: ", window.datalayer)
-    //   loginstatus: "<if the user is logged in or not>",
+    }
-    //   memberid: "<unique meeting package membership id for the user>",
+  }, [pathName, queryString])
-    //   memberlevel: "<member level of user>",
-    // }
 
-    // datalayer.user = user_obj;
-    console.log("🤖 datalayer: ", window.datalayer)
-  }
   return null
-  // <>
-  //   <Script id="page-tracking">{`
-  //   console.log('hello')
-  //   `}</Script>
-  // </>
 }