First you’ll need to install the package.
Before any events can be captured, you need to initialize the library. To do this, you’ll need to call the create
method, and pass your API key and capture URL.
For this example, let’s say you’ve built a search component that emits a custom event when the user types in the search bar.
We can listen to the onTextInput
event and call the captureSearchInput
function. Inside this function, we can use the event tracker library to capture the users input. We’ll need to import the search
method and also the SearchEventRequest
, SearchAction
, MetaData
, and MetaDataKey
helpers to do this.
Assuming there’s some additional logic to call an API to receive some search results, we’ll also want to capture those search results using the library. We could add another custom event to our search component, which emits the results and the search input when the component receives some results.
Then in the captureSearchResults
function, we can use the event tracker library to capture the search results. We’ll need to create a MetaData
object for the searchInput
, so that we can pass this to the SearchEventRequest
.
We’ll also need to create an array from the searchResults
, mapping each result to a MetaData
object. The key
property should be MetaDataKey.RelatedEntity
so that the library knows the result
is an entity associated with the searchInput
.
Once the user has received some results based on their input, it’s quite valuable to know which item they have then selected. Luckily, we can also capture this using the event tracker library.
We can add another custom event to our search component, which emits the search input and selected result when a search result is clicked.
Inside the captureResultClicked
function, we can use the event tracker library to capture which result
has been clicked and the searchInput
that it’s associated with.