WIP: add Adobe page tracking

app/[lang]/(live)/current-content-page/page.tsx

@@ -1,7 +1,7 @@
 import { notFound } from "next/navigation"
 
-import { request } from "@/lib/request";
-import { GetCurrentBlockPage } from "@/lib/graphql/Query/CurrentBlockPage.graphql";
+import { request } from "@/lib/request"
+import { GetCurrentBlockPage } from "@/lib/graphql/Query/CurrentBlockPage.graphql"
 
 import ContentPage from "@/components/Current/ContentPage"
 

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

@@ -8,11 +8,18 @@ import SkipToMainContent from "@/components/SkipToMainContent";
 
 import type { Metadata } from "next";
 import type { LangParams, LayoutArgs } from "@/types/params";
-
+import { env } from "@/env/server.mjs"
 export const metadata: Metadata = {
   description: "New web",
   title: "Scandic Hotels New Web",
-};
+}
+
+const adobeSrcs = {
+  development: "",
+  test: "https://assets.adobedtm.com/c1bd08b1e4e7/d64a7c1f5f17/launch-84c70d82a50c-staging.min.js",
+  production:
+    "https://assets.adobedtm.com/c1bd08b1e4e7/d64a7c1f5f17/launch-e56085bbe998.min.js",
+}
 
 export default function RootLayout({
   children,
@@ -56,6 +63,16 @@ 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!) */}
+        <Script src={adobeSrcs[env.NODE_ENV]} />
         {/* <Script
           data-cookieconsent="ignore"
           src="/Static/dist/js/main-ng.js?336b801d6b38eff10884"

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

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

app/[lang]/Tracking.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import { usePathname, useSearchParams } from "next/navigation"
+import Script from "next/script"
+
+type WindowWithDataLayer = Window & {
+  datalayer: { [key: string]: any }
+}
+
+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 ⬆️
+
+  function getSiteSections(segments: string[]) {
+    const sitesections: { [key: string]: string } = {}
+
+    for (let i = 0; i < 6; i++) {
+      const key = "value" + (i + 1)
+      sitesections[key] = segments.slice(0, i + 1).join("|")
+      if (i > 0 && !segments[i]) {
+        sitesections[key] = sitesections[key].concat(
+          "|".repeat(i + 1 - segments.length)
+        )
+      }
+    }
+    return sitesections
+  }
+  const sitesections = getSiteSections(segments)
+
+  const page_obj = {
+    pagename: "<a unique name of the page>",
+    pagetype: "<the type of page or content group>",
+    pageurl: "urlObject.href",
+    ...sitesections,
+    createDate: "< the date when page is created>",
+    publishDate: "< the date when page is published>",
+    domain: "", // is window.location.host viable?
+    errorcode: null, // handle
+    querystring: queryString || "",
+    pageid: "<unique id of the page>",
+    sessionid: "<unique identifier of session>", // base on what?
+    domainlanguage: lang,
+    hotelbrand: "<scandic or scandicgo)>", // what is this based on?
+    siteversion: "new-web", // good enough?
+  }
+  return page_obj
+}
+
+export default function Tracking() {
+  console.log("create datalayer 🚀")
+
+  if (!window.datalayer) {
+    window.datalayer = {}
+  }
+
+  const pathName = usePathname()
+  const queryString = useSearchParams().toString()
+
+  const pageObject = createPageObject(pathName, queryString)
+
+  if (window.datalayer) {
+    window.datalayer.page = pageObject
+
+    // NOTE: Is this irrelevant för drop 1?
+    // 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>",
+    // }
+
+    // datalayer.user = user_obj;
+  }
+  return (
+    <>
+      <Script id="page-tracking">{`
+      console.log('hello')
+      `}</Script>
+    </>
+  )
+}