${manifests.length} Manifest(s) served
+
Page Info:
Target integration feature is ${targetOnText}
Personalization feature is ${personalizationOnText}
Page's Locale is ${config.locale.ietf}
@@ -250,11 +271,11 @@ function addMarkerData(manifests) {
});
}
-export default async function decoratePreviewMode(manifests) {
- const { miloLibs, codeRoot } = getConfig();
+export default async function decoratePreviewMode() {
+ const { miloLibs, codeRoot, experiments } = getConfig();
loadStyle(`${miloLibs || codeRoot}/features/personalization/preview.css`);
- addMarkerData(manifests);
+ addMarkerData(experiments);
document.addEventListener(MILO_EVENTS.DEFERRED, () => {
- createPreviewPill(manifests);
+ createPreviewPill(experiments);
}, { once: true });
}
diff --git a/libs/martech/analytics.js b/libs/martech/analytics.js
index f4d53b2f65..7434690478 100644
--- a/libs/martech/analytics.js
+++ b/libs/martech/analytics.js
@@ -1,9 +1,16 @@
-export function processTrackingLabels(text, charLimit = 20) {
- return text?.trim().replace(/\s+/g, ' ').split('|').join(' ')
+export function processTrackingLabels(text, config, charLimit = 20) {
+ if (!config) {
+ import('../utils/utils.js').then((utils) => {
+ // eslint-disable-next-line no-param-reassign
+ config = utils.getConfig();
+ });
+ }
+ const analyticsValue = text?.replace(/[^\u00C0-\u1FFF\u2C00-\uD7FF\w]+/g, ' ').replace(/^_+|_+$/g, '').trim()
.slice(0, charLimit);
+ return analyticsValue;
}
-export function decorateDefaultLinkAnalytics(block) {
+export function decorateDefaultLinkAnalytics(block, config) {
if (block.classList.length
&& !block.className.includes('metadata')
&& !block.classList.contains('link-block')
@@ -22,18 +29,18 @@ export function decorateDefaultLinkAnalytics(block) {
|| item.querySelector('img')?.getAttribute('alt')
|| 'no label';
}
- label = processTrackingLabels(label);
- item.setAttribute('daa-ll', `${label}-${linkCount}|${header}`);
+ label = processTrackingLabels(label, config);
+ item.setAttribute('daa-ll', `${label}-${linkCount}--${header}`);
}
linkCount += 1;
} else {
- header = processTrackingLabels(item.textContent);
+ header = processTrackingLabels(item.textContent, config);
}
});
}
}
-export async function decorateSectionAnalytics(section, idx) {
+export async function decorateSectionAnalytics(section, idx, config) {
document.querySelector('main')?.setAttribute('daa-im', 'true');
section.setAttribute('daa-lh', `s${idx + 1}`);
section.querySelectorAll('[data-block] [data-block]').forEach((block) => {
@@ -41,8 +48,8 @@ export async function decorateSectionAnalytics(section, idx) {
});
section.querySelectorAll('[data-block]').forEach((block, blockIdx) => {
const blockName = block.classList[0] || '';
- block.setAttribute('daa-lh', `b${blockIdx + 1}|${blockName}|${document.body.dataset.mep}`);
- decorateDefaultLinkAnalytics(block);
+ block.setAttribute('daa-lh', `b${blockIdx + 1}|${blockName.slice(0, 15)}|${document.body.dataset.mep}`);
+ decorateDefaultLinkAnalytics(block, config);
block.removeAttribute('data-block');
});
}
diff --git a/libs/martech/attributes.js b/libs/martech/attributes.js
index 9b450df998..7f7e850c8b 100644
--- a/libs/martech/attributes.js
+++ b/libs/martech/attributes.js
@@ -1,10 +1,65 @@
-const RE_ALPHANUM = /[^0-9a-z]/gi;
-const RE_TRIM_UNDERSCORE = /^_+|_+$/g;
+export function processTrackingLabels(text, config, charLimit = 20) {
+ if (!config) {
+ import('../utils/utils.js').then((utils) => {
+ // eslint-disable-next-line no-param-reassign
+ config = utils.getConfig();
+ });
+ }
+ const analyticsValue = text?.replace(/[^\u00C0-\u1FFF\u2C00-\uD7FF\w]+/g, ' ').replace(/^_+|_+$/g, '').trim()
+ .slice(0, charLimit);
+ return analyticsValue;
+}
+
+export function decorateDefaultLinkAnalytics(block, config) {
+ if (block.classList.length
+ && !block.className.includes('metadata')
+ && !block.classList.contains('link-block')
+ && !block.classList.contains('section')
+ && block.nodeName === 'DIV') {
+ let header = '';
+ let linkCount = 1;
+ block.querySelectorAll('h1, h2, h3, h4, h5, h6, a:not(.video.link-block), button, .tracking-header')
+ .forEach((item) => {
+ if (item.nodeName === 'A' || item.nodeName === 'BUTTON') {
+ if (!item.hasAttribute('daa-ll')) {
+ let label = item.textContent?.trim();
+ if (label === '') {
+ label = item.getAttribute('title')
+ || item.getAttribute('aria-label')
+ || item.querySelector('img')?.getAttribute('alt')
+ || 'no label';
+ }
+ label = processTrackingLabels(label, config);
+ item.setAttribute('daa-ll', `${label}-${linkCount}--${header}`);
+ }
+ linkCount += 1;
+ } else {
+ header = processTrackingLabels(item.textContent, config);
+ }
+ });
+ }
+}
-// decorateBlockAnalytics & decorateLinkAnalytics are being sunset
+export async function decorateSectionAnalytics(section, idx, config) {
+ document.querySelector('main')?.setAttribute('daa-im', 'true');
+ section.setAttribute('daa-lh', `s${idx + 1}`);
+ section.querySelectorAll('[data-block] [data-block]').forEach((block) => {
+ block.removeAttribute('data-block');
+ });
+ section.querySelectorAll('[data-block]').forEach((block, blockIdx) => {
+ const blockName = block.classList[0] || '';
+ block.setAttribute('daa-lh', `b${blockIdx + 1}|${blockName.slice(0, 15)}|${document.body.dataset.mep}`);
+ decorateDefaultLinkAnalytics(block, config);
+ block.removeAttribute('data-block');
+ });
+}
+
+// below functions are being sunset
export function decorateBlockAnalytics() { return false; }
export function decorateLinkAnalytics() { return false; }
+const RE_ALPHANUM = /[^0-9a-z]/gi;
+const RE_TRIM_UNDERSCORE = /^_+|_+$/g;
export const analyticsGetLabel = (txt) => txt.replaceAll('&', 'and')
.replace(RE_ALPHANUM, '_')
.replace(RE_TRIM_UNDERSCORE, '');
diff --git a/libs/martech/attributes.md b/libs/martech/attributes.md
index e2f782023a..ff8818d711 100644
--- a/libs/martech/attributes.md
+++ b/libs/martech/attributes.md
@@ -1,6 +1,86 @@
+# Adobe analytics
+https://wiki.corp.adobe.com/display/marketingtech/Analytics
+> Add tracking attributes to the DOM.
+NOTE: most blocks do not need to add custom analytics. If you do need to add custom analytics to a block, you must follow 2 rules:
+1. do not add daa-lh to any element on or inside the blocks
+2. if you add daa-ll to an element, you must have exactly 2 "levels". The levels are separated by the pipe character.
+ a. Level 1 is usually the link text and number
+ b. Level 2 is usually the header text
+ Example: Buy now-2|Everyone can Photosh
+ Even if you have no header text, you must still have 2 levels.
+ Example: Buy now-2|
+
+
+
+
+## function list
+
+### processTrackingLabels
+
+> Used in decorateDefaultLinkAnalytics. Can be used inside a block to process text for use in daa-ll.
+Input a string and outputs the clean string. Optional 2nd parameter of character length.
+
+### decorateDefaultLinkAnalytics
+
+> Used in decorateSectionAnalytics, so every block will be passed through this function.
+Can be used inside a block to add daa-ll attributes. Does not overwrite existing daa-ll attributes.
+You only need to call this function in the block if you need the daa-ll attributes added during block decoration.
+Input the block element no return value.
+
+### decorateSectionAnalytics
+
+> Used in utils post block decoration.
+1. Adds daa-lh to body with information about personalization and testing
+2. Adds daa-im="true" to main
+3. Adds a daa-lh to sections with the number. Example: daa-lh="s2"
+4. Adds a daa-lh to blocks with the in and number. Example: daa-lh="b3|homepage-brick|smb--var1-Golf marquee|homepage--ACE0759"
+5. Runs each block through decorateDefaultLinkAnalytics
+
+
+
+
+## types of tracking
+> tracking combines the daa-ll value with all daa-lh values on container elements. But the combined order may surprise you. Let's say you had the following DOM.
+section: daa-lh="s2"
+block: daa-lh="b3|homepage-brick|smb--var1-Golf marquee|homepage--ACE0759"
+link: daa-ll="Online PDF tools-5|Acrobat"
+
+The combined analytic would be `Online PDF tools-5|Acrobat|s2|b3|homepage-brick|smb--var1-Golf marquee|homepage--ACE0759`
+This order is the reason the personalization and testing information is repeated on each block. If an analytic is truncated due to length, it is mostly likely to be cut off.
+
+### click tracking
+> Any link with daa-ll will send tracking when a user clicks an element. Same value as impression tracking but limited to 100 characters.
+
+### impression tracking
+> Only links with daa-ll and under a daa-im="true" value sent. Sent after page load (sometimes on unload). Same value as click tracking but limited to 250 characters per link.
+
+
+
+
+## attribute list
+
+### `daa-im`
+
+Simple attribute flag if set to true will capture impressions for each link in that container. Added to header and main but NOT footer.
+
+### `daa-lh`
+
+Hierarchy values that are used to create a complete view of where each interaction is located.
+
+Our code will combine hierarchy values to create where (unique identifier) for every interaction.
+
+### `daa-ll`
+
+Interaction identifier. See above for strict rules on what format should be used if setting custom daa-ll values.
+
+
+
+
+
+######
# Sunset functions
-> All functions in this file are being deprecated. Use functions in analytics.js instead
+> Previous functions in this file are being deprecated.
## decorateBlockAnalytics
diff --git a/libs/martech/martech.js b/libs/martech/martech.js
index 30c79d31e5..94ae871c5b 100644
--- a/libs/martech/martech.js
+++ b/libs/martech/martech.js
@@ -53,7 +53,10 @@ const handleAlloyResponse = (response) => {
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']}`,
meta: item.meta,
@@ -105,10 +108,6 @@ export default async function init({ persEnabled = false, persManifests }) {
`${config.miloLibs || config.codeRoot}/features/personalization/personalization.js`,
{ as: 'script', rel: 'modulepreload' },
);
- loadLink(
- `${config.miloLibs || config.codeRoot}/features/personalization/manifest-utils.js`,
- { as: 'script', rel: 'modulepreload' },
- );
}
setDeep(
@@ -120,7 +119,7 @@ export default async function init({ persEnabled = false, persManifests }) {
window.marketingtech = {
adobe: {
- launch: { url, controlPageLoad: false },
+ launch: { url, controlPageLoad: true },
alloy: { edgeConfigId },
target: false,
},
@@ -134,14 +133,13 @@ export default async function init({ persEnabled = false, persManifests }) {
if (persEnabled) {
const targetManifests = await getTargetPersonalization();
- if (targetManifests || persManifests?.length) {
- const [{ preloadManifests }, { applyPers, getEntitlements }] = await Promise.all([
- import('../features/personalization/manifest-utils.js'),
- import('../features/personalization/personalization.js'),
- ]);
+ if (targetManifests?.length || persManifests?.length) {
+ const { preloadManifests, applyPers, getEntitlements } = await import('../features/personalization/personalization.js');
getEntitlements();
const manifests = preloadManifests({ targetManifests, persManifests });
await applyPers(manifests);
+ } else {
+ document.body.dataset.mep = 'nopzn|nopzn';
}
}
}
diff --git a/libs/templates/404/404.js b/libs/templates/404/404.js
index 84b50cd3ac..bcbcef6698 100644
--- a/libs/templates/404/404.js
+++ b/libs/templates/404/404.js
@@ -12,7 +12,7 @@ async function get404(path) {
const main = document.body.querySelector('main');
main.append(section);
await loadArea(main);
- import('../../martech/analytics.js').then((analytics) => {
+ import('../../martech/attributes.js').then((analytics) => {
document.querySelectorAll('main > div').forEach((area, idx) => analytics.decorateSectionAnalytics(area, idx));
});
}
diff --git a/libs/utils/utils.js b/libs/utils/utils.js
index 40fb59e128..f6832402ee 100644
--- a/libs/utils/utils.js
+++ b/libs/utils/utils.js
@@ -799,10 +799,6 @@ async function checkForPageMods() {
`${base}/features/personalization/personalization.js`,
{ as: 'script', rel: 'modulepreload' },
);
- loadLink(
- `${base}/features/personalization/manifest-utils.js`,
- { as: 'script', rel: 'modulepreload' },
- );
}
if (persEnabled) {
@@ -812,8 +808,10 @@ async function checkForPageMods() {
}
const { env } = getConfig();
+ let previewOn = false;
const mep = PAGE_URL.searchParams.get('mep');
if (mep !== null || (env?.name !== 'prod' && (persEnabled || targetEnabled))) {
+ previewOn = true;
const { default: addPreviewToConfig } = await import('../features/personalization/add-preview-to-config.js');
persManifests = await addPreviewToConfig({
pageUrl: PAGE_URL,
@@ -827,14 +825,17 @@ async function checkForPageMods() {
await loadMartech({ persEnabled: true, persManifests, targetMd });
} else if (persManifests.length) {
loadIms().catch(() => {});
- const { preloadManifests } = await import('../features/personalization/manifest-utils.js');
+ const { preloadManifests, applyPers } = await import('../features/personalization/personalization.js');
const manifests = preloadManifests({ persManifests }, { getConfig, loadLink });
- const { applyPers } = await import('../features/personalization/personalization.js');
-
await applyPers(manifests);
} else {
- document.body.dataset.mep = 'default|default';
+ document.body.dataset.mep = 'nopzn|nopzn';
+ }
+
+ if (previewOn) {
+ import('../features/personalization/preview.js')
+ .then(({ default: decoratePreviewMode }) => decoratePreviewMode());
}
}
@@ -990,8 +991,8 @@ async function documentPostSectionLoading(config) {
const { default: delayed } = await import('../scripts/delayed.js');
delayed([getConfig, getMetadata, loadScript, loadStyle, loadIms]);
- import('../martech/analytics.js').then((analytics) => {
- document.querySelectorAll('main > div').forEach((section, idx) => analytics.decorateSectionAnalytics(section, idx));
+ import('../martech/attributes.js').then((analytics) => {
+ document.querySelectorAll('main > div').forEach((section, idx) => analytics.decorateSectionAnalytics(section, idx, config));
});
}
diff --git a/test/blocks/accordion/accordion.test.js b/test/blocks/accordion/accordion.test.js
index 0d1126815d..f72c34d6d1 100644
--- a/test/blocks/accordion/accordion.test.js
+++ b/test/blocks/accordion/accordion.test.js
@@ -33,15 +33,15 @@ describe('Accordion', () => {
// handleClick()
const firstAccordionButton = document.body.querySelector('dt button');
expect(firstAccordionButton.getAttribute('aria-expanded')).to.equal('false');
- expect(firstAccordionButton.getAttribute('daa-ll')).to.equal('open-1|What if my dough did');
+ expect(firstAccordionButton.getAttribute('daa-ll')).to.equal('open-1--What if my dough did');
firstAccordionButton.click();
expect(firstAccordionButton.getAttribute('aria-expanded')).to.equal('true');
- expect(firstAccordionButton.getAttribute('daa-ll')).to.equal('close-1|What if my dough did');
+ expect(firstAccordionButton.getAttribute('daa-ll')).to.equal('close-1--What if my dough did');
// handleClick() => expanded = true.
firstAccordionButton.click();
expect(firstAccordionButton.getAttribute('aria-expanded')).to.equal('false');
- expect(firstAccordionButton.getAttribute('daa-ll')).to.equal('open-1|What if my dough did');
+ expect(firstAccordionButton.getAttribute('daa-ll')).to.equal('open-1--What if my dough did');
// ensure
is kept
expect(firstAccordionButton.parentElement.tagName).to.equal('H1');
diff --git a/test/blocks/global-navigation/utilities/utilities.test.js b/test/blocks/global-navigation/utilities/utilities.test.js
index 2d6c8bc74a..33dcf703e6 100644
--- a/test/blocks/global-navigation/utilities/utilities.test.js
+++ b/test/blocks/global-navigation/utilities/utilities.test.js
@@ -57,8 +57,8 @@ describe('global navigation utilities', () => {
it('getAnalyticsValue should return a string', () => {
expect(getAnalyticsValue('test')).to.equal('test');
- expect(getAnalyticsValue('test test')).to.equal('test_test');
- expect(getAnalyticsValue('test test 1', 2)).to.equal('test_test_1-2');
+ expect(getAnalyticsValue('test test?')).to.equal('test test');
+ expect(getAnalyticsValue('test test 1?', 2)).to.equal('test test 1-2');
});
describe('decorateCta', () => {
diff --git a/test/features/personalization/mocks/manifestTestOrPromo.json b/test/features/personalization/mocks/manifestTestOrPromo.json
new file mode 100644
index 0000000000..24ec52fae0
--- /dev/null
+++ b/test/features/personalization/mocks/manifestTestOrPromo.json
@@ -0,0 +1,44 @@
+{
+ "info":{
+ "total":2,
+ "offset":0,
+ "limit":2,
+ "data":[
+ {
+ "key":"manifest-type",
+ "value":"Test or Promo"
+ },
+ {
+ "key":"manifest-override-name",
+ "value":""
+ }
+ ]
+ },
+ "experiences":{
+ "total":1,
+ "offset":0,
+ "limit":1,
+ "data":[
+ {
+ "action":"replaceContent",
+ "selector":".marquee",
+ "page filter (optional)":"",
+ "android":"https://main--milo--adobecom.hlx.page/drafts/vgoodrich/fragments/139173-mep-and/android"
+ }
+ ]
+ },
+ "placeholders":{
+ "total":0,
+ "offset":0,
+ "limit":0,
+ "data":[]
+ },
+ ":version":3,
+ ":names":[
+ "info",
+ "experiences",
+ "placeholders"
+ ],
+ ":type":"multi-sheet"
+}
+
diff --git a/test/features/personalization/mocks/personalization.html b/test/features/personalization/mocks/personalization.html
index ef2bcf65a9..c99690ed34 100644
--- a/test/features/personalization/mocks/personalization.html
+++ b/test/features/personalization/mocks/personalization.html
@@ -1,4 +1,4 @@
-
+
@@ -111,3 +111,4 @@
+
diff --git a/test/features/personalization/personalization.test.js b/test/features/personalization/personalization.test.js
index 7b91b3145e..6e5edb3958 100644
--- a/test/features/personalization/personalization.test.js
+++ b/test/features/personalization/personalization.test.js
@@ -21,6 +21,15 @@ const setFetchResponse = (data, type = 'json') => {
// Note that the manifestPath doesn't matter as we stub the fetch
describe('Functional Test', () => {
+ it('test or promo manifest', async () => {
+ let manifestJson = await readFile({ path: './mocks/manifestTestOrPromo.json' });
+ manifestJson = JSON.parse(manifestJson);
+ setFetchResponse(manifestJson);
+
+ await applyPers([{ manifestPath: '/path/to/manifest.json' }]);
+ expect(document.body.dataset.mep).to.equal('nopzn|nopzn');
+ });
+
it('replaceContent should replace an element with a fragment', async () => {
let manifestJson = await readFile({ path: './mocks/manifestReplace.json' });
manifestJson = JSON.parse(manifestJson);
diff --git a/test/martech/analytics.test.js b/test/martech/attributes.test.js
similarity index 87%
rename from test/martech/analytics.test.js
rename to test/martech/attributes.test.js
index 088191d711..45e9c8b1ac 100644
--- a/test/martech/analytics.test.js
+++ b/test/martech/attributes.test.js
@@ -4,7 +4,7 @@ import { expect } from '@esm-bundle/chai';
describe('Analytics', async () => {
beforeEach(async () => {
await readFile({ path: './mocks/body.html' });
- const analytics = await import('../../libs/martech/analytics.js');
+ const analytics = await import('../../libs/martech/attributes.js');
document.body.outerHTML = await readFile({ path: './mocks/body.html' });
document.querySelectorAll('main > div').forEach((section, idx) => analytics.decorateSectionAnalytics(section, idx));
});
@@ -16,6 +16,6 @@ describe('Analytics', async () => {
const block = section.querySelector(':scope > div')?.getAttribute('daa-lh');
expect(block).to.equal('b1|icon-block|smb|hp');
const link = section.querySelector('#unit-test')?.getAttribute('daa-ll');
- expect(link).to.equal('Learn more-3|Do more with Adobe P');
+ expect(link).to.equal('Learn more-3--Do more with Adobe P');
});
});