# Tags

**Tags** are strings that can be associated with a specific visit/session.\
Unlike [**events**](https://docs.uxwizz.com/api/events), 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:

![](https://2006615411-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ltuu0c63_YY4iXfi5vJ%2F-Ltuu1VFzIjY0TGi0BA3%2F-LtuuAQyek29oslUqDb_%2Ftags-scroll.png?generation=1574020102690676\&alt=media)

### 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)
```