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

Refactor

Browse Source
This commit is contained in:
Linus Flood
2024-10-03 15:16:56 +02:00
parent b047e31990
commit e29dff1874
10 changed files with 77 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,10 +7,13 @@ import { env } from "@/env/server"
import TrpcProvider from "@/lib/trpc/Provider"
import TokenRefresher from "@/components/Auth/TokenRefresher"
import CookieBotConsent from "@/components/CookieBot"
import AdobeSDKScript from "@/components/Current/AdobeSDKScript"
import GTMScript from "@/components/Current/GTMScript"
import VwoScript from "@/components/Current/VwoScript"
import { ToastHandler } from "@/components/TempDesignSystem/Toasts"
import { preloadUserTracking } from "@/components/TrackingSDK"
import RouterTracking from "@/components/TrackingSDK/RouterTracking"
import { getIntl } from "@/i18n"
import ServerIntlProvider from "@/i18n/Provider"
import { setLang } from "@/i18n/serverContext"
@@ -38,6 +41,7 @@ export default async function RootLayout({
<html lang={params.lang}>
<head>
<AdobeSDKScript />
<GTMScript />
<Script data-cookieconsent="ignore" src="/_static/js/cookie-bot.js" />
<Script
strategy="beforeInteractive"
@@ -55,12 +59,15 @@ export default async function RootLayout({
<body>
<ServerIntlProvider intl={{ defaultLocale, locale, messages }}>
<TrpcProvider>
{header}
{!env.HIDE_FOR_NEXT_RELEASE && <>{bookingwidget}</>}
{children}
{footer}
<RouterTracking>
{header}
{!env.HIDE_FOR_NEXT_RELEASE && <>{bookingwidget}</>}
{children}
{footer}
</RouterTracking>
<ToastHandler />
<TokenRefresher />
<CookieBotConsent />
</TrpcProvider>
</ServerIntlProvider>
</body>

2
app/[lang]/(live-current)/layout.tsx
View File

@@ -5,6 +5,7 @@ import Script from "next/script"
import TokenRefresher from "@/components/Auth/TokenRefresher"
import BookingWidget from "@/components/BookingWidget"
import CookieBotConsent from "@/components/CookieBot"
import AdobeScript from "@/components/Current/AdobeScript"
import Footer from "@/components/Current/Footer"
import LangPopup from "@/components/Current/LangPopup"
@@ -69,6 +70,7 @@ export default async function RootLayout({
{children}
<Footer />
<TokenRefresher />
<CookieBotConsent />
</ServerIntlProvider>
<Script id="page-tracking">{`
typeof _satellite !== "undefined" && _satellite.pageBottom();

2
app/[lang]/webview/layout.tsx
View File

@@ -6,6 +6,7 @@ import Script from "next/script"
import TrpcProvider from "@/lib/trpc/Provider"
import AdobeSDKScript from "@/components/Current/AdobeSDKScript"
import GTMScript from "@/components/Current/GTMScript"
import { getIntl } from "@/i18n"
import ServerIntlProvider from "@/i18n/Provider"
import { setLang } from "@/i18n/serverContext"
@@ -31,6 +32,7 @@ export default async function RootLayout({
<html lang={params.lang}>
<head>
<AdobeSDKScript />
<GTMScript />
<Script id="ensure-adobeDataLayer">{`
window.adobeDataLayer = window.adobeDataLayer || []
`}</Script>

47
components/TrackingSDK/Client.tsx → components/CookieBot/index.tsx
View File

@@ -1,24 +1,13 @@
"use client"
import { usePathname } from "next/navigation"
import { useCallback, useEffect, useRef } from "react"
import { useCallback, useEffect } from "react"
import { webviews } from "@/constants/routes/webviews"
import useTrackingStore from "@/stores/tracking"
import { createSDKPageObject } from "@/utils/tracking"
import { TrackingSDKProps } from "@/types/components/tracking"
export default function TrackingSDK({
pageData,
userData,
hotelInfo,
}: TrackingSDKProps) {
export default function CookieBot() {
const pathName = usePathname()
const isWebview = webviews.includes(pathName)
const { hasRun, setHasRun, getPageLoadTime } = useTrackingStore()
const hasRunLocal = useRef<boolean>(false)
const CookiebotCallbackOnAccept = useCallback(() => {
const cookie = window._satellite.cookie.get("CookieConsent")
@@ -43,38 +32,6 @@ export default function TrackingSDK({
}
}
useEffect(() => {
if (!hasRun && !hasRunLocal.current) {
hasRunLocal.current = true
setHasRun()
if (window.adobeDataLayer) {
const trackingData = {
...pageData,
pathName,
pageLoadTime: getPageLoadTime(),
}
const pageObject = createSDKPageObject(trackingData)
console.log("TRACKING: Tracking pageView", pageObject, userData)
window.adobeDataLayer.push({
event: "pageView",
pageInfo: pageObject,
userInfo: userData,
hotelInfo: hotelInfo,
})
}
}
}, [
pathName,
pageData,
userData,
hasRun,
setHasRun,
hotelInfo,
getPageLoadTime,
])
useEffect(() => {
// handle consent
window.addEventListener("CookiebotOnAccept", CookiebotCallbackOnAccept)

21
components/Current/GTMScript.tsx Normal file
View File

@@ -0,0 +1,21 @@
export default function GTMScript() {
return (
<script
data-cookieconsent="statistics"
dangerouslySetInnerHTML={{
__html: `
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':​
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],​
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=​
'https://analytics.scandichotels.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);​
})(window,document,'script','adobeDataLayer','GTM-KNJCW67W');
`,
}}
async
/>
)
}

13
components/TempDesignSystem/Link/index.tsx
View File

@@ -3,10 +3,7 @@ import NextLink from "next/link"
import { usePathname, useRouter } from "next/navigation"
import { startTransition, useCallback } from "react"
import useRouterTransitionStore from "@/stores/router-transition"
import useTrackingStore from "@/stores/tracking"
import { trackClick, trackPageViewStart } from "@/utils/tracking"
import { trackClick } from "@/utils/tracking"
import { linkVariants } from "./variants"
@@ -28,7 +25,6 @@ export default function Link({
...props
}: LinkProps) {
const currentPageSlug = usePathname()
const { setInitialPageLoadTime } = useTrackingStore()
let isActive = active || currentPageSlug === href
if (partialMatch && !isActive) {
@@ -46,10 +42,6 @@ export default function Link({
const router = useRouter()
const startRouterTransition = useRouterTransitionStore(
(state) => state.startRouterTransition
)
const trackClickById = useCallback(() => {
if (trackingId) {
trackClick(trackingId)
@@ -74,10 +66,7 @@ export default function Link({
return
}
e.preventDefault()
setInitialPageLoadTime(Date.now())
trackPageViewStart()
startTransition(() => {
startRouterTransition()
router.push(href, { scroll })
})
}}

27
components/TrackingSDK/RouterTracking.tsx Normal file
View File

@@ -0,0 +1,27 @@
"use client"
import { usePathname, useSearchParams } from "next/navigation"
import { startTransition, useEffect } from "react"
import useRouterTransitionStore from "@/stores/router-transition"
import useTrackingStore from "@/stores/tracking"
import { trackPageViewStart } from "@/utils/tracking"
export default function RouterTracking({ children }: React.PropsWithChildren) {
const pathName = usePathname()
const searchParams = useSearchParams()
const { setInitialPageLoadTime } = useTrackingStore()
const { startRouterTransition } = useRouterTransitionStore()
useEffect(() => {
setInitialPageLoadTime(Date.now())
trackPageViewStart()
startTransition(() => {
startRouterTransition()
})
}, [pathName, searchParams, setInitialPageLoadTime, startRouterTransition])
return <>{children}</>
}

13
components/TrackingSDK/RouterTransition.tsx
View File

@@ -6,7 +6,7 @@ import { startTransition, useEffect, useOptimistic, useState } from "react"
import useRouterTransitionStore from "@/stores/router-transition"
import useTrackingStore from "@/stores/tracking"
import { createSDKPageObject, trackPageViewStart } from "@/utils/tracking"
import { createSDKPageObject } from "@/utils/tracking"
import { TrackingSDKProps } from "@/types/components/tracking"
@@ -32,17 +32,6 @@ export default function RouterTransition({
const pathName = usePathname()
const { isTransitioning, stopRouterTransition } = useRouterTransitionStore()
// useEffect(() => {
// const handleStart = () => {
// trackPageViewStart()
// setInitialPageLoadTime(Date.now())
// }
// return () => {
// handleStart()
// }
// }, [pathName])
useEffect(() => {
if (isTransitioning && status === TransitionStatusEnum.NotRun) {
startTransition(() => {

19
components/TrackingSDK/index.tsx
View File

@@ -2,8 +2,6 @@ import { serverClient } from "@/lib/trpc/server"
import RouterTransition from "@/components/TrackingSDK/RouterTransition"
import TrackingSDKClient from "./Client"
import {
TrackingSDKHotelInfo,
TrackingSDKPageData,
@@ -23,17 +21,10 @@ export default async function TrackingSDK({
const userTrackingData = await serverClient().user.tracking()
return (
<>
<TrackingSDKClient
pageData={pageData}
userData={userTrackingData}
hotelInfo={hotelInfo}
/>
<RouterTransition
pageData={pageData}
userData={userTrackingData}
hotelInfo={hotelInfo}
/>
</>
<RouterTransition
pageData={pageData}
userData={userTrackingData}
hotelInfo={hotelInfo}
/>
)
}

5
types/components/tracking.ts
View File

@@ -74,6 +74,11 @@ export type TrackingSDKHotelInfo = {
analyticsrateCode?: string // flex, save, change
specialRoomType?: string // allergy room, pet-friendly, accesibillity room
//modifyValues?: string // <price:<value>,roomtype:value>,bed:<value,<breakfast:value>
country?: string // Country of the hotel
region?: string // Region of the hotel
discount?: number
totalPrice?: number
lowestRoomPrice?: number
}
export type TrackingSDKProps = {