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
clickedResultStorageTTLMs	The TTL in milliseconds for storing the clicked result info.	number	30000
clickedResultStorageKey	The Object key of the @empathyco/x-types#Result clicked 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.	union
queryTaggingDebounceMs	The debounce time in milliseconds to track the query.	union
consent	The consent to be emitted.	boolean

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, clickedResultStorageTTLMs or clickedResultStorageKeyare defined.

Every time the user clicks a result the information for the clicked product will be stored on the browser during 30 seconds which is the default value for the prop clickedResultStorageTTLMs. To distinguish the storage information for the different results the product url will be used since clickedResultStorageKey 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 result information will be stored on the browser during 60 seconds and the product id will be used as storage key.

<template>
  <Tagging :clickedResultStorageTTLMs="60000" :clickedResultStorageKey="'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.