---
title: "Element text (Help Center / Filters / Metric)"
ai_context: "Use this article for questions about the RUMvision Element text filter, grouping LCP, INP and CLS elements more consistently when exact DOM selectors or CSS classes vary between deployments, pages or languages. It explains how RUMvision derives `elmText` from an element’s `innerText`, `title` or `alt` attribute, prefixes values with the element `tagName`, and uses this extra context to make metric elements easier to recognize and compare. Relevant for questions about unstable selectors, language variations, coalescing repeated components, grouping add-to-cart buttons or hero images, `elementtiming`, custom element labels, consistent LCP/CLS/INP dimensions, dynamic CSS classes and placing `elementtiming` on the highest relevant interactive parent so INP targets are grouped more reliably."
canonical: "https://www.rumvision.com/help-center/filters/metric/element-text/"
---

Breadcrumbs: [Home](https://www.rumvision.com/?format=md) > [Help Center](https://www.rumvision.com/help-center/?format=md) > [Filters](https://www.rumvision.com/help-center/filters/?format=md) > [Metric](https://www.rumvision.com/help-center/filters/metric/?format=md) > Element text

# Element text

> This filter works with the [LCP](https://www.rumvision.com/help-center/glossary/metrics/largest-contentful-paint/?format=md), [INP](https://www.rumvision.com/help-center/glossary/metrics/interaction-to-next-paint/?format=md) and [CLS](https://www.rumvision.com/help-center/glossary/metrics/cumulative-layout-shift/?format=md) metrics

When analyzing specific metric elements on your webpage, identifying the correct element or selector is crucial. While the exact [metric element or selector](https://www.rumvision.com/help-center/filters/metric/metric-element/?format=md) 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:

[![element-text-filter.png](https://www.rumvision.com/file/upload/img/element-text-filter.png)](https://www.rumvision.com/file/upload/img/element-text-filter.png.webp)

## 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.

## Customize 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](https://www.rumvision.com/help-center/monitoring/settings/custom-performance-timing/?format=md#element-timing).

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

### Why elementtiming

We went with `elementtiming` attribute as this attribute is already meant to track the timing of an element while giving it a unique name. This name is then typically equal for the same element/component across different pageurls.

For example, you could use `elementtiming="hero"` for hero images on all your blog pages, or `elementtiming="main-image"` on all your product pages, regardless of the exact product page URL or dynamically created CSS classes.

This will work for LCP, CLS and INP.

### 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:

```
Add to cart
```

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 more coalesced results.