@adobe/helix-rum-enhancer
Advanced tools
Add advanced functionality to Helix RUM Collection (client-side)
This library is meant to be used in conjunction with and loaded by the sampleRUM function found in Helix Project Boilerplate or Helix RUM JS.
It will add following new checkpoints:
cwv: Core Web Vitals Collectionpagesviewed: number that helps to estimate how many pages are seen in average by a user.click: A click anywhere in the documentviewblock: A Helix block has been scrolled into the viewportviewmedia: An image or video hosted by Helix Media Bus has been scrolled into the viewportreload, navigate, enter: depending on how the current page was accessedformsubmit: when a form is submittedsource parameter and the sourceSelectorThe source parameter is a string that can be used to identify the source of the event. It can be used to identify the source of the event, e.g. a button, a link, a form, etc.
It represents an idealized CSS selector that is both human-readable and specific enough to identify the source of the event in the document, even when not having access to the
orginal document. It is idealized because it pretends the DOM would use modern HTML with concise semantics, even if the actual document uses class values for things that would
be better represented by semantic HTML elements.
The sourceSelector function is a function that takes a DOM element and returns a descriptive source parameter. If the element has a data-rum-source attribute, its value is used as the source parameter. Otherwise, the function tries to generate a source parameter based on the element's tag name, class names, and text content.
The structure of the source parameter is as follows:
<context> <element>#<identifier>
All three parts are optional
context is
form for form elementsdialog for dialog elements, or parent containers that are fixed positioned and have a positive high z-index.block-name for Helix blocksheader, footer, nav, aside for main site structure#id as a fallback, if a container ID is availableelement is
button for buttons, or links that look like buttons (e.g. with a class button or btn or cta)img for imagesvideo for videosa for links that are not buttonsinput[type="text"] for input elements (all types are supported)select, textarea, etc. for other form elementsidentifier is
id attribute of the element, if provided.class if there are anyEven if an identifier is provided, having a context and element is recommended, as it makes the source parameter more readable and easier to understand.
$ npm install
$ npm test
$ npm run lint
FAQs
Helix RUM Enhancer
The npm package @adobe/helix-rum-enhancer receives a total of 6,936 weekly downloads. As such, @adobe/helix-rum-enhancer popularity was classified as popular.
We found that @adobe/helix-rum-enhancer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PEP 770 proposes adding SBOM support to Python packages to improve transparency and catch hidden non-Python dependencies that security tools often miss.
Security News
Socket CEO Feross Aboukhadijeh discusses open source security challenges, including zero-day attacks and supply chain risks, on the Cyber Security Council podcast.
Security News
Research
Socket researchers uncover how threat actors weaponize Out-of-Band Application Security Testing (OAST) techniques across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.