Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[MEP][AJO] POC to integrate AJO with MEP #3654

Open
wants to merge 7 commits into
base: stage
Choose a base branch
from
+92 −48
Open

[MEP][AJO] POC to integrate AJO with MEP #3654

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6d9e9ef
Add ajo integration
markpadbe Feb 4, 2025
453306d
Remove AJO references from pznv2 for now
markpadbe Feb 19, 2025
e6a3e2e
Remove another ajo reference
markpadbe Feb 19, 2025
4bf24be
revert formatting
markpadbe Feb 19, 2025
1ac0865
Merge branch 'stage' into ajointegration
markpadbe Feb 24, 2025
147b7db
Remove hard-coded url
markpadbe Feb 24, 2025
aca09e6
Add tests for enabling ajo
markpadbe Feb 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 37 additions & 30 deletions libs/features/personalization/personalization.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1141,28 +1141,28 @@ export const combineMepSources = async (persEnabled, promoEnabled, mepParam) =>
};

async function updateManifestsAndPropositions(
{ config, targetManifests, targetPropositions },
{ config, targetAjoManifests, targetAjoPropositions },
) {
targetManifests.forEach((manifest) => {
manifest.source = ['target'];
targetAjoManifests.forEach((manifest) => {
manifest.source = [config.mep.ajoEnabled ? 'ajo' : 'target'];
});
config.mep.targetManifests = targetManifests;
config.mep.targetAjoManifests = targetAjoManifests;
if (config.mep.enablePersV2) {
if (!config.mep.hybridPersEnabled) {
window.addEventListener('alloy_sendEvent', () => {
if (targetPropositions?.length && window._satellite) {
window._satellite.track('propositionDisplay', targetPropositions);
if (targetAjoPropositions?.length && window._satellite) {
window._satellite.track('propositionDisplay', targetAjoPropositions);
}
}, { once: true });
}
} else if (targetPropositions?.length && window._satellite) {
window._satellite.track('propositionDisplay', targetPropositions);
} else if (targetAjoPropositions?.length && window._satellite) {
window._satellite.track('propositionDisplay', targetAjoPropositions);
}
if (config.mep.targetEnabled === 'postlcp') {
const event = new CustomEvent(MARTECH_RETURNED_EVENT, { detail: 'Martech returned' });
window.dispatchEvent(event);
}
return targetManifests;
return targetAjoManifests;
}

function roundToQuarter(num) {
Expand Down Expand Up @@ -1201,20 +1201,23 @@ function sendTargetResponseAnalytics(failure, responseStart, timeoutLocal, messa
}

const handleAlloyResponse = (response) => ((response.propositions || response.decisions))
?.map((i) => i.items)
?.map((i) => {
const { id } = i;
return i.items.map((item) => ({ ...item, id }));
})
?.flat()
?.map((item) => {
const content = item?.data?.content;
if (!content || !(content.manifestLocation || content.manifestContent)) return null;

return {
manifestPath: content.manifestLocation || content.manifestPath,
manifestUrl: content.manifestLocation,
manifestData: content.manifestContent?.experiences?.data || content.manifestContent?.data,
manifestPlaceholders: content.manifestContent?.placeholders?.data,
manifestInfo: content.manifestContent?.info.data,
name: item.meta['activity.name'],
variantLabel: item.meta['experience.name'] && `target-${item.meta['experience.name']}`,
name: item.meta?.['activity.name'] || item.id,
variantLabel: (item.meta?.['experience.name'] && `target-${item.meta['experience.name']}`)
|| content.experienceName,
meta: item.meta,
};
})
Expand All @@ -1223,8 +1226,9 @@ const handleAlloyResponse = (response) => ((response.propositions || response.de
async function handleMartechTargetInteraction(
{ config, targetInteractionPromise, calculatedTimeout },
) {
let targetManifests = [];
let targetPropositions = [];
const targetAjo = config.mep.ajoEnabled ? 'ajo' : 'target';
let targetAjoManifests = [];
let targetAjoPropositions = [];
if (config?.mep?.enablePersV2 && targetInteractionPromise) {
const { targetInteractionData, respTime, respStartTime } = await targetInteractionPromise;
sendTargetResponseAnalytics(false, respStartTime, calculatedTimeout);
Expand All @@ -1233,33 +1237,35 @@ async function handleMartechTargetInteraction(
performance.clearMarks();
performance.clearMeasures();
try {
window.lana.log(`target response time: ${roundedResponseTime}`, {
window.lana.log(`${targetAjo} response time: ${roundedResponseTime}`, {
tags: 'martech',
errorType: 'e',
sampleRate: 0.5,
});
} catch (e) {
// eslint-disable-next-line no-console
console.error('Error logging target response time:', e);
console.error(`Error logging ${targetAjo} response time:`, e);
}
targetManifests = handleAlloyResponse(targetInteractionData.result);
targetPropositions = targetInteractionData.result?.propositions || [];
targetAjoManifests = handleAlloyResponse(targetInteractionData.result);
targetAjoPropositions = targetInteractionData.result?.propositions || [];
}
}

return updateManifestsAndPropositions(
{ config, targetManifests, targetPropositions },
{ config, targetAjoManifests, targetAjoPropositions },
);
}

async function callMartech(config) {
const { getTargetPersonalization } = await import('../../martech/martech.js');
const { getTargetAjoPersonalization } = await import('../../martech/martech.js');
const {
targetManifests,
targetPropositions,
} = await getTargetPersonalization({ handleAlloyResponse, sendTargetResponseAnalytics });
targetAjoManifests,
targetAjoPropositions,
} = await getTargetAjoPersonalization(
{ handleAlloyResponse, config, sendTargetResponseAnalytics },
);
return updateManifestsAndPropositions(
{ config, targetManifests, targetPropositions },
{ config, targetAjoManifests, targetAjoPropositions },
);
}

Expand All @@ -1272,7 +1278,7 @@ export async function init(enablements = {}) {
let manifests = [];
const {
mepParam, mepHighlight, mepButton, pzn, promo, enablePersV2, hybridPersEnabled,
target, targetInteractionPromise, calculatedTimeout, postLCP,
target, ajo, targetInteractionPromise, calculatedTimeout, postLCP,
} = enablements;
const config = getConfig();
if (postLCP) {
Expand All @@ -1285,6 +1291,7 @@ export async function init(enablements = {}) {
variantOverride: parseMepParam(mepParam),
highlight: (mepHighlight !== undefined && mepHighlight !== 'false'),
targetEnabled: target,
ajoEnabled: ajo,
experiments: [],
prefix: config.locale?.prefix.split('/')[1]?.toLowerCase() || US_GEO,
enablePersV2,
Expand All @@ -1304,12 +1311,12 @@ export async function init(enablements = {}) {
{ config, targetInteractionPromise, calculatedTimeout },
));
} else {
if (target === true) manifests = manifests.concat(await callMartech(config));
if (target === 'postlcp') callMartech(config);
if (target === true || ajo === true) manifests = manifests.concat(await callMartech(config));
if (target === 'postlcp' || ajo === 'postlcp') callMartech(config);
}
if (postLCP) {
if (!config.mep.targetManifests) await awaitMartech();
manifests = config.mep.targetManifests;
if (!config.mep.targetAjoManifests) await awaitMartech();
manifests = config.mep.targetAjoManifests;
}
try {
if (manifests?.length) await applyPers({ manifests });
Expand Down
35 changes: 21 additions & 14 deletions libs/martech/martech.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {
getConfig, loadIms, loadLink, loadScript, getMepEnablement, getMetadata,
} from '../utils/utils.js';

const ALLOY_PROPOSITION_FETCH = 'alloy_propositionFetch';
const ALLOY_SEND_EVENT = 'alloy_sendEvent';
const ALLOY_SEND_EVENT_ERROR = 'alloy_sendEvent_error';
const ENTITLEMENT_TIMEOUT = 3000;
Expand Down Expand Up @@ -49,8 +50,10 @@ const waitForEventOrTimeout = (eventName, timeoutLocal, returnValIfTimeout) => n
}
}, timeoutLocal);

const eventError = eventName
=== ALLOY_SEND_EVENT ? ALLOY_SEND_EVENT_ERROR : ALLOY_PROPOSITION_FETCH;
window.addEventListener(eventName, listener, { once: true });
window.addEventListener(ALLOY_SEND_EVENT_ERROR, errorListener, { once: true });
window.addEventListener(eventError, errorListener, { once: true });
});

function roundToQuarter(num) {
Expand All @@ -62,11 +65,14 @@ function calculateResponseTime(responseStart) {
return roundToQuarter(responseTime);
}

export const getTargetPersonalization = async (
{ handleAlloyResponse, sendTargetResponseAnalytics },
export const getTargetAjoPersonalization = async (
{ handleAlloyResponse, config, sendTargetResponseAnalytics },
) => {
const responseStart = Date.now();
window.addEventListener(ALLOY_SEND_EVENT, () => {
const ajo = config.mep.ajoEnabled;
const eventName = ajo ? ALLOY_PROPOSITION_FETCH : ALLOY_SEND_EVENT;
const targetAjo = ajo ? 'ajo' : 'target';
window.addEventListener(eventName, () => {
const responseTime = calculateResponseTime(responseStart);
try {
window.lana.log(`target response time: ${responseTime}`, {
Expand All @@ -80,33 +86,34 @@ export const getTargetPersonalization = async (
}
}, { once: true });

let targetManifests = [];
let targetPropositions = [];
let targetAjoManifests = [];
let targetAjoPropositions = [];

const response = await waitForEventOrTimeout(eventName, timeout);

const response = await waitForEventOrTimeout(ALLOY_SEND_EVENT, timeout);
if (response.error) {
try {
window.lana.log('target response time: ad blocker', {
window.lana.log(`${targetAjo} response time: ad blocker`, {
tags: 'martech',
errorType: 'e',
sampleRate: 0.5,
});
} catch (e) {
// eslint-disable-next-line no-console
console.error('Error logging target response time for ad blocker:', e);
console.error(`Error logging ${targetAjo} response time for ad blocker:`, e);
}
return { targetManifests, targetPropositions };
return { targetAjoManifests, targetAjoPropositions };
}
if (response.timeout) {
waitForEventOrTimeout(ALLOY_SEND_EVENT, 5100 - timeout)
waitForEventOrTimeout(eventName, 5100 - timeout)
.then(() => sendTargetResponseAnalytics(true, responseStart, timeout));
} else {
sendTargetResponseAnalytics(false, responseStart, timeout);
targetManifests = handleAlloyResponse(response.result);
targetPropositions = response.result?.propositions || [];
targetAjoManifests = handleAlloyResponse(response.result);
targetAjoPropositions = response.result?.propositions || [];
}

return { targetManifests, targetPropositions };
return { targetAjoManifests, targetAjoPropositions };
};

const setupEntitlementCallback = () => {
Expand Down
7 changes: 5 additions & 2 deletions libs/utils/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1126,9 +1126,11 @@ async function checkForPageMods() {
const promo = getMepEnablement('manifestnames', PROMO_PARAM);
const target = martech === 'off' ? false : getMepEnablement('target');
const xlg = martech === 'off' ? false : getMepEnablement('xlg');
const isPOC = (document.title === '404' && window.location.pathname === '/products/photoshop/123.html');
Copy link
Contributor

@JasonHowellSlavin JasonHowellSlavin Feb 21, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is there another way to do this? I am not particularly fond of having a hardcoded string for a path in the utils/utils.js file that is used by all consumers.

For instance, you could author custom page metadata within the metadatablock on a page by page basis to allow multiple POC pages

const isPOC = (document.title === '404' && getMetadata('ajoPoc'));

Copy link
Contributor Author

@markpadbe markpadbe Feb 21, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hi @JasonHowellSlavin, as far as I know, the only way to impact the metadata for the 404 page is by updating the 404.html file via a code change. I tried authoring the metadata for the fragment that gets pulled in but that doesn't get applied to the page.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@markpadbe so the title check for 404 makes sense, but I don't think we want to lock it to the 1 URL. It should work on all 404 pages right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hi @vivgoodrich, the launch code that triggers the related propositionFetch call as of this week is targeting the /products/photoshop/123.html page. That could change, but it won't work on other pages unless that is also updated.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I hear ya, but I think we want the POC to be able to work on more pages. Otherwise we'll have to do a PR later just to enable this later.

Copy link
Contributor Author

@markpadbe markpadbe Feb 22, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, but I've left open the option to test ajo on other pages by including including getMepEnablement('ajo') on line 30. It won't work on the 404 page because there isn't a way (that I'm aware of) to update the metadata on that page without a code update, but it would work on other pages.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would a queryParam or hashParam work here and allow testing on all types of 404 pages? Or is there a reason that will not work as well?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@JasonHowellSlavin, I just got the ok to require a queryParam for the POC and I've updated the code. thanks.

const ajo = martech === 'off' ? false : isPOC || getMepEnablement('ajo');

if (!(pzn || target || promo || mepParam
|| mepHighlight || mepButton || mepParam === '' || xlg)) return;
|| mepHighlight || mepButton || mepParam === '' || xlg || ajo)) return;

const enablePersV2 = enablePersonalizationV2();
const hybridPersEnabled = getMepEnablement('hybrid-pers');
Expand All @@ -1152,7 +1154,7 @@ async function checkForPageMods() {

return { targetInteractionData: data, respTime, respStartTime: now };
})();
} else if ((target || xlg) && !isMartechLoaded) loadMartech();
} else if ((target || xlg || ajo) && !isMartechLoaded) loadMartech();
else if (pzn && martech !== 'off') {
loadIms()
.then(() => {
Expand All @@ -1170,6 +1172,7 @@ async function checkForPageMods() {
pzn,
promo,
target,
ajo,
targetInteractionPromise,
calculatedTimeout,
enablePersV2,
Expand Down
Loading