@empathyco/x-components/docs/API-reference/components/tagging/x-components.tagging.md

Empathy X Components

---

title: Tagging

---

# Tagging

This component enables and manages the sending of information to the
[Empathy Tagging API](https://docs.empathy.co/develop-empathy-platform/api-reference/tagging-api.html).
It allows you to activate or deactivate the session id management through the `consent` prop.

## Props

| Name                                | Description                                                                                                                                                                          | Type                 | Default            |
| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------- | ------------------ |
| <code>storageTTLMs</code>           | The TTL in milliseconds for storing the result info.                                                                                                                                 | <code>number</code>  | <code>30000</code> |
| <code>storageKey</code>             | The Object key of the @empathyco/x-types#Result clicked or added to the cart by the user<br />that will be used as id for the storage.<br />By default, the Result url will be used. | <code>string</code>  | <code>'url'</code> |
| <code>sessionTTLMs</code>           | The session TTL in milliseconds.                                                                                                                                                     | <code>number</code>  | <code></code>      |
| <code>queryTaggingDebounceMs</code> | The debounce time in milliseconds to track the query.                                                                                                                                | <code>number</code>  | <code>2000</code>  |
| <code>consent</code>                | The consent to be emitted.                                                                                                                                                           | <code>boolean</code> | <code>null</code>  |

## Events

This component emits the following events:

- [`ConsentProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
- [`TaggingConfigProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)

## See it in action

This component manages the tagging of the API to track the different features. This component
doesn't render elements to the DOM.

```vue
<template>
  <Tagging />
</template>

<script>
import { Tagging } from '@empathyco/x-components/tagging'

export default {
  name: 'TaggingDemo',
  components: {
    Tagging,
  },
}
</script>
```

### Play with props

In this example, the `Tagging` component will emit `ConsentProvided` with payload false by default
if the consent is not provided, the `TaggingConfigProvided` event will be emitted only if the props
`queryTaggingDebounceMs`, `sessionDurationMs`, `storageTTLMs` or `storageKey`are defined.

Every time the user clicks a result or adds a result to the cart, the information for the product
will be stored on the browser during 30 seconds which is the default value for the prop
`storageTTLMs`. To distinguish the storage information for the different results the product url
will be used since `storageKey` default value is 'url'.

```vue
<template>
  <Tagging :consent="true" :queryTaggingDebounceMs="300" :sessionDurationMs="30000" />
</template>

<script>
import { Tagging } from '@empathyco/x-components/tagging'

export default {
  name: 'TaggingDemo',
  components: {
    Tagging,
  },
}
</script>
```

In this example, the clicked or added to cart result information will be stored on the browser
during 60 seconds and the product id will be used as storage key

```vue
<template>
  <Tagging :storageTTLMs="60000" :storageKey="'id'" />
</template>

<script>
import { Tagging } from '@empathyco/x-components/tagging'

export default {
  name: 'TaggingDemo',
  components: {
    Tagging,
  },
}
</script>
```

### Play with events

The `Tagging` will emit the `ConsentProvided` when the component is loaded and the consent is set by
the prop or getting the value from the snippet config.

The `Tagging` will emit the `TaggingConfigProvided` when the component is loaded with the new
[`TaggingConfig`](./../../api/x-components.taggingconfig.md) using the prop values.