Element text

This filter works with the LCP, INP and CLS metrics

When analyzing specific metric elements on your webpage, identifying the correct element or selector is crucial. While the exact metric element or selector serves as the best starting point, it’s important to note that class names and selectors can change with every deployment. Additionally, the web-vitals library may return varying paths, which can complicate analysis.

To provide more consistent and coalesced results, our tracking script attempts to collect additional contextual information from the element. If available, it will capture the element's innerText, title attribute, or alt attribute. This collected information is reported as the element text (elmText).

To aid in element recognition, we automatically prefix the reported text with the element’s tagName (e.g., nav, a, or button). This makes it easier to identify the type of element being tracked. Below is an example shown in the following screenshot:

Language variations

We recognize that the resulting text can vary, especially due to differences in languages across your site. To address this, we offer customization options that allow you to further refine how elements are grouped and tracked.

Customizing element grouping

For more advanced grouping, we recommend adding the elementtiming attribute with a descriptive value to the elements you wish to track. This can be particularly useful for metrics like Interaction to Next Paint (INP), where consistent grouping of elements - such as "add to cart" buttons - can provide more accurate insights.

You might already be familiar with the elementtiming attribute. We fully support it for tracking the precise timing of when an element is rendered.

By using the elementtiming attribute, you can ensure that the tracking remains consistent regardless of language variations or changing selector paths.

Elementtiming and INP

When it comes to coalescing INP elements, we advice to set the elementtiming to the highest parent of your interactive elements.

For example, if your button looks like the following, the web-vitals library might report the span element as interacted target:

<button><span>Add to cart</span></button>

However, we recommend adding the elementtiming attribute to the button, as our tracking script will be looking for the closest element with the elementtiming attribute. Adding it to the highest interactive element in the DOM tree will give you better results.