Este evento se dispara a nivel de ventana (window) mediante postMessage cada vez que un usuario hace clic en un elemento de los resultados de búsqueda de APIsearch.
A continuación se detalla la estructura del evento y cómo suscribirse a él desde cualquier parte de la aplicación.
Cuando te suscribas al evento, recibirás un objeto data con las siguientes propiedades:
| Propiedad | Tipo | Descripción |
|---|---|---|
name |
string |
El nombre del evento. Siempre será "apisearch_item_was_clicked". |
app_id |
string |
Identificador único de la aplicación en APIsearch. |
index_id |
string |
Identificador del índice de búsqueda utilizado. |
item_id |
string/number |
ID del artículo o producto sobre el que se hizo clic. |
site |
string |
El sitio o canal actual desde donde se realiza la acción. |
device |
string |
El tipo de dispositivo del usuario (ej. desktop, mobile). |
userType |
string |
Tipo de usuario (ej. guest, logged-in). |
query |
array |
La búsqueda que originó el resultado, formateada como array. |
result |
array |
Información o datos del resultado del clic. |
position |
number |
La posición con base 1 (o 0) del elemento dentro del listado de resultados. |
Para escuchar este evento desde otro script o componente, debes añadir un listener al evento message de la ventana global.
⚠️ Nota de seguridad: Es una buena práctica validar siempre el origen (origin) o el nombre del evento (name) antes de procesar los datos para evitar reaccionar a mensajes no deseados de otras herramientas de terceros.
// 1. Definir la función que manejará el evento
function handleApiSearchClick(event) {
// Validar que el mensaje contenga datos y que sea el evento que buscamos
if (event.data && event.data.name === "apisearch_item_was_clicked") {
const payload = event.data;
console.log("¡Evento APIsearch detectado!");
console.log("Producto clicado ID:", payload.item_id);
console.log("Posición en el ranking:", payload.position);
// Aquí puedes añadir tu lógica de analítica, tracking, etc.
// Ejemplo: MyAnalytics.track('Search Click', payload);
}
}
// 2. Escuchar los mensajes de la ventana
window.addEventListener("message", handleApiSearchClick);
// 3. (Opcional) Limpiar el listener cuando ya no sea necesario (ej. desmontar componente)
// window.removeEventListener("message", handleApiSearchClick);