Refactor embedded work page to include GTM dataLayer values

jest.config.js

@@ -18,6 +18,8 @@ const customJestConfig = {
  },
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
  testEnvironment: "jest-environment-jsdom",
+ testPathIgnorePatterns: ["/node_modules/", "/dist/"],
+ watchPathIgnorePatterns: ["<rootDir>/node_modules/", "<rootDir>/.next/"],
 };
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async

pages/_app.tsx

@@ -48,6 +48,7 @@ function MyApp({ Component, pageProps }: MyAppProps) {
 
  React.useEffect(() => {
  if (typeof window !== "undefined" && mounted) {
+ console.log("pageProps", pageProps);
  const payload = {
  ...pageProps.dataLayer,
  isLoggedIn: user?.isLoggedIn,

pages/embedded-viewer/[manifestId].tsx

@@ -1,20 +1,23 @@
+import { GetServerSideProps, NextPage } from "next";
+
 import { DCAPI_ENDPOINT } from "@/lib/constants/endpoints";
-import { NextPage } from "next";
 import React from "react";
 import type { ViewerConfigOptions } from "@samvera/clover-iiif";
 import type { Work } from "@nulib/dcapi-types";
 import WorkRestrictedDisplay from "@/components/Work/RestrictedDisplay";
 import WorkViewerWrapper from "@/components/Clover/ViewerWrapper";
+import { buildWorkDataLayer } from "@/lib/ga/data-layer";
 import { getUrlSearchParams } from "@/lib/utils/get-url-search-params";
 import { getWork } from "@/lib/work-helpers";
 import { useRouter } from "next/router";
 import useWorkAuth from "@/hooks/useWorkAuth";
 
-const EmbeddedViewerPage: NextPage = () => {
- const router = useRouter();
- const [manifestId, setManifestId] = React.useState("");
- const [work, setWork] = React.useState<Work | null>();
+interface EmbeddedViewerPageProps {
+ work: Work;
+}
 
+const EmbeddedViewerPage: NextPage<EmbeddedViewerPageProps> = ({ work }) => {
+ const router = useRouter();
  const { isWorkRestricted } = useWorkAuth(work);
  const thumbnail = work?.thumbnail || "";
 
@@ -44,28 +47,11 @@ const EmbeddedViewerPage: NextPage = () => {
  showTitle: showTitle === "true" ? true : false,
  };
 
- React.useEffect(() => {
- if (!router.isReady || !router.query.manifestId) return;
-
- const mId = decodeURIComponent(router.query.manifestId as string);
-
- const workId = mId
- .replace(`${DCAPI_ENDPOINT}/works/`, "")
- .replace("?as=iiif", "");
-
- (async () => {
- const workResponse = await getWork(workId);
- setWork(workResponse);
- })();
-
- setManifestId(mId);
- }, [router.isReady, router.query.manifestId]);
-
  return (
  <>
  {!isWorkRestricted ? (
  <WorkViewerWrapper
- manifestId={manifestId}
+ manifestId={work.iiif_manifest}
  viewerOptions={viewerOptions}
  />
  ) : (
@@ -75,4 +61,22 @@ const EmbeddedViewerPage: NextPage = () => {
  );
 };
 
+export const getServerSideProps: GetServerSideProps = async (context) => {
+ const mId = decodeURIComponent(context?.params?.manifestId as string);
+
+ const workId = mId
+ .replace(`${DCAPI_ENDPOINT}/works/`, "")
+ .replace("?as=iiif", "");
+
+ const work = await getWork(workId);
+ const dataLayer = work ? buildWorkDataLayer(work) : [];
+
+ return {
+ props: {
+ dataLayer,
+ work,
+ },
+ };
+};
+
 export default EmbeddedViewerPage;