v134 · dom / navigation api
Analytics Tracker
One navigate handler. Every link click and form submission populates the analytics log below — element tag, ID, data-intent, destination URL — all from event.sourceElement. No per-element listeners required.
checking sourceElement…
navigation.addEventListener('navigate', e => { const el = e.sourceElement; … }) — el is the <a> or <form> (or null for programmatic navigations). Read data-intent, data-category, or any attribute off el to enrich your analytics event without coupling each element to a click handler.
Mock page — click links or submit forms
Product page — navigation elements
Analytics log
TimeTypeElementEvent data
0
Link clicks
0
Form submits
0
Programmatic
0
Total
Handler code
navigation.addEventListener('navigate', (event) => {
event.intercept({ handler: () => Promise.resolve() }); // SPA intercept
const el = event.sourceElement; // Chrome 134: the triggering element
if (el === null) {
analytics.track('programmatic_nav', { url: event.destination.url });
return;
}
if (el.tagName === 'A') {
analytics.track('link_click', {
id: el.id,
intent: el.dataset.intent,
category: el.dataset.category,
href: el.href,
text: el.textContent.trim(),
});
} else if (el.tagName === 'FORM') {
analytics.track('form_submit', {
id: el.id,
intent: el.dataset.intent,
action: el.action,
data: Object.fromEntries(new FormData(el)),
});
}
});