Tagging

This component enables and manages the sending of information to the Empathy Tagging API (opens new window). It allows you to activate or deactivate the session id management through the consent prop.

Props

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

Events

This component emits the following events:

• ConsentProvided (opens new window)
• TaggingConfigProvided (opens new window)

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.

<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 storageKeyare 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'.

<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

<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 using the prop values.