Marketing Dashboard and Program Detail Optimization by adding the Content Fragment Path

blocks/gmo-program-details/gmo-program-details.js

@@ -15,10 +15,13 @@ const platformMappings = getMappingArray('platforms');
 export default async function decorate(block) {
     const encodedSemi = encodeURIComponent(';');
     const encodedProgram = encodeURIComponent(programName);
+    const encodedPath = queryVars.path ? `${encodeURIComponent(queryVars.path)}` : '';
 
     blockConfig = readBlockConfig(block);
+    // Including path in the query if present
+    const programQueryString = `getProgramDetails${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}` +
+        (encodedPath ? `${encodedSemi}path=${encodedPath}` : '');
 
-    const programQueryString = `getProgramDetails${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}`;
     const deliverableQueryString = `getProgramDeliverables${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}`;
 
     // Immediately render a placeholder header
@@ -700,22 +703,26 @@ function attachListener(htmlElement) {
 
 function extractQueryVars() {
     const urlStr = window.location.href;
-    const pnRegex = /.*programName=(.*?)&programID=(.*)/;
+    const pnRegex = /[?&]programName=([^&]+)&programID=([^&]+)(&path=([^&]+))?/;
     const match = urlStr.match(pnRegex);
     if (match && match[1] && match[2]) {
-        const pName = decodeURIComponent(match[1]);
-        let pID = decodeURIComponent(match[2])
+        const pName = decodeURIComponent(match[1]); // Removed the replace method
+        let pID = decodeURIComponent(match[2]);
+        let pPath = match[4] ? decodeURIComponent(match[4]) : null;
         if (pID.endsWith('#')) {
             pID = pID.slice(0, -1);
         }
         return {
             programName: pName,
-            programID: pID
-        }
+            programID: pID,
+            path: pPath
+        };
     } else {
         return {
             programName: 'Program Name Not Available',
-            programID: 'Program ID Not Available'
-        }
+            programID: 'Program ID Not Available',
+            path: null
+        };
     }
 }
+

blocks/gmo-program-list/gmo-program-list.js

@@ -181,6 +181,7 @@ async function buildCampaignList(campaigns, numPerPage) {
         const programName = campaign.node.programName;
         const campaignName = campaign.node.campaignName;
         const programID = campaign.node.programID ? campaign.node.programID : "";
+        const path = campaign.node._path;
 
         campaignRow.classList.add('campaign-row');
         if ((index + 1) > numPerPage) campaignRow.classList.add('hidden');
@@ -190,9 +191,9 @@ async function buildCampaignList(campaigns, numPerPage) {
 
         const campaignIconLink = document.createElement('a');
         let campaignDetailsLink = host + `/${detailsPage}?programName=${programName}&`;
-        campaignDetailsLink += `programID=${programID}`
+        campaignDetailsLink += `programID=${programID}`;
+        campaignDetailsLink += `&path=${path}`;
         campaignIconLink.href = campaignDetailsLink;
-
         const campaignIcon = document.createElement('div');
         campaignIcon.classList.add('campaign-icon');
         campaignIcon.dataset.programname = programName;
@@ -203,7 +204,6 @@ async function buildCampaignList(campaigns, numPerPage) {
         const campaignNameWrapper = document.createElement('div');
         campaignNameWrapper.classList.add('campaign-name-wrapper', 'vertical-center');
 
-
         campaignNameWrapper.innerHTML = `
             <div class='campaign-name-label' data-property='campaign'>
                 ${checkBlankString(programName)}

scripts/graphql.js

@@ -47,6 +47,8 @@ export async function graphqlAllCampaignsFilter(first,cursor,filter) {
   const encodedCursor = encodeURIComponent(cursor);
   const encodedFilter = encodeURIComponent(JSON.stringify(filter));
   const graphqlEndpoint = `${baseApiUrl}/${projectId}/${queryName}${encodedSemiColon}first=${encodedFirst}${encodedSemiColon}cursor=${encodedCursor}${encodedSemiColon}filter=${encodedFilter}`;
+  //Performance logging
+  const startTime = performance.now();
   const jwtToken = await getBearerToken();
 
   try {
@@ -57,6 +59,10 @@ export async function graphqlAllCampaignsFilter(first,cursor,filter) {
       },
     };
     const response = await fetch(`${graphqlEndpoint}`, options);
+    //Performance logging
+    const endTime = performance.now();
+    const executionTime = endTime - startTime;
+    console.log(`getAllCampaigns Execution Time: ${executionTime} ms`);
     // Handle response codes
     if (response.status === 200) {
       const responseBody = await response.json();
@@ -170,6 +176,8 @@ export async function executeQuery(queryString) {
   const baseApiUrl = `${await getGraphqlEndpoint()}/graphql/execute.json`;
   const projectId = 'gmo';
   const queryEndpoint = `${baseApiUrl}/${projectId}/${queryString}`;
+  //Performance logging
+  const startTime = performance.now();
   const jwtToken = await getBearerToken();
 
   return fetch(queryEndpoint, {
@@ -181,6 +189,11 @@ export async function executeQuery(queryString) {
       if (!response.ok) {
           throw new Error(`HTTP error! Status: ${response.status}`);
       }
+      //Performance logging
+      const endTime = performance.now();
+      const executionTime = endTime - startTime;
+      console.log(`executeQuery for ${queryString} Execution Time: ${executionTime} ms`);
+
       return response.json();
   }).then(data => {
       return data; // Make sure to return the data so that the promise resolves with it