121 lines
3.8 KiB
TypeScript
121 lines
3.8 KiB
TypeScript
"use client"
|
|
|
|
import { usePathname, useSearchParams } from "next/navigation"
|
|
import { useEffect, useState } from "react"
|
|
|
|
import type {
|
|
SiteSectionObject,
|
|
TrackingData,
|
|
TrackingProps,
|
|
} from "@/types/components/tracking"
|
|
|
|
function createPageObject(trackingData: TrackingData) {
|
|
const englishSegments = trackingData.englishUrl
|
|
? trackingData.englishUrl.split("/").filter((seg?: string) => seg)
|
|
: null
|
|
|
|
const [lang, ...segments] = trackingData.pathName
|
|
.split("/")
|
|
.filter((seg: string) => seg)
|
|
|
|
function getSiteSections(segments: string[]): SiteSectionObject {
|
|
/*
|
|
Adobe expects the properties sitesection1 - sitessection6, hence the for-loop below
|
|
The segments ['explore-scandic', 'wifi'] should result in:
|
|
{
|
|
sitesection1: "explore-scandic",
|
|
sitesection2: "explore-scandic|wifi",
|
|
sitesection3: "explore-scandic|wifi|",
|
|
sitesection4: "explore-scandic|wifi||",
|
|
sitesection5: "explore-scandic|wifi|||",
|
|
sitesection6: "explore-scandic|wifi||||",
|
|
}
|
|
*/
|
|
const sitesections = {} as SiteSectionObject
|
|
for (let i = 0; i < 6; i++) {
|
|
const key = ("sitesection" + (i + 1)) as keyof SiteSectionObject
|
|
|
|
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 = englishSegments
|
|
? getSiteSections(englishSegments)
|
|
: getSiteSections(segments)
|
|
const { host: domain, href: fullurl, origin } = window.location
|
|
const page_obj = {
|
|
pagename: englishSegments ? englishSegments.join("|") : segments.join("|"),
|
|
pagetype: "contentpage",
|
|
pageurl: origin + trackingData.pathName,
|
|
fullurl,
|
|
createDate: trackingData.createdDate,
|
|
publishDate: trackingData.publishedDate,
|
|
domain,
|
|
errorcode: null, // handle
|
|
querystring: trackingData.queryString || "",
|
|
pageid: trackingData.pageId,
|
|
// sessionid: "<unique identifier of session>", // base on what?
|
|
domainlanguage: trackingData.lang ? trackingData.lang : lang,
|
|
hotelbrand: "scandic",
|
|
siteversion: "new-web",
|
|
...sitesections,
|
|
}
|
|
return page_obj
|
|
}
|
|
|
|
export default function Tracking({ pageData }: TrackingProps) {
|
|
const pathName = usePathname()
|
|
const queryString = useSearchParams().toString()
|
|
|
|
function CookiebotCallbackOnAccept() {
|
|
const cookie = window._satellite.cookie.get("CookieConsent")
|
|
|
|
if (window.Cookiebot?.changed && window.adobe) {
|
|
if (cookie?.includes("statistics:true")) {
|
|
window.adobe.optIn.approve(window.adobe.OptInCategories.ANALYTICS, true)
|
|
} else {
|
|
window.adobe.optIn.deny(window.adobe.OptInCategories.ANALYTICS, true)
|
|
}
|
|
window.adobe.optIn.complete()
|
|
console.warn("window.load event explicitly dispatched.")
|
|
window.dispatchEvent(new Event("load"))
|
|
}
|
|
}
|
|
|
|
function CookebotCallbackOnDecline() {
|
|
if (window.Cookiebot?.changed && window.adobe) {
|
|
window.adobe.optIn.deny(window.adobe.OptInCategories.ANALYTICS, true)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (window.datalayer) {
|
|
const trackingData = { ...pageData, pathName, queryString }
|
|
const pageObject = createPageObject(trackingData)
|
|
|
|
window.datalayer.page = pageObject
|
|
}
|
|
}, [pathName, queryString, pageData])
|
|
|
|
useEffect(() => {
|
|
// handle consent
|
|
window.addEventListener("CookiebotOnAccept", CookiebotCallbackOnAccept)
|
|
window.addEventListener("CookiebotOnDecline", CookebotCallbackOnDecline)
|
|
|
|
return () => {
|
|
window.removeEventListener("CookiebotOnAccept", CookiebotCallbackOnAccept)
|
|
window.removeEventListener(
|
|
"CookiebotOnDecline",
|
|
CookebotCallbackOnDecline
|
|
)
|
|
}
|
|
}, [])
|
|
|
|
return null
|
|
}
|