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 { 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"
import type { PageArgs, LangParams, UriParams } from "@/types/params"
import type { GetCurrentBlockPageData } from "@/types/requests/currentBlockPage"
import Tracking from "../../Tracking"
export default async function CurrentContentPage({
params,
@@ -31,13 +32,24 @@ export default async function CurrentContentPage({
console.log("SearchParams URI: ", searchParams.uri)
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 (
<ContentPage
data={response.data}
uri={searchParams.uri}
lang={params.lang}
/>
<>
<ContentPage
data={response.data}
uri={searchParams.uri}
lang={params.lang}
/>
<Tracking pageData={trackingData} />
</>
)
} catch (err) {
return notFound()

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

@@ -1,18 +1,19 @@
import "../../core.css";
import "../../scandic.css";
import "../../core.css"
import "../../scandic.css"
import Footer from "@/components/Current/Footer";
import LangPopup from "@/components/Current/LangPopup";
import Script from "next/script";
import SkipToMainContent from "@/components/SkipToMainContent";
import Footer from "@/components/Current/Footer"
import LangPopup from "@/components/Current/LangPopup"
import Script from "next/script"
import SkipToMainContent from "@/components/SkipToMainContent"
import type { Metadata } from "next";
import type { LangParams, LayoutArgs } from "@/types/params";
import type { Metadata } from "next"
import type { LangParams, LayoutArgs } from "@/types/params"
import AdobeScript from "../AdobeScript"
export const metadata: Metadata = {
description: "New web",
title: "Scandic Hotels New Web",
};
}
export default function RootLayout({
children,
@@ -61,13 +62,17 @@ export default function RootLayout({
src="/Static/dist/js/main-ng.js?336b801d6b38eff10884"
strategy="lazyOnload"
/> */}
<AdobeScript />
</head>
<body>
<LangPopup lang={params.lang} />
<SkipToMainContent lang={params.lang} />
{children}
<Footer lang={params.lang} />
<Script id="page-tracking">{`
typeof _satellite !== "undefined" && _satellite.pageBottom();
`}</Script>
</body>
</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!) {
all_current_blocks_page(limit: 1, locale: $locale, where: { url: $url }) {
items {
__typename
aside {
__typename
...ContactAside
@@ -30,7 +31,8 @@ query GetCurrentBlockPage($locale: String!, $url: String!) {
url
system {
uid
content_type_uid
created_at
updated_at
}
}
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 { Text } from "./blocks/text"
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 { Edges } from "./utils/edges"
@@ -41,6 +45,7 @@ export type Breadcrumbs = {
}
export type BlockPage = {
__typename: PagesTypenameEnum.CurrentBlocksPage
aside: Asides[]
blocks: Blocks[]
breadcrumbs: Breadcrumbs
@@ -48,6 +53,11 @@ export type BlockPage = {
preamble: Preamble
title: string
url: string
system: {
uid: string
created_at: string
updated_at: string
}
}
export type GetCurrentBlockPageData = {

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

@@ -12,6 +12,10 @@ export enum BlocksTypenameEnum {
CurrentBlocksPageBlocksText = "CurrentBlocksPageBlocksText",
}
export enum PagesTypenameEnum {
CurrentBlocksPage = "CurrentBlocksPage",
}
export type BlocksTypename = keyof typeof BlocksTypenameEnum
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 }
}