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>
       <h2>Not Found</h2>
       <p>Could not find requested resource</p>
     </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,17 +55,13 @@ 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 🧑‍🔧")
       window.datalayer = {}
-  }
+    } else {
-
       const pageObject = createPageObject(pathName, queryString)
 
-  if (window.datalayer) {
       window.datalayer.page = pageObject
 
       // NOTE: Is this irrelevant för drop 1?
@@ -75,10 +74,7 @@ export default function Tracking() {
       // datalayer.user = user_obj;
       console.log("🤖 datalayer: ", window.datalayer)
     }
+  }, [pathName, queryString])
+
   return null
-  // <>
-  //   <Script id="page-tracking">{`
-  //   console.log('hello')
-  //   `}</Script>
-  // </>
 }