scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in feat/tracking (pull request #27)

Browse Source 
Feat/tracking

Approved-by: Michael Zetterberg
This commit is contained in:
Arvid Norlin
2024-02-16 14:16:31 +00:00
parent fa445b6f41 60e2c8ae45
commit 7dab4c5231
9 changed files with 191 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,12 +1,13 @@
import { notFound } from "next/navigation" import { notFound } from "next/navigation"
import { request } from "@/lib/request"; import { request } from "@/lib/request"
import { GetCurrentBlockPage } from "@/lib/graphql/Query/CurrentBlockPage.graphql"; import { GetCurrentBlockPage } from "@/lib/graphql/Query/CurrentBlockPage.graphql"
import ContentPage from "@/components/Current/ContentPage" import ContentPage from "@/components/Current/ContentPage"
import type { PageArgs, LangParams, UriParams } from "@/types/params" import type { PageArgs, LangParams, UriParams } from "@/types/params"
import type { GetCurrentBlockPageData } from "@/types/requests/currentBlockPage" import type { GetCurrentBlockPageData } from "@/types/requests/currentBlockPage"
import Tracking from "../../Tracking"
export default async function CurrentContentPage({ export default async function CurrentContentPage({
params, params,
@@ -31,13 +32,24 @@ export default async function CurrentContentPage({
console.log("SearchParams URI: ", searchParams.uri) console.log("SearchParams URI: ", searchParams.uri)
throw new Error("Not found") throw new Error("Not found")
} }
const pageData = response.data.all_current_blocks_page.items[0]
const trackingData = {
pageName: pageData.title,
pageType: pageData.__typename,
publishedDate: pageData.system.updated_at,
createdDate: pageData.system.created_at,
pageId: pageData.system.uid,
}
return ( return (
<ContentPage <>
data={response.data} <ContentPage
uri={searchParams.uri} data={response.data}
lang={params.lang} uri={searchParams.uri}
/> lang={params.lang}
/>
<Tracking pageData={trackingData} />
</>
) )
} catch (err) { } catch (err) {
return notFound() return notFound()

25
app/[lang]/(live)/layout.tsx
View File

@@ -1,18 +1,19 @@
import "../../core.css"; import "../../core.css"
import "../../scandic.css"; import "../../scandic.css"
import Footer from "@/components/Current/Footer"; import Footer from "@/components/Current/Footer"
import LangPopup from "@/components/Current/LangPopup"; import LangPopup from "@/components/Current/LangPopup"
import Script from "next/script"; import Script from "next/script"
import SkipToMainContent from "@/components/SkipToMainContent"; import SkipToMainContent from "@/components/SkipToMainContent"
import type { Metadata } from "next"; import type { Metadata } from "next"
import type { LangParams, LayoutArgs } from "@/types/params"; import type { LangParams, LayoutArgs } from "@/types/params"
import AdobeScript from "../AdobeScript"
export const metadata: Metadata = { export const metadata: Metadata = {
description: "New web", description: "New web",
title: "Scandic Hotels New Web", title: "Scandic Hotels New Web",
}; }
export default function RootLayout({ export default function RootLayout({
children, children,
@@ -61,13 +62,17 @@ export default function RootLayout({
src="/Static/dist/js/main-ng.js?336b801d6b38eff10884" src="/Static/dist/js/main-ng.js?336b801d6b38eff10884"
strategy="lazyOnload" strategy="lazyOnload"
/> */} /> */}
<AdobeScript />
</head> </head>
<body> <body>
<LangPopup lang={params.lang} /> <LangPopup lang={params.lang} />
<SkipToMainContent lang={params.lang} /> <SkipToMainContent lang={params.lang} />
{children} {children}
<Footer lang={params.lang} /> <Footer lang={params.lang} />
<Script id="page-tracking">{`
typeof _satellite !== "undefined" && _satellite.pageBottom();
`}</Script>
</body> </body>
</html> </html>
); )
} }

23
app/[lang]/AdobeScript.tsx Normal file
View File

@@ -0,0 +1,23 @@
import { env } from "@/env/server.mjs"
import Script from "next/script"
const scriptScrs = {
// TODO: decide on naming and environments (development vs. test vs. staging etc)
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 AdobeScript() {
return (
<>
<Script
strategy="beforeInteractive"
id="ensure-datalayer"
>{`window.datalayer = window.datalayer || {}`}</Script>
<Script src={scriptScrs[env.NODE_ENV]} />
</>
)
}

85
app/[lang]/Tracking.tsx Normal file
View File

@@ -0,0 +1,85 @@
"use client"
import {
SiteSectionObject,
TrackingData,
TrackingProps,
} from "@/types/components/tracking"
import { usePathname, useSearchParams } from "next/navigation"
import { useEffect } from "react"
function createPageObject(trackingData: TrackingData) {
const [lang, ...segments] = trackingData.pathName
.split("/")
.filter((v: string) => v)
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 = getSiteSections(segments)
const { host: domain, href: pageurl } = window.location
const page_obj = {
pagename: trackingData.pageName,
pagetype: trackingData.pageType,
pageurl, // is window.location.href viable?
createDate: trackingData.createdDate,
publishDate: trackingData.publishedDate,
domain, // is window.location.host viable?
errorcode: null, // handle
querystring: trackingData.queryString || "",
pageid: trackingData.pageId,
sessionid: "<unique identifier of session>", // base on what?
domainlanguage: lang,
hotelbrand: "scandic",
siteversion: "new-web",
...sitesections,
}
return page_obj
}
export default function Tracking({ pageData }: TrackingProps) {
const pathName = usePathname()
const queryString = useSearchParams().toString()
useEffect(() => {
const trackingData = { ...pageData, pathName, queryString }
const pageObject = createPageObject(trackingData)
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;
}, [pathName, queryString, pageData])
return null
}

4
lib/graphql/Query/CurrentBlockPage.graphql
View File

@@ -10,6 +10,7 @@
query GetCurrentBlockPage($locale: String!, $url: String!) { query GetCurrentBlockPage($locale: String!, $url: String!) {
all_current_blocks_page(limit: 1, locale: $locale, where: { url: $url }) { all_current_blocks_page(limit: 1, locale: $locale, where: { url: $url }) {
items { items {
__typename
aside { aside {
__typename __typename
...ContactAside ...ContactAside
@@ -30,7 +31,8 @@ query GetCurrentBlockPage($locale: String!, $url: String!) {
url url
system { system {
uid uid
content_type_uid created_at
updated_at
} }
} }
total total

28
types/components/tracking.ts Normal file
View File

@@ -0,0 +1,28 @@
export type TrackingProps = {
pageData: {
pageId: string
createdDate: string
publishedDate: string
pageName: string
pageType: string
}
}
export type TrackingData = {
pathName: string
queryString: string
pageId: string
pageName: string
pageType: string
publishedDate: string
createdDate: string
}
export type SiteSectionObject = {
sitesection1: string
sitesection2: string
sitesection3: string
sitesection4: string
sitesection5: string
sitesection6: string
}

12
types/requests/currentBlockPage.ts
View File

@@ -8,7 +8,11 @@ import type { PuffBlock } from "./blocks/puff"
import type { Preamble } from "./preamble" import type { Preamble } from "./preamble"
import type { Text } from "./blocks/text" import type { Text } from "./blocks/text"
import type { AllRequestResponse } from "./utils/all" import type { AllRequestResponse } from "./utils/all"
import type { AsideTypenameEnum, Typename } from "./utils/typename" import type {
AsideTypenameEnum,
Typename,
PagesTypenameEnum,
} from "./utils/typename"
import type { EmbedEnum } from "./utils/embeds" import type { EmbedEnum } from "./utils/embeds"
import type { Edges } from "./utils/edges" import type { Edges } from "./utils/edges"
@@ -41,6 +45,7 @@ export type Breadcrumbs = {
} }
export type BlockPage = { export type BlockPage = {
__typename: PagesTypenameEnum.CurrentBlocksPage
aside: Asides[] aside: Asides[]
blocks: Blocks[] blocks: Blocks[]
breadcrumbs: Breadcrumbs breadcrumbs: Breadcrumbs
@@ -48,6 +53,11 @@ export type BlockPage = {
preamble: Preamble preamble: Preamble
title: string title: string
url: string url: string
system: {
uid: string
created_at: string
updated_at: string
}
} }
export type GetCurrentBlockPageData = { export type GetCurrentBlockPageData = {

4
types/requests/utils/typename.ts
View File

@@ -12,6 +12,10 @@ export enum BlocksTypenameEnum {
CurrentBlocksPageBlocksText = "CurrentBlocksPageBlocksText", CurrentBlocksPageBlocksText = "CurrentBlocksPageBlocksText",
} }
export enum PagesTypenameEnum {
CurrentBlocksPage = "CurrentBlocksPage",
}
export type BlocksTypename = keyof typeof BlocksTypenameEnum export type BlocksTypename = keyof typeof BlocksTypenameEnum
export type Typename<T, K> = T & { export type Typename<T, K> = T & {

3
types/window.d.ts vendored Normal file
View File

@@ -0,0 +1,3 @@
interface Window {
datalayer: { [key: string]: any }
}