MWPW-152270 - Performance updates and small changes to marketingtech. (…

…adobecom#2563) * MWPW-152270 - Performance updates and small changes to marketingtech. * Conditionally load assets from domain proxies to allow for better performance. * Change default launch url for dev. Resolves: [MWPW-152270](https://jira.corp.adobe.com/browse/MWPW-152270) **Test URLs:** - Before: https://stage--milo--adobecom.hlx.page/?martech=off - After: https://marketingtech-updates--milo--adobecom.hlx.page/?martech=off * trivial * MWPW-152270 - Performance updates and small changes to marketingtech. * Update libs/martech/martech.js This is shorter and I like how simple this is. committing this change. Co-authored-by: Narcis Radu <[email protected]> * trivial: oopsie fix... * Fixed test that was failing with chrischrischris's help by moving to new file. * lint fixes --------- Co-authored-by: Narcis Radu <[email protected]>
depanshu357 · Jul 17, 2024 · b197e90 · b197e90
1 parent 9d49e78
commit b197e90
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 45 deletions.
diff --git a/libs/deps/martech.main.standard.min.js b/libs/deps/martech.main.standard.min.js
diff --git a/libs/deps/martech.main.standard.qa.min.js b/libs/deps/martech.main.standard.qa.min.js
diff --git a/libs/martech/martech.js b/libs/martech/martech.js
@@ -154,14 +154,6 @@ const getTargetPersonalization = async () => {
   };
 };
 
-const getDtmLib = (env) => ({
-  edgeConfigId: env.consumer?.edgeConfigId || env.edgeConfigId,
-  url:
-    env.name === 'prod'
-      ? env.consumer?.marTechUrl || 'https://assets.adobedtm.com/d4d114c60e50/a0e989131fd5/launch-5dd5dd2177e6.min.js'
-      : env.consumer?.marTechUrl || 'https://assets.adobedtm.com/d4d114c60e50/a0e989131fd5/launch-a27b33fc2dc0-development.min.js',
-});
-
 const setupEntitlementCallback = () => {
   const setEntitlements = async (destinations) => {
     const { default: parseEntitlements } = await import('../features/personalization/entitlements.js');
@@ -190,8 +182,12 @@ const setupEntitlementCallback = () => {
   );
 };
 
+function isProxied() {
+  return /^(www|milo|business|blog)(\.stage)?\.adobe\.com$/.test(window.location.hostname);
+}
+
 let filesLoadedPromise = false;
-const loadMartechFiles = async (config, url, edgeConfigId) => {
+const loadMartechFiles = async (config) => {
   if (filesLoadedPromise) return filesLoadedPromise;
 
   filesLoadedPromise = async () => {
@@ -208,19 +204,52 @@ const loadMartechFiles = async (config, url, edgeConfigId) => {
     );
     setDeep(window, 'digitalData.diagnostic.franklin.implementation', 'milo');
 
+    const launchUrl = config.env.consumer?.marTechUrl || (
+      isProxied()
+        ? '/marketingtech'
+        : 'https://assets.adobedtm.com'
+    ) + (
+      config.env.name === 'prod'
+        ? '/d4d114c60e50/a0e989131fd5/launch-5dd5dd2177e6.min.js'
+        : '/d4d114c60e50/a0e989131fd5/launch-2c94beadc94f-development.min.js'
+    );
+    loadLink(launchUrl, { as: 'script', rel: 'preload' });
+
     window.marketingtech = {
       adobe: {
-        launch: { url, controlPageLoad: true },
-        alloy: { edgeConfigId },
+        launch: {
+          url: launchUrl,
+          controlPageLoad: true,
+        },
+        alloy: {
+          edgeConfigId: config.env.consumer?.edgeConfigId || config.env.edgeConfigId,
+          edgeDomain: (
+            isProxied()
+              ? window.location.hostname
+              : 'sstats.adobe.com'
+          ),
+          edgeBasePath: (
+            isProxied()
+              ? 'experienceedge'
+              : 'ee'
+          ),
+        },
         target: false,
       },
       milo: true,
     };
-    window.edgeConfigId = edgeConfigId;
+    window.edgeConfigId = config.env.edgeConfigId;
+
+    await loadScript((
+      isProxied()
+        ? ''
+        : 'https://www.adobe.com'
+    ) + (
+      config.env.name === 'prod'
+        ? '/marketingtech/main.standard.min.js'
+        : '/marketingtech/main.standard.qa.min.js'
+    ));
 
-    const env = ['stage', 'local'].includes(config.env.name) ? '.qa' : '';
-    const martechPath = `martech.main.standard${env}.min.js`;
-    await loadScript(`${config.miloLibs || config.codeRoot}/deps/${martechPath}`);
     window._satellite.track('pageload');
   };
 
@@ -234,11 +263,7 @@ export default async function init({
   postLCP = false,
 }) {
   const config = getConfig();
-
-  const { url, edgeConfigId } = getDtmLib(config.env);
-  loadLink(url, { as: 'script', rel: 'preload' });
-
-  const martechPromise = loadMartechFiles(config, url, edgeConfigId);
+  const martechPromise = loadMartechFiles(config);
 
   if (persEnabled) {
     loadLink(

diff --git a/test/scripts/scripts.test.js b/test/scripts/scripts.test.js
@@ -28,7 +28,7 @@ describe('Decorating', async () => {
 
   it('martech test', async () => {
     const el = await waitForElement(
-      'script[src$="/libs/deps/martech.main.standard.qa.min.js"]',
+      'script[src*="main.standard.qa.min.js"]',
       { rootEl: document.head },
     );
     expect(el).to.exist;

diff --git a/test/utils/utils-mep-gnav.test.js b/test/utils/utils-mep-gnav.test.js
@@ -0,0 +1,47 @@
+import { readFile } from '@web/test-runner-commands';
+import { expect } from '@esm-bundle/chai';
+import sinon from 'sinon';
+
+const utils = {};
+
+const config = {
+  codeRoot: '/libs',
+  locales: { '': { ietf: 'en-US', tk: 'hah7vzn.css' } },
+};
+
+describe('Utils - MEP GNav', () => {
+  before(async () => {
+    const module = await import('../../libs/utils/utils.js');
+    module.setConfig(config);
+    Object.keys(module).forEach((func) => {
+      utils[func] = module[func];
+    });
+    window.hlx = { rum: { isSelected: false } };
+  });
+
+  after(() => {
+    delete window.hlx;
+  });
+
+  describe('target set to gnav', async () => {
+    const MANIFEST_JSON = {
+      info: { total: 2, offset: 0, limit: 2, data: [{ key: 'manifest-type', value: 'Personalization' }, { key: 'manifest-override-name', value: '' }, { key: 'name', value: '1' }] }, placeholders: { total: 0, offset: 0, limit: 0, data: [] }, experiences: { total: 1, offset: 0, limit: 1, data: [{ action: 'insertContentAfter', selector: '.marquee', 'page filter (optional)': '/products/special-offers', chrome: 'https://main--milo--adobecom.hlx.page/drafts/mariia/fragments/personalizationtext' }] }, ':version': 3, ':names': ['info', 'placeholders', 'experiences'], ':type': 'multi-sheet',
+    };
+    function htmlResponse() {
+      return new Promise((resolve) => {
+        resolve({
+          ok: true,
+          json: () => MANIFEST_JSON,
+        });
+      });
+    }
+
+    it('have target be set to gnav and save in config', async () => {
+      window.fetch = sinon.stub().returns(htmlResponse());
+      document.head.innerHTML = await readFile({ path: './mocks/mep/head-target-gnav.html' });
+      await utils.loadArea();
+      const resultConfig = utils.getConfig();
+      expect(resultConfig.mep.targetEnabled).to.equal('gnav');
+    });
+  });
+});
diff --git a/test/utils/utils.test.js b/test/utils/utils.test.js
@@ -638,28 +638,6 @@ describe('Utils', () => {
     });
   });
 
-  describe('target set to gnav', async () => {
-    const MANIFEST_JSON = {
-      info: { total: 2, offset: 0, limit: 2, data: [{ key: 'manifest-type', value: 'Personalization' }, { key: 'manifest-override-name', value: '' }, { key: 'name', value: '1' }] }, placeholders: { total: 0, offset: 0, limit: 0, data: [] }, experiences: { total: 1, offset: 0, limit: 1, data: [{ action: 'insertContentAfter', selector: '.marquee', 'page filter (optional)': '/products/special-offers', chrome: 'https://main--milo--adobecom.hlx.page/drafts/mariia/fragments/personalizationtext' }] }, ':version': 3, ':names': ['info', 'placeholders', 'experiences'], ':type': 'multi-sheet',
-    };
-    function htmlResponse() {
-      return new Promise((resolve) => {
-        resolve({
-          ok: true,
-          json: () => MANIFEST_JSON,
-        });
-      });
-    }
-
-    it('have target be set to gnav and save in config', async () => {
-      window.fetch = sinon.stub().returns(htmlResponse());
-      document.head.innerHTML = await readFile({ path: './mocks/mep/head-target-gnav.html' });
-      await utils.loadArea();
-      const resultConfig = utils.getConfig();
-      expect(resultConfig.mep.targetEnabled).to.equal('gnav');
-    });
-  });
-
   describe('filterDuplicatedLinkBlocks', () => {
     it('returns empty array if receives invalid params', () => {
       expect(utils.filterDuplicatedLinkBlocks()).to.deep.equal([]);