@adobe/helix-rum-enhancer
v2.26.0
Published
Helix RUM Enhancer
Downloads
26,310
Maintainers
Keywords
Readme
Helix RUM Enhancer
Add advanced functionality to Helix RUM Collection (client-side)
Status
Usage
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 submitted
The source
parameter and the sourceSelector
The 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 available
element
is
button
for buttons, or links that look like buttons (e.g. with a classbutton
orbtn
orcta
)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 elements
identifier
is
- the
id
attribute of the element, if provided - the first
.class
if there are any - else omitted
Even if an identifier
is provided, having a context
and element
is recommended, as it makes the source
parameter more readable and easier to understand.
Examples
- ``
Development
Build
$ npm install
Test
$ npm test
Lint
$ npm run lint