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

Jump to bottom

feat: instrument main via editable data attributes #143

Merged
merged 5 commits into from
Dec 1, 2022
Merged

feat: instrument main via editable data attributes #143

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
28b4bef
feat: instrument main via editable data attributes
meryllblanchet Nov 25, 2022
459bb7e
Merge branch 'main' into 72-data-attributes-live-ux
mhaack Nov 30, 2022
7782037
feat: instrumented 404.html
meryllblanchet Nov 30, 2022
2f7ce4a
feat: added support for 404 in metadata.xls
meryllblanchet Dec 1, 2022
e91cbff
Merge branch 'main' into 72-data-attributes-live-ux
mhaack Dec 1, 2022
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
21 changes: 19 additions & 2 deletions 404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<script type="module">
import { sampleRUM } from '/scripts/lib-franklin.js';

window.addEventListener('load', () => {
window.addEventListener('load', async () => {
if (document.referrer) {
const { origin, pathname } = new URL(document.referrer);
if (origin === window.location.origin) {
Expand All @@ -26,6 +26,23 @@
btnContainer.append(backBtn);
}
}
const resp = await fetch(`metadata.json`);
if (resp.ok) {
const json = await resp.json();
if (json && json.data) {
const matchedRow = json.data.find((row) => (row.URL === '404.html'));
if (matchedRow) {
const main = document.querySelector('main');
if (main) {
main.setAttribute('data-wp-version-name', matchedRow['wp-version-name']);
main.setAttribute('data-wp-page-type', matchedRow['wp-page-type']);
main.setAttribute('data-wp-http-status', matchedRow['wp-http-status']);
main.setAttribute('data-wp-version-traffic', matchedRow['wp-version-traffic']);
main.setAttribute('data-wp-page-cookie', matchedRow['wp-page-cookie']);
meryllblanchet marked this conversation as resolved.
Show resolved Hide resolved
}
}
}
}
sampleRUM('404', { source: document.referrer, target: window.location.href });
});
</script>
Expand All @@ -50,7 +67,7 @@

<body>
<header></header>
<main class="error">
<main class="error" data-wp-version-name="franklin" data-wp-http-status="404" data-wp-page-type="error">
<div class="section">
<svg viewBox="1 0 38 18" class="error-number">
<text x="0" y="17">404</text>
Expand Down
11 changes: 11 additions & 0 deletions scripts/scripts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,12 +166,23 @@ function buildAutoBlocks(main) {
}
}

/**
* Instruments the main element with document metadata for LiveUX tracking
* @param {*} main The main element
*/
function instrumentMain(main) {
[...document.head.children]
.filter((child) => child.nodeName === 'META' && child.name.startsWith('wp-'))
.forEach((meta) => main.setAttribute(`data-${meta.name}`, meta.content));
}

/**
* Decorates the main element.
* @param {Element} main The main element
*/
// eslint-disable-next-line import/prefer-default-export
export function decorateMain(main) {
instrumentMain(main);
// hopefully forward compatible button decoration
decorateButtons(main);
buildAutoBlocks(main);
Expand Down