Tagging
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:
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 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'.
<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.