# Tags

**Tags** are strings that can be associated with a specific visit/session.\
Unlike [**events**](/api/events.md), tags are unique per session (i.e. can not have duplicate tags), are simple strings of a length of maximum 128 characters.\
Tags can be used to quickly filter/segment data.

**Example**

```javascript
// Call this when the scrollbar reaches the end
UST.addTag('scrolled_to_footer')

// Call this when user adds an item to the basket
UST.addTag('add_to_basket_timestamp: ' + Date.now())
```

**Instructions**

* Sometimes you might want to save additional data for each tracked user (such as username or whether they clicked a button or not).
* To add a tag the function **UST.addTag()** is provided. It has only one parameter which is the tag value. For example after calling this: **UST.addTag("username\_John")**

  The tag will be saved for the current recording and you will be able to find it more easily.
* You can also enable auto-tagging when certain elements are clicked. Add the HTML5 attribute **data-UST\_click\_tag** to set what tag will be added if the current element is clicked.

  Example: `<input type="text" data-UST_click_tag="clicked_input" />`. When this input is clicked the tag **clicked\_input** will be added for this session.

  You will then be able to, for example, see only the recordings of users who clicked that specific input.

**Notes**

1. Once written, the value of **tags can not be changed**.&#x20;
2. Each tag is **unique** and can appear **only once**. If you call `UST.addTag()` again with the same tag value, nothing will happen.
3. If you want more tags with similar name, you can either add a random value or a unique ID to each tag name.

## Examples: Using tags

### 1.  Track if user scrolled on the homepage

#### JavaScript:

```javascript
// Add a tag for users who scroll at least once on the homepage
window.addEventListener('scroll', function didScroll() {
    UST.addTag('scrolled_on_home');
    window.removeEventListener('scroll', didScroll); // Sending it once is enough, remove listener
});
```

#### Result:

Recorded users will then have tags similar to this:

![](/files/-LtuuAQyek29oslUqDb_)

### 2. Record all clicked elements

By default, in order to reduce storage size, userTrack only stores click positions for both heatmaps and recordings. If you want to also store the clicked elements selectors, you could add something like this after the tracker file:

```markup
<script>
UST.onLoaded = function () {
   addDynamicEventListener(document.body, 'click', '*', function (e) {
        if (!e.delegatedTarget) return;
        var tag = UST.DOM.getUniquePath(e.delegatedTarget);
        UST.addTag('click_' + tag);
    });
}
</script>
```

This will add a tag like `click_element-path` for every element clicked, for example `click_#pricing-button(1)`.

The `element-path` is a CSS selector that has the `nth-child:`  part remove to save space, you can get the original selector by using this function:

```javascript
function uncompressSelector(selector) {
    return selector.replace(/\((\d+)\)/g, ' > *:nth-child($1)');
}

// Example
var cssSelector = uncompressSelector('#pricing-button(1)');
console.log(cssSelector );
// Outputs: #pricing-button > *:nth-child(1)
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.uxwizz.com/api/tags.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.