In this demo, analytics events involving <rh-cta> elements are parsed by a document-level analytics event listener. Unlike <pfe-cta>, which implemented support for analytics internally, <rh-cta> users must implement their own analytics code, taking this demo as an example.

function deepClosest(event, selector) {
  for (const node of event.composedPath().reverse()) {
    if (node.matches?.(selector)) {
      return node;
    }
  }
  return event.target.closest(selector);
}

document.addEventListener('click', function(event) {
  const cta = deepClosest(event, 'rh-cta');
  if (cta) {
    const { href, text, title } = cta.cta;
    const color = cta.colorPalette;
    const type = cta.variant;
    console.log('CTA ANALYTICS EVENT', { href, text, title, color, type });
  }
});

Simple Case: Light DOM Analytics

Default Primary Secondary Brick

Advanced Case: Deep Shadow Analytics

Complex Case: Slotted Link, Deep CTA Analytics

Default Primary Secondary Brick

Last CTA Analytics Event

{}