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

fix: ensure window.datalayer access in client only

Browse Source
This commit is contained in:
Arvid Norlin
2024-02-12 13:16:05 +01:00
parent b40ef7d5c8
commit 666e62c851
2 changed files with 32 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,13 @@
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 { env } from "@/env/server.mjs" import { env } from "@/env/server.mjs"
export const metadata: Metadata = { export const metadata: Metadata = {
description: "New web", description: "New web",
@@ -15,6 +15,7 @@ export const metadata: Metadata = {
} }
const adobeSrcs = { const adobeSrcs = {
// TODO: decide on naming and environments
development: "", development: "",
test: "https://assets.adobedtm.com/c1bd08b1e4e7/d64a7c1f5f17/launch-84c70d82a50c-staging.min.js", test: "https://assets.adobedtm.com/c1bd08b1e4e7/d64a7c1f5f17/launch-84c70d82a50c-staging.min.js",
production: production:
@@ -72,7 +73,14 @@ export default function RootLayout({
`} `}
</Script> */} </Script> */}
{/* TODO: Ensure order (datalayer created before script is executed!) */} {/* TODO: Ensure order (datalayer created before script is executed!) */}
{/* Should this be moved to an app/layout instead? */}
<Script id={"before"}>{`
console.log('before script load')
`}</Script>
<Script src={adobeSrcs[env.NODE_ENV]} /> <Script src={adobeSrcs[env.NODE_ENV]} />
<Script id="after">{`
console.log('after script load')
`}</Script>
{/* <Script {/* <Script
data-cookieconsent="ignore" data-cookieconsent="ignore"
src="/Static/dist/js/main-ng.js?336b801d6b38eff10884" src="/Static/dist/js/main-ng.js?336b801d6b38eff10884"
@@ -86,5 +94,5 @@ export default function RootLayout({
<Footer lang={params.lang} /> <Footer lang={params.lang} />
</body> </body>
</html> </html>
); )
} }

29
app/[lang]/Tracking.tsx
View File

@@ -1,7 +1,6 @@
"use client" "use client"
import { usePathname, useSearchParams } from "next/navigation" import { usePathname, useSearchParams } from "next/navigation"
import Script from "next/script"
type WindowWithDataLayer = Window & { type WindowWithDataLayer = Window & {
datalayer: { [key: string]: any } datalayer: { [key: string]: any }
@@ -50,15 +49,17 @@ function createPageObject(pathName: string, queryString?: string) {
} }
export default function Tracking() { export default function Tracking() {
console.log("create datalayer 🚀")
if (!window.datalayer) {
window.datalayer = {}
}
const pathName = usePathname() const pathName = usePathname()
const queryString = useSearchParams().toString() const queryString = useSearchParams().toString()
if (typeof window === "undefined") {
return null
}
if (!window.datalayer) {
console.log("creating datalayer 🧑‍🔧")
window.datalayer = {}
}
const pageObject = createPageObject(pathName, queryString) const pageObject = createPageObject(pathName, queryString)
if (window.datalayer) { if (window.datalayer) {
@@ -72,12 +73,12 @@ export default function Tracking() {
// } // }
// datalayer.user = user_obj; // datalayer.user = user_obj;
console.log("🤖 datalayer: ", window.datalayer)
} }
return ( return null
<> // <>
<Script id="page-tracking">{` // <Script id="page-tracking">{`
console.log('hello') // console.log('hello')
`}</Script> // `}</Script>
</> // </>
)
} }